Admin Shell React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Admin Shell is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import AdminShell from @/components/blocks/admin-shell.

// app/(admin)/layout.tsx
"use client"

import Link from "next/link"
import { usePathname, useRouter } from "next/navigation"
import type { ReactNode } from "react"
import { AdminShell } from "@/components/blocks/admin-shell"

export default function AdminLayout({ children }: { children: ReactNode }) {
  const pathname = usePathname()
  const router = useRouter()
  return (
    <AdminShell currentPath={pathname} linkComponent={Link} onNavigate={router.push}>
      {children}
    </AdminShell>
  )
}

Props

• children
  ReactNode

  The page, rendered once inside main (never twice for phone and desktop).

• nav
  SidebarNavGroup[]

  The sidebar groups (ADMIN_SHELL_SAMPLE.nav: Home, AI assistant; Sales with Clients 128, Contacts, Deals 12, Orders; Finance with Invoices 3 overdue, Reports; Operations; Settings and Help). Also feeds the command menu's Go to group.

• tabs
  BottomTabBarItem[]

  The phone tab bar, 3 to 5 items (ADMIN_SHELL_SAMPLE.tabs: Home, Clients, Deals, Invoices, More). An item with id "more" and no href opens the drawer. [] hides the bar.

• currentPathdefault "/"
  string

  The active route (next: usePathname()). Selects the nav item, the tab and the default title; nested routes match by prefix.

• titledefault ""
  ReactNode

  The top bar title. Empty uses the active nav item's label, or labels.appName when no item matches.

• breadcrumb
  BreadcrumbEntry[]

  Replaces the title with a breadcrumb (record pages: Clients / Northwind Tech Inc.). Phones show the last entry as the title.

• actions
  ReactNode

  Extra top bar actions before the notifications, such as a New button.

• banner
  ReactNode

  A strip above everything, usually a Banner (trial ending, maintenance). Hidden when printing.

• workspaces
  Workspace[]

  The switcher's list (ADMIN_SHELL_SAMPLE.workspaces: Summit Software Inc., Summit Logistics, Personal). One workspace hides the chevron; none shows the logo instead.

• workspace
  string

  The active workspace id, controlled. Pair it with onWorkspaceChange.

• defaultWorkspacedefault "summit-software"
  string

  The workspace selected at first, uncontrolled.

• onWorkspaceChange
  (id: string, workspace: Workspace) => (void | Promise<unknown>)

  Runs when a workspace is picked. A returned promise keeps the row spinning; once it resolves the switch happens and a toast confirms it, a rejection keeps the old workspace and shows an error toast. Without it a 700 ms request is simulated.

• user
  { name: string; email: string; avatar?: string; plan?: string } | null

  The signed-in person for the sidebar card and the phone avatar menu (ADMIN_SHELL_SAMPLE.user: Anna Price, Administrator). null shows a sign-in button.

• userMenuItems
  MenuEntry[]

  The account menu entries above sign out. Default: Profile, Settings, Billing, Help and a separator, navigating through the router.

• onSignOut
  () => (void | Promise<unknown>)

  The sign-out row; a promise keeps the menu open with a spinner and a rejection shows an error toast. Default: a toast "You signed out".

• signInHrefdefault "/sign-in"
  string

  Where the sign-in button points while there is no user.

• notifications
  NotificationItem[]

  The bell's inbox (ADMIN_SHELL_SAMPLE.notifications: an overdue invoice, a mention, a payment, a won deal, an import and an accepted invite; 3 unread). Read, unread and dismiss are handled by the notification center.

• onNotificationSelect
  (item: NotificationItem) => void

  Opening a notification. Default: it turns read and navigates to its href through the router.

• searchdefault true
  boolean

  The global search in the top bar (an icon that opens a full screen search on phones).

• searchResults
  SearchResultGroup[]

  Static results filtered as you type (ADMIN_SHELL_SAMPLE.searchResults: clients, contacts, deals and invoices, grouped).

• loadSearch
  (query: string, context: { signal: AbortSignal; scope: string }) => Promise<SearchResultGroup[]>

  Server search instead of searchResults: debounced, the previous request aborted.

• searchSuggestions
  SearchResult[]

  Quick links while the search is empty (Overdue invoices, Deals in negotiation, Clients in Chicago).

• searchShortcutdefault "/"
  string

  Focuses the search (opens it on phones). "" binds nothing.

• commandMenudefault true
  boolean

  The command palette: every nav page, the actions (client, invoice, deal, invite), the theme and the sidebar toggle.

• commands
  CommandGroup[]

  The palette's root groups. Default: Go to (built from nav) and Actions (ADMIN_SHELL_SAMPLE.commands). The Appearance group is always added.

• commandShortcutdefault "mod+k"
  string

  Opens the command menu. "" binds nothing.

• sidebarShortcutdefault "mod+b"
  string

  Toggles the sidebar: the rail on desktop (classic design), the drawer on phones. "" binds nothing.

• designdefault "classic"
  "classic" | "rail" | "topbar"

  classic: the sidebar with workspaces and the account card. rail: a fixed 64px icon rail with tooltips and flyouts, the workspace logo on top and the avatar at the bottom. topbar: no sidebar on desktop; the logo, the nav as tabs (what does not fit goes under More), search, notifications and the avatar share the top bar. Phones keep the drawer and the tab bar in every design.

• layoutdefault "page"
  "page" | "fill"

  page: the window scrolls under a sticky top bar. fill: the shell is exactly the viewport, the top bar stays put and main is a flex column for boards and inboxes that scroll inside.

• variantdefault "inset"
  "sidebar" | "inset" | "floating"

  inset: the page is a raised panel beside the sidebar. sidebar: flush columns with a hairline. floating: the sidebar is a raised panel off the edges. Applies to the classic design.

• defaultCollapseddefault false
  boolean

  Starts as the icon rail on desktop. Applies to the classic design.

• collapsibledefault "icon"
  "icon" | "offcanvas" | "none"

  icon: collapses to a 64px rail. offcanvas: slides out completely. none: always expanded. Applies to the classic design.

• persistKeydefault "admin-shell"
  string

  Remembers collapsed and width in cookies (readable by a server layout) and the search and palette recents. "" turns it off; the demo passes "".

• resizabledefault true
  boolean

  Drag the sidebar edge between 200 and 400px; below 120px it snaps to the rail. Applies to the classic design.

• mobileBreakpointdefault "lg"
  "md" | "lg"

  Below it: the drawer, the compact top bar and the tab bar. lg gives an 820px tablet the full width for the page.

• sidebarActiveStyledefault "soft"
  "soft" | "raised" | "bar"

  How the sidebar marks the active page: a soft pill, a raised pill or a bar.

• hideTabBardefault false
  boolean

  Hides the phone tab bar (pages with their own bottom bar, thumbnails).

• logo
  ReactNode

  Shown in the sidebar header when there are no workspaces. Default: a 28px tile with an "S" and Summit CRM.

• localedefault "en-US"
  string

  Intl locale for counts and times in the search and the notifications.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The accent of the active nav item, the active tab and the unread dots.

• linkComponent
  (props: LinkComponentProps) => ReactNode

  The router link every nav link renders through (next/link). Default: the LinkProvider's, else <a>.

• onNavigate
  (href: string) => void

  The router's push for search results, commands and menu items picked without an anchor (next: useRouter().push).

• labels
  Partial<AdminShellLabels>

  Every visible string, English by default (DEFAULT_ADMIN_SHELL_LABELS; ADMIN_SHELL_LABELS_EN is the same set). Nested sets translate the composed items.

• classNames
  Partial<Record<"sidebar" | "topbar" | "main" | "tabs", string>>

  Extra classes for the sidebar, the top bar, main and the tab bar row.

• className
  string

  Extra classes for the root. Other props spread onto it.

Parts

FAQ

More React blocks