UI Skillbook
2

Dashboard Shell

A responsive app frame that combines the sidebar, a sticky top bar and a scrolling content area.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-dashboard-shell and follow the Siteplane Dashboard Shell skill it prints for this task.

Paste this into your agent.

Dashboard Shell is the outer layout for an authenticated app or admin tool. It sets up the sidebar, header and main region so only the content scrolls, in an inset or a push layout. Your app keeps routing, auth and data.

Install

bashnpx shadcn@4.18.0 add @siteplane/dashboard-shell

Import it from @/siteplane/components/dashboard-shell. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Sidebar: Compose Sidebar yourself for a nonstandard layout the shell's parts do not cover.
  • vs Frame: Use Frame inside the shell's main area to group panels. Frame is a surface; the shell is the page layout.

Rules

  • Use one DashboardShell per page. Put the page content in DashboardShellMain, the part that scrolls.
  • Place DashboardShellHeader as a direct child of DashboardShellInset so the sticky header works.
  • Set stickyHeader={false} when the whole page should scroll and the header should scroll away.
  • Set flush on DashboardShellMain for views that lay out their own panes edge to edge, such as list and detail.
  • Pass open and onOpenChange on DashboardShell to control the sidebar; it forwards them to SidebarProvider.

Reference

  • Dashboard Shell docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Navigation. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-dashboard-shell

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Siteplane Sidebarby UI Skillbook

Application navigation in a side column that collapses to an icon rail on desktop and becomes a sheet on mobile.

Siteplane UI

React Native Best Practicesby callstackincubator

React Native performance optimization guidelines for FPS, TTI, bundle size, memory leaks, re-renders, and animations.

ResponsiveExternalGitHub stars: 1.7K

Responsive Breakpoint Strategyby UI Skillbook

Choose breakpoints based on where your content actually breaks, not a fixed device-width list.

Responsive

Siteplane Filter Barby UI Skillbook

A layout strip above a list or table for view tabs, search, filter menus, actions and applied-filter tags.

Siteplane UI

Back to Siteplane UI