Dashboard start page with today's counts, an AI search bar, quick actions and revenue and target cards.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/dashboard-home
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1"use client";23import { ChartPie, FileText } from "lucide-react";4import { useRouter } from "next/navigation";5import { DashboardHome } from "@/components/blocks/dashboard-home";67export function Home() {8const router = useRouter();910return (11<DashboardHome12eyebrow="Tuesday, October 14"13title="Good morning, Ana"14counts={[15{ count: 12, label: "new emails", tone: "blue", href: "/inbox" },16{ count: 4, label: "open invoices", tone: "amber", href: "/invoices" },17]}18onSearch={(q) => router.push(`/search?q=${encodeURIComponent(q)}`)}19onAskAI={(q) => router.push(`/assistant?q=${encodeURIComponent(q)}`)}20actions={[21{ label: "Show expenses", icon: ChartPie, tone: "pink", onClick: () => router.push("/expenses") },22{ label: "Unpaid invoices", icon: FileText, tone: "amber", onClick: () => router.push("/invoices?status=unpaid") },23]}24currency="USD"25locale="en-US"26revenue={[27{ label: "Aug", value: 18_200 },28{ label: "Sep", value: 19_450 },29{ label: "Oct", value: 21_030 },30]}31targetValue={62}32targetTotal={80}33/>34);35}
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Tuesday, September 30" | Small line with a live dot above the heading, e.g. today's date |
| title | string | "What will you get done today?" | Heading |
| counts | SummaryCount[] | emails, invoices, tasks | Colored pills in the line under the heading: count, label, tone and an optional href |
| searchPlaceholder | string | "Search for views and files..." | Placeholder of the search bar |
| onSearch | (query: string) => void | – | Enter was pressed in the search bar |
| onAskAI | (query: string) => void | – | Tab was pressed in the search bar, or Ask AI was clicked |
| actions | QuickAction[] | 4 sample actions | Chips under the search bar: label, icon, tone and onClick |
| currency | string | "USD" | ISO currency code for the revenue card |
| locale | string | "en-US" | Locale for numbers and money |
| revenue | RevenueBar[] | Jun to Sep | Monthly revenue, oldest first; the last bar is the current month and sets the headline and the change badge |
| onRevenueClick | () => void | – | The arrow on the revenue card was clicked |
| targetValue | number | 2760 | Targets reached so far |
| targetTotal | number | 3600 | Total targets; the ring shows targetValue / targetTotal |
| onTargetsClick | () => void | – | The arrow on the targets card was clicked |
| className | string | – | Extra classes on the outer element |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.