Layout

Dashboard shell

Compose sidebar, header, breadcrumbs, settings, auth split, and content layouts.

The layout shell exports build on ui Shell and Sidebar primitives. Use them when a route needs persistent app chrome; keep business logic and data fetching in the host app.

Composition model

DashboardShell
├── SidebarProvider (from ui)
│   ├── DashboardHeader → Breadcrumbs + actions (theme, etc.)
│   ├── Sidebar → brand, DashboardSidebarNav, DashboardAccountMenu
│   └── Shell.Main → your page (tables, forms, settings)
TopNavShell → header + optional horizontal nav (no sidebar)
AuthSplitShell → auth column + marketing aside
SettingsLayout → secondary nav inside main

Installation

Registry CLI

Requires a one-time components.json registry entry for @feature-kit/dashboard-shell.

pnpm dlx shadcn@latest add https://feature-kits.vercel.app/r/dashboard-shell.json

Namespaced: npx shadcn@latest add @feature-kit/dashboard-shell

Manual installation

Monorepo consumers can depend on workspace:* packages instead of the registry CLI.

pnpm add layout theme ui

Dependencies

// apps/your-app/package.json
"dependencies": {
    "layout": "workspace:*"
    "theme": "workspace:*"
    "ui": "workspace:*"
}

Transpile (Next.js)

// next.config.ts
transpilePackages: ["layout", "theme", "ui"]

Import

import {
DashboardShell,
DashboardSidebarNav,
DashboardAccountMenu,
ContentPageHeader,
} from "@/lib/feature-kit/shell"

Install @feature-kit/layout and @feature-kit/breadcrumb when not using the dashboard-shell bundle alone.

Scenarios

Each scenario has a live preview under Layout examples.

Basic dashboard

Overview

Sidebar, in-flow header, and route-derived breadcrumbs.

Replace this card with your feature screen. The shell owns chrome; your route owns data.
Live preview with sample data in the docs. Open basic shell example

Icon-only sidebar

Pass defaultSidebarOpen={false} so the rail starts collapsed. Users expand via the trigger or ⌘/Ctrl+B.

Icon rail

Start collapsed (`defaultSidebarOpen={false}`) and expand with the trigger or ⌘/Ctrl+B.

Nested nav groups

Use DashboardSidebarNav groups with SidebarFlatNavGroup for collapsible sections. Active items follow the current pathname.

Nested navigation

`DashboardSidebarNav` marks items active from the current pathname (including nested segments).

Active route highlighting follows `usePathname()`.

Mobile sheet navigation

The ui sidebar renders a sheet on small viewports. No extra wiring — use DashboardHeader with SidebarTrigger.

Mobile sheet nav

Below `md`, the sidebar moves into a sheet. Use the header trigger to open navigation.

Account menu (signed-in user)

Pass user from useSession() into DashboardAccountMenu. Add SignOutDropdownMenuItem from auth.

Account menu

Footer account menu reads the better-auth session when signed in.

Try sign in then reload this preview.

Top nav only

Top navigation

`showSidebar={false}` renders `TopNavShell` with optional `topNavigation` under the header.

Auth split layout

Sign in
Compose with `auth` forms.

New here? Create an account

Forgot your password? Reset password

Settings with secondary nav

Profile

Visible on profile.

Content layouts (grid, flex, form section)

Content layouts

Grid

Tile 1
Tile 2
Tile 3

Flex row

Primary
Aside

Form section

Use `FormSection` for settings-style field groups.

Skeleton / loading

Swap DashboardSidebarNav for DashboardSidebarNavSkeleton while nav config loads.

Data table + theme in header

Accounts

Mount `DataTable` inside the shell body; keep queries in the host route.

API reference

DashboardShell

DashboardShell
PropTypeDescription
childrenReactNodeMain column content.
sidebarHeaderReactNodeBrand row inside SidebarHeader.
sidebarContentReactNodeTypically DashboardSidebarNav.
sidebarFooterReactNodeAccount menu or sign-in CTA.
headerActionsReactNodeRight side of header (ThemeSelector, etc.).
defaultSidebarOpenbooleanInitial expanded state.
showSidebarbooleanWhen false, renders TopNavShell.
sidebarCollapsible"offcanvas" | "icon" | "none"Passed to ui Sidebar.
showBreadcrumbsbooleanRoute breadcrumbs in header.
topNavigationReactNodeHorizontal links under header when sidebar hidden.

DashboardHeader

DashboardHeader
PropTypeDescription
actionsReactNodeTrailing actions.
showBreadcrumbsboolean
showSidebarTriggerbooleanHide for TopNavShell.

DashboardSidebarNav

DashboardSidebarNav
PropTypeDescription
groupsDashboardNavGroup[]Collapsible labeled sections.
linksDashboardNavLink[]Flat list alternative to groups.

DashboardAccountMenu

DashboardAccountMenu
PropTypeDescription
user{ name, email, image? }Displayed identity.
menuItemsReactNodeExtra dropdown items.
signOutItemReactNodee.g. SignOutDropdownMenuItem.

TopNavShell, SettingsLayout, AuthSplitShell, ContentPageHeader

ComponentRole
TopNavShellHeader + main without sidebar
SettingsLayoutTitle + vertical section nav + panel
AuthSplitShellTwo-column auth/marketing
ContentPageHeaderPage title, description, actions row
DashboardSidebarNavSkeletonSidebar placeholder groups

Changelog

Latest updates and announcements for Feature Kits docs and packages.

Data table

TanStack Table with toolbar, filters, selection, and optional URL sync.

On this page

Composition modelInstallationScenariosBasic dashboardIcon-only sidebarNested nav groupsMobile sheet navigationAccount menu (signed-in user)Top nav onlyAuth split layoutSettings with secondary navContent layouts (grid, flex, form section)Skeleton / loadingData table + theme in headerAPI referenceDashboardShellDashboardHeaderDashboardSidebarNavDashboardAccountMenuTopNavShell, SettingsLayout, AuthSplitShell, ContentPageHeaderRelated