Blocks

Dashboard

The single entry point for every page layout. Renders the full scaffold — animated wave background, collapsible sidebar, dark header with search, network select, bento button, and avatar — from a single component with a nav prop.

page.tsx

Import

tsx

import { AppDashboard } from "@/components/blocks/AppDashboard"

API Reference

Prop	Type	Default	Description
nav	AppDashboardNavSection[]	required	Sidebar navigation sections. Each section renders a group with an optional label.
headerActions	ReactNode	Network select + bento + theme toggle + avatar	Right-side header slot. Pass null to render nothing.
headerSearchbar	ReactNode	Search input group	Searchbar slot. Pass null to suppress entirely.
sidebarWidth	string	"14rem"	Overrides the --sidebar-width CSS variable.
headerHeight	string	"3.5rem"	Overrides the --header-height CSS variable.
mainClassName	string	"p-6"	Extra classes on the main content area.
backgroundTheme	"dark" \| "light"	"dark"	Locks the sidebar, header, and background to a fixed mode regardless of the page theme toggle.
children	ReactNode	required	Your page content.

Nav types

tsx

type AppDashboardNavSection = {
  label?: string              // optional group heading
  items: AppDashboardNavItem[]
}

type AppDashboardNavItem = {
  title: string               // label and tooltip text
  icon: React.ElementType     // lucide-react icon component
  isActive?: boolean          // marks the current route
}

Overriding defaults

Custom header actions

tsx

<AppDashboard nav={nav} headerActions={
  <AppAvatar className="size-8">
    <AppAvatarFallback>KA</AppAvatarFallback>
  </AppAvatar>
}>
  <PageContent />
</AppDashboard>

No searchbar

tsx

<AppDashboard nav={nav} headerSearchbar={null}>
  <PageContent />
</AppDashboard>

Full-bleed content

tsx

<AppDashboard nav={nav} mainClassName="p-0">
  <FullBleedContent />
</AppDashboard>

Background theme

The backgroundThemeprop locks the sidebar, header, and background to a fixed mode. The main content area still responds to the page's theme toggle independently. Set it once — it never changes at runtime.

page.tsx