App layout

Name: Rift DS
Author: Robert Ritacca

Full-page template with a collapsible sidebar

A page shell that pairs the App sidebar with a content area. The sidebar collapses to an icon rail; the main region reflows automatically. The layout prop picks one of the three app shell modes the templates and the chat share: flush (the default), the rail on the shell colour behind a hairline with the content crisp beside it; floating, the rail as a glass card; or inset, the content full width in a raised surface of its own. 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

Dashboard

Content is centred in the main area. Collapse the sidebar with the toggle to see the layout reflow.

Collapsed by default

Analytics

The sidebar starts as a 64px icon rail and expands on demand.

Floating layout

Dashboard

The rail floats off the edges as a glass card, and the content stays centred beside it.

Inset layout

Dashboard

The rail sits flush on the shell colour, and the content runs full width in a raised surface that scrolls on its own.

// 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