DUAppShell
LayoutDashboard frame with header, sidebar, and main content.
import { DUAppShell, DUNavbar, DUSidebarMenu } from 'deri-ui';Live preview
App shell slot
Compose with DUNavbar + DUSidebarMenu on /components/deri-saas.
typescript
<DUAppShell header={<DUNavbar brand="App" />} sidebar={<DUSidebarMenu items={[]} />}>Page</DUAppShell>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| header / sidebar / footer | ReactNode | — | Chrome slots |
| sidebarWidth | string | 'w-64' | Tailwind width |
Usage
import { DUAppShell, DUNavbar, DUSidebarMenu } from 'deri-ui';
<DUAppShell header={<DUNavbar brand="App" />} sidebar={<DUSidebarMenu items={[]} />}>Page</DUAppShell>Customize with className, radius, and Tailwind utilities. Theme tokens come from deri-ui/tailwind.preset.
Related
© 2026 Deri Ui. Developed by Deribew Shimelis. Copy and use the code freely in your projects.