React layout components for Tailwind CSS
Layout components give a screen its structure. App Shell is the whole admin layout in one component: a collapsible, resizable sidebar, a top bar and the page. Page Header and Entity Header form the top of an admin page or a record, with titles, badges, key facts and actions. Detail Layout arranges a record into a main column of sections and a side panel, Settings Layout follows the macOS and iOS settings pattern with a save bar, and Split View shows a list and its detail side by side. Toolbar sits above a list or table with search, filter chips, sort and a view switch. Card, Accordion, Collapsible, Separator and Scroll Area are the smaller pieces most pages are built from.
All Layout[12]
CardFree
The surface listings, stats, settings and plans sit on: media, header, body and footer parts, four variants and a lift-and-press mode.
App Shell
The whole admin layout in one component: a collapsible, resizable sidebar, a top bar and the page; a drawer and a tab bar on phones.
AccordionFree
A stack of disclosures for FAQs, settings sections and order details, with four variants, icons, descriptions and one or many open.
Collapsible
One section that opens and closes with a spring height animation, plus CollapsibleText, the show more clamp for long descriptions.
Detail Layout
The page grid of a record (a client, a contact, an invoice): header, a main column of sections and a side panel, plus the section card.
Entity Header
The top of a record page (a client, a contact, a deal, an invoice): name, status, key facts, actions, favorite, follow and record pager.
Page Header
The top of an admin page: breadcrumb, title with avatar and badges, description, meta, actions that fold into a menu, and tabs.
Scroll Area
A scroll container with slim custom scrollbars, edge fades that ease out at the ends, snap scrolling and prev / next buttons for rails.
Settings Layout
A settings area like macOS and iOS: a section nav, grouped label and control rows, and a save bar that slides up when something changes.
Split View
A list and its detail side by side on wide screens and a push / pop stack with swipe back on phones, as in CRMs and mail apps.
About Layout
These components change their structure on phones instead of only shrinking. The app shell turns its sidebar into a drawer with a tab bar, the split view becomes a push and pop stack with swipe back, settings become an iOS grouped list, and page header actions move under the title when space runs out. 3 of the 12 layout components are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 9 are part of Pro.