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.
- AccordionStack of collapsible sections, one open at a time or several, with a rotating chevron and animated height. Wraps Base UI Accordion.
- AppShellThe product frame every Nasaq app uses - resizable, collapsible sidebar at the inline start, sticky header, main area, mobile sheet, and the command registry.
- AspectRatioA 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.
- CardBordered surface that groups one unit the user acts on or compares, with header, action, content and footer slots.
- CollapsibleShow/hide disclosure with an animated height-and-opacity panel. Wraps Base UI Collapsible.
- DashboardBoardA 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 LayoutA 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.
- DocsShellThe documentation layout with a tree sidebar, breadcrumb, copy page, callouts, an on this page rail that follows the reader and previous and next links.
- PageHeaderThe 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.
- ResizablePanelGroupSplit panes with drag handles and keyboard resize, built on react-resizable-panels, with RTL handled for horizontal groups.
- ScrollAreaA bounded scroll container with a thin scrollbar on the inline-end edge, keyboard-scrollable and RTL-aware.
- SeparatorA 1px horizontal or vertical divider line in the border token. Wraps Base UI Separator.
KeyboardShortcuts
A searchable reference of an app's keyboard shortcuts, grouped, drawn for the reader's keyboard (Command on a Mac, Ctrl elsewhere) with a Mac/Windows switch, plus a dialog that opens with the question mark key.
Accordion
Stack of collapsible sections, one open at a time or several, with a rotating chevron and animated height. Wraps Base UI Accordion.