Full-page template with a collapsible sidebar
A page shell that pairs the App sidebar with a centred content area. The sidebar collapses to an icon rail; the main region reflows automatically. The component pins itself to the dark theme by default, which is why the demos below appear dark; pass theme="inherit" to drop the pin and let the layout follow the surrounding data-theme like any other component.
Expanded sidebar
Collapsed by default
Analytics
The sidebar starts as a 64px icon rail and expands on demand.
// From the npm package
import { AppLayout } from 'rift-ds/components/AppLayout/AppLayout';
// Or as source you own, via the shadcn CLI
npx shadcn@latest add https://rift-ds.com/r/app-layout.json