App Shell

Tailwind app shell layout with a fixed width sidebar slot, a topbar slot and a scrolling main area. The sidebar hides below the md breakpoint for mobile.

src/registry/ui/app-shell.tsx/r/app-shell.json

Installation#

bash

npx shadcn@latest add @minidev/app-shell

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/app-shell.json

Usage#

tsx

import { AppShell } from "@/components/ui/app-shell"

export function Example() {
  return (
    <AppShell className="max-w-5xl" sidebar={<Sidebar><div className="p-3 text-xs font-medium text-fg-muted">MiniDev</div><SidebarNavItem active>Overview</SidebarNavItem><SidebarNavItem>Projects</SidebarNavItem></Sidebar>} topbar={<Topbar left={<span className="text-sm text-fg">Dashboard</span>} />}>
      <DashboardHome />
    </AppShell>
  )
}

API reference#

AppShell props
Prop	Type	Default
`sidebar`	`React.ReactNode`	`-`
`topbar`	`React.ReactNode`	`-`
`children`	`React.ReactNode`	`-`
`className`	`string`	`-`

Examples#

BlocksFull page compositions ShellsApp chrome

AccordionAccessible React accordion on Base UI, with bordered items, a rotating chevron and animated panels. Keyboard navigable, with one or many items open at once.Aspect RatioShadcn compatible aspect ratio wrapper that locks media to a ratio such as 16:9 or 1:1 using CSS aspect-ratio, with overflow clipped for images and video.CardShadcn compatible card with header, title, description, action, content and footer slots, a compact size and edge to edge images. Built for Tailwind v4.CenterLayout helper that centers content horizontally and vertically in a narrow, text-centered column. Handy for empty states, auth screens and simple heroes.ClusterFlex layout primitive that wraps children in a row with vertical centering and a numeric gap on the 4px scale. Great for tags, buttons and meta rows.CollapsibleShadcn compatible collapsible on Base UI: a full width trigger that shows or hides a panel of content. Accessible expanded state and keyboard support.

All layout components

Learn more

Build a SaaS dashboard in Next.js with free componentsGuide Build a collapsible sidebar layout for a SaaS appGuide What is Skip link?Glossary