Admin Shell

Dashboard1: Admin Shell

A full admin dashboard shell that gives you the entire app layout in one component: a collapsible icon sidebar, a topbar with a ⌘K command palette and account menu, a greeting header, a three-up KPI row with trend badges, and a recent-orders data table. It composes the Beste UI sidebar-nav, user-menu, notifications-menu, and data-table components on top of shadcn/ui primitives (button, badge, sheet, command, dialog), so it works as a ready-made admin dashboard template and the frame the rest of the dashboard blocks drop into. Use it as the starting point for a Next.js / React admin panel or any shadcn/ui dashboard.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard1?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard1?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard1.tsx, the Beste components it composes to components/beste/component/ (sidebar-nav, user-menu, notifications-menu, and data-table), and the shadcn/ui dependencies they need (button, badge, sheet, command, dialog).

Quick start

The installed file exports dashboard1Demo alongside the block: the exact props behind the preview above. Because it renders a full-height (h-screen) layout, give it a dedicated route or page rather than nesting it inside another scrolling container.

import { Dashboard1, dashboard1Demo } from "@/components/beste/block/dashboard1";

export default function Page() {
  return <Dashboard1 {...dashboard1Demo} />;
}

Props

Every prop is optional. Omit any of them and the block falls back to its built-in demo data, so <Dashboard1 /> renders a complete, populated dashboard out of the box. Pass just the props you want to override.

The block-local data types:

type Kpi = {
  label: string;
  value: string; // pre-formatted, e.g. "$48,290"
  delta: string; // pre-formatted, e.g. "12.4%"
  up: boolean;   // true → green up badge, false → red down badge
};

type Order = {
  id: string;
  customer: string;
  method: string;
  status: "Paid" | "Pending" | "Refunded";
  amount: number; // rendered with a "$" prefix and thousands separators
  date: string;
};

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with a plain <img>
};

type CommandPaletteGroup = {
  heading: string;
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    shortcut?: string; // trailing hint, e.g. "⌘N"
  }[];
};

The remaining props reuse the interfaces exported by the composed Beste components:

// from sidebar-nav
type SidebarNavGroup = {
  label?: string; // muted uppercase group heading (hidden when collapsed)
  items: {
    id: string;
    label: string;
    icon?: LucideIcon;
    badge?: string | number; // small trailing count
    href?: string;           // renders an <a> instead of a <button>
  }[];
};

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  shortcut?: string;
  destructive?: boolean; // red row with a separator above it
};

// from notifications-menu
type NotificationItem = {
  id: string;
  title: string;
  description?: string;
  time: string;
  icon?: LucideIcon;
  unread?: boolean;
};

Components

This block wires together four Beste UI components. Each is installable and previewable on its own:

• sidebar-nav — grouped, collapsible icon sidebar with brand header, active state, and per-item badges.
• user-menu — account dropdown with avatar, name/email, and menu items (has a compact avatar-only mode for dense topbars).
• notifications-menu — bell trigger with an unread count and a popover list of notifications.
• data-table — sortable, paginated table driven by a columns definition, with optional row actions.

Behavior notes

• The ⌘K / Ctrl-K keyboard shortcut toggles the command palette from anywhere on the page (a global keydown listener). The topbar search button and its ⌘K kbd hint open the same palette. It renders as a Dialog wrapping the shadcn Command primitive, with commandGroups shown as separated, headed sections; selecting any item closes the palette.
• The sidebar is collapsible on desktop: the left PanelLeft button in the topbar toggles collapsed, switching the sidebar between full and icon-rail width.
• On mobile (below md), the desktop sidebar is hidden and the topbar button opens the sidebar inside a Sheet drawer instead; selecting a nav item closes the drawer.
• The sidebar starts with dashboard as the active item (defaultActiveId="dashboard") and tracks active state internally as you click nav items.
• The account menu renders twice for responsiveness: a compact avatar-only UserMenu below md, and the full name/email version at md and up.
• KPI cards show a green up badge with a TrendingUp icon when up is true, and a red down badge with TrendingDown when false.
• The recent-orders table paginates at 5 rows per page, sorts on the customer, status, amount, and date columns, colors the status cell by value (Paid / Pending / Refunded), and exposes "View" and "Refund" row actions.

Requirements

• Next.js App Router. The block renders as a client component ("use client") because of the sidebar, palette, and drawer state, so it composes into any App Router page or route.
• It is a full-height layout (h-screen), so mount it as the page/route content rather than inside another scrolling wrapper.
• The user avatar renders with a plain <img>, so no next.config images.remotePatterns setup is needed for remote hosts.