Layouts: 40 React and Next.js components
App shells and page frames, such as sidebars, headers and navigation, that hold your screens. Each one has a page with a live preview and its install command.
Search and filter these 40BlocksFeaturesPagesMotionEffects
Most common uses: navigation (28), dashboards (2), file management (2), project management (2), ai & chat (1).
- AI Workspace Sidebar Nav
Main navigation of an AI and agents platform.
- Culinary App Header
Header with search and a view switcher.
- Culinary App Sidebar
Side navigation with collapsible sections.
- File Storage App Header
Header with search and a view switcher.
- File Storage App Sidebar
Side navigation with collapsible folders.
- Finance Dashboard Shell
SidebarProvider wraps shared navigation and header with a full-height independently scrolling main area.
- Fintech App Shell
Trading terminal with connection status.
- Flightops OPS Console Shell
Operations console frame with persistent side navigation.
- Healthcare Clinic App Shell
Clinical back-office shell.
- Hr People App Shell
HR back office.
- Inventory OPS App Header
Top header for a control panel with entity search.
- Inventory OPS App Sidebar
Sidebar with a site or warehouse selector.
- Inventory OPS Dashboard Shell
Base structure for admin consoles.
- Knowledge Workspace Sidebar Nav
Navigation sidebar for nested documents.
- Legal Practice App Shell
Legal practice management.
- Marine App Header
App header with route-contextual search.
- Marine App Sidebar
Operations console sidebar with quick filters by category.
- Marketing App Shell
Analytics dashboard shell with a global date range.
- Music Studio App Header
Header with contextual search per section.
- Music Studio App Sidebar
Media app navigation.
- Music Studio Studio Shell
Streaming app shell.
- Orchestra OPS Shell
Workspace shell for theater or music productions.
- Project Management App Header
Workspace header with a view selector.
- Project Management Sidebar Nav
Side navigation of a multi-team collaboration tool.
- Rare Books App Header
Header with a CTA that changes per route.
- Rare Books App Sidebar
Sidebar with a ranged taxonomy.
- Rolodeck App Header
Top bar with an integrated search box and a grid/list switcher.
- Rolodeck App Shell
Unified shell for a customer management suite.
- Rolodeck App Sidebar
Vertical navigation bar with a New Contact CTA button.
- Saas Navigate Code Hosting Shell
Sidebar, header and independently scrollable content compose the application frame.
- Saas Navigate Code Hosting Sidebar
Grouped navigation and pinned repositories provide persistent orientation.
- Saas Starter App Shell
Multi-tenant SaaS admin shell with org switcher.
- Social Client App Header
Top bar of a web application.
- Social Client App Sidebar
Main application navigation menu.
- Social Media Manager App Shell
Sidebar shell for a publishing tool.
- Support Desk App Shell
Helpdesk shell with a notification center.
- Travel App Footer
Marketplace footer with a sitemap by category.
- Travel App Header
Marketplace header with section tabs.
- Vintry App Header
Header with the route title and contextual search.
- Vintry App Sidebar
Sidebar with navigation and facets with counts.