# Layouts: Agentic UI Kit

> 40 layouts for React and Next.js, installable from the Agentic UI Kit registry. App shells and page frames, such as sidebars, headers and navigation, that hold your screens.

Page with live previews: https://agentic-ui-kit.com/components/category/layout

- [AI Workspace Sidebar Nav](https://agentic-ui-kit.com/components/ai-workspace-sidebar-nav.md): Main navigation of an AI and agents platform.
- [Travel App Header](https://agentic-ui-kit.com/components/travel-app-header.md): Marketplace header with section tabs.
- [Project Management App Header](https://agentic-ui-kit.com/components/project-management-app-header.md): Workspace header with a view selector.
- [Travel App Footer](https://agentic-ui-kit.com/components/travel-app-footer.md): Marketplace footer with a sitemap by category.
- [Project Management Sidebar Nav](https://agentic-ui-kit.com/components/project-management-sidebar-nav.md): Side navigation of a multi-team collaboration tool.
- [Inventory OPS App Header](https://agentic-ui-kit.com/components/inventory-ops-app-header.md): Top header for a control panel with entity search.
- [Inventory OPS App Sidebar](https://agentic-ui-kit.com/components/inventory-ops-app-sidebar.md): Sidebar with a site or warehouse selector.
- [Inventory OPS Dashboard Shell](https://agentic-ui-kit.com/components/inventory-ops-dashboard-shell.md): Base structure for admin consoles.
- [Orchestra OPS Shell](https://agentic-ui-kit.com/components/orchestra-ops-shell.md): Workspace shell for theater or music productions.
- [Social Client App Header](https://agentic-ui-kit.com/components/social-client-app-header.md): Top bar of a web application.
- [Marine App Header](https://agentic-ui-kit.com/components/marine-app-header.md): App header with route-contextual search.
- [Marine App Sidebar](https://agentic-ui-kit.com/components/marine-app-sidebar.md): Operations console sidebar with quick filters by category.
- [Saas Navigate Code Hosting Shell](https://agentic-ui-kit.com/components/saas-navigate-code-hosting-shell.md): Sidebar, header and independently scrollable content compose the application frame.
- [Music Studio App Sidebar](https://agentic-ui-kit.com/components/music-studio-app-sidebar.md): Media app navigation.
- [Rare Books App Sidebar](https://agentic-ui-kit.com/components/rare-books-app-sidebar.md): Sidebar with a ranged taxonomy.
- [Music Studio Studio Shell](https://agentic-ui-kit.com/components/music-studio-studio-shell.md): Streaming app shell.
- [Knowledge Workspace Sidebar Nav](https://agentic-ui-kit.com/components/knowledge-workspace-sidebar-nav.md): Navigation sidebar for nested documents.
- [Flightops OPS Console Shell](https://agentic-ui-kit.com/components/flightops-ops-console-shell.md): Operations console frame with persistent side navigation.
- [Social Client App Sidebar](https://agentic-ui-kit.com/components/social-client-app-sidebar.md): Main application navigation menu.
- [File Storage App Header](https://agentic-ui-kit.com/components/file-storage-app-header.md): Header with search and a view switcher.
- [Saas Navigate Code Hosting Sidebar](https://agentic-ui-kit.com/components/saas-navigate-code-hosting-sidebar.md): Grouped navigation and pinned repositories provide persistent orientation.
- [Culinary App Header](https://agentic-ui-kit.com/components/culinary-app-header.md): Header with search and a view switcher.
- [Finance Dashboard Shell](https://agentic-ui-kit.com/components/finance-dashboard-shell.md): SidebarProvider wraps shared navigation and header with a full-height independently scrolling main area.
- [Music Studio App Header](https://agentic-ui-kit.com/components/music-studio-app-header.md): Header with contextual search per section.
- [File Storage App Sidebar](https://agentic-ui-kit.com/components/file-storage-app-sidebar.md): Side navigation with collapsible folders.
- [Culinary App Sidebar](https://agentic-ui-kit.com/components/culinary-app-sidebar.md): Side navigation with collapsible sections.
- [Rare Books App Header](https://agentic-ui-kit.com/components/rare-books-app-header.md): Header with a CTA that changes per route.
- [Vintry App Sidebar](https://agentic-ui-kit.com/components/wine-cellar-app-sidebar.md): Sidebar with navigation and facets with counts.
- [Vintry App Header](https://agentic-ui-kit.com/components/wine-cellar-app-header.md): Header with the route title and contextual search.
- [Rolodeck App Header](https://agentic-ui-kit.com/components/crm-contacts-app-header.md): Top bar with an integrated search box and a grid/list switcher.
- [Rolodeck App Shell](https://agentic-ui-kit.com/components/crm-contacts-app-shell.md): Unified shell for a customer management suite.
- [Rolodeck App Sidebar](https://agentic-ui-kit.com/components/crm-contacts-app-sidebar.md): Vertical navigation bar with a New Contact CTA button.
- [Fintech App Shell](https://agentic-ui-kit.com/components/fintech-app-shell.md): Trading terminal with connection status.
- [Healthcare Clinic App Shell](https://agentic-ui-kit.com/components/healthcare-clinic-app-shell.md): Clinical back-office shell.
- [Hr People App Shell](https://agentic-ui-kit.com/components/hr-people-app-shell.md): HR back office.
- [Legal Practice App Shell](https://agentic-ui-kit.com/components/legal-practice-app-shell.md): Legal practice management.
- [Marketing App Shell](https://agentic-ui-kit.com/components/marketing-app-shell.md): Analytics dashboard shell with a global date range.
- [Saas Starter App Shell](https://agentic-ui-kit.com/components/saas-starter-app-shell.md): Multi-tenant SaaS admin shell with org switcher.
- [Social Media Manager App Shell](https://agentic-ui-kit.com/components/social-media-manager-app-shell.md): Sidebar shell for a publishing tool.
- [Support Desk App Shell](https://agentic-ui-kit.com/components/support-desk-app-shell.md): Helpdesk shell with a notification center.