# Layout components

> 12 Layout components for React, shadcn, Vue 3, Laravel Blade and HTML + Alpine.js: Accordion, AppShell, AspectRatio, Card, Collapsible, DashboardBoard, Detail Layout, DocsShell, PageHeader, ResizablePanelGroup, ScrollArea, Separator.

Source: https://docs.nasaqui.com/components/groups/layout

- [Accordion](https://docs.nasaqui.com/components/accordion): Stack of collapsible sections, one open at a time or several, with a rotating chevron and animated height. Wraps Base UI Accordion.
- [AppShell](https://docs.nasaqui.com/components/app-shell): The product frame every Nasaq app uses - resizable, collapsible sidebar at the inline start, sticky header, main area, mobile sheet, and the command registry.
- [AspectRatio](https://docs.nasaqui.com/components/aspect-ratio): A box that keeps a fixed width-to-height ratio as it resizes, for video embeds, maps, cover images and thumbnails; direct img, video and iframe children fill it.
- [Card](https://docs.nasaqui.com/components/card): Bordered surface that groups one unit the user acts on or compares, with header, action, content and footer slots.
- [Collapsible](https://docs.nasaqui.com/components/collapsible): Show/hide disclosure with an animated height-and-opacity panel. Wraps Base UI Collapsible.
- [DashboardBoard](https://docs.nasaqui.com/components/dashboard-board): A customisable dashboard grid where people drag to reorder cards, resize them, pin favourites, add or remove widgets and change each widget's settings, with an edit mode that saves or cancels as one change.
- [Detail Layout](https://docs.nasaqui.com/components/detail-layout): A detail page for one thing (a plugin, a customer, a server). A sub-sidebar of tabs grouped in sections that becomes a tab bar on small screens, a header with icon, name, version, kind, status and recent activity, the active tab's content, and loading and error states.
- [DocsShell](https://docs.nasaqui.com/components/docs-shell): The documentation layout with a tree sidebar, breadcrumb, copy page, callouts, an on this page rail that follows the reader and previous and next links.
- [PageHeader](https://docs.nasaqui.com/components/page-header): The top of a page: breadcrumbs or a back link, the page title, a line of description, meta facts and the page's actions at the inline end.
- [ResizablePanelGroup](https://docs.nasaqui.com/components/resizable): Split panes with drag handles and keyboard resize, built on react-resizable-panels, with RTL handled for horizontal groups.
- [ScrollArea](https://docs.nasaqui.com/components/scroll-area): A bounded scroll container with a thin scrollbar on the inline-end edge, keyboard-scrollable and RTL-aware.
- [Separator](https://docs.nasaqui.com/components/separator): A 1px horizontal or vertical divider line in the border token. Wraps Base UI Separator.