Shells

Dashboard Shell

A full-page SaaS application shell with a collapsible sidebar, topbar with search and notifications, and a flexible content slot. Composable nav groups and user info are passed as props.

HomeDashboard

Revenue

$48,295

+12.5%

Users

2,841

+8.1%

Conversion

3.24%

-0.4%

Uptime

99.9%

import { DashboardShell } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add dashboard-shell

Import

import.tsx

import { DashboardShell } from "@aetherstack/blocks"

Usage

dashboard-shell.tsx

import { DashboardShell } from "@aetherstack/blocks"

export default function AppLayout({ children }: { children: React.ReactNode }) {
  return (
    <DashboardShell
      appName="Acme"
      pageTitle="Dashboard"
      userName="Alice Martin"
      userEmail="alice@example.com"
    >
      {children}
    </DashboardShell>
  )
}

Props

Prop	Type	Default	Description
children*	ReactNode	—	Page content rendered in the main content area.
appName	string	"Aether UI"	Product name shown in the sidebar header.
pageTitle	ReactNode	—	Title or breadcrumb shown in the topbar.
navGroups	DashboardNavGroup[]	—	Custom navigation groups. Each group has an optional label and an items array.
userName	string	—	User display name shown in the sidebar footer.
userEmail	string	—	User email or role shown below the name.
userAvatarUrl	string	—	Avatar image URL for the user section.
headerActions	ReactNode	—	Extra actions rendered in the topbar right slot.
className	string	—	Additional classes on the shell wrapper.

* Required

Accessibility

→The sidebar has role="navigation" with aria-label for screen reader landmark navigation.
→The mobile menu toggle button has aria-expanded and aria-controls attributes.
→Keyboard navigation works through the sidebar links with visible focus rings.