Dashboard hero

Welcome card for a dashboard surface. Auto-formats today's date in the viewer's timezone, greets the user by name, and surfaces actions plus a stats row.

Good evening, Sarah.

Three concepts are ready for your review on Summer at the Movies. Your Squad has been busy.

5Active
1Queued
1Delivered this month
2Awaiting your approval

Installation

$Terminal

npx shadcn@latest add https://sdk-components.thesqd.com/r/dashboard-hero.json

Usage

Drop the hero at the top of a dashboard route. The date eyebrow auto-calculates in the viewer's timezone.

TSImport

import { DashboardHero } from "@/components/blocks/dashboard-hero";

TSExample

import { ArrowRight, Plus } from "@phosphor-icons/react/ssr";
import { DashboardHero } from "@/components/blocks/dashboard-hero";

export function DashboardPage() {
  return (
    <DashboardHero
      name="Sarah"
      subheader="Three concepts are ready for your review on Summer at the Movies."
      actions={[
        { label: "Review concepts", icon: <ArrowRight />, onClick: () => {} },
        { label: "New request", icon: <Plus />, variant: "ghost", onClick: () => {} },
      ]}
      stats={[
        { value: "5", label: "Active" },
        { value: "1", label: "Queued" },
        { value: "1", label: "Delivered this month" },
        { value: "2", label: "Awaiting your approval" },
      ]}
    />
  );
}

Composition

One hero component with prop-driven action and stat rows.

DashboardHero            — purple hero card (auto date + greeting)
├── eyebrow              — auto-calculated date in viewer's timezone
├── headline             — "{greeting}, {name}." with name in coral italic
├── subheader            — supporting paragraph (ReactNode)
├── actions[]            — { label, icon?, onClick?, variant?: "primary" | "ghost" }
└── stats[]              — { value, label } rendered as an uppercase chip row

Preview

Full hero with auto-calculated date, name, subheader, two actions, and a stats row.

Good evening, Sarah.

Three concepts are ready for your review on Summer at the Movies. Your Squad has been busy.

5Active
1Queued
1Delivered this month
2Awaiting your approval

No stats

Headline + subheader + single CTA, no stats row.

Good evening, Sarah.

Three concepts are ready for your review on Summer at the Movies.

Stats only

Drop the subheader and actions — just the greeting and the metrics strip.

Good evening, Sarah.

5Active
1Queued
1Delivered this month
2Awaiting your approval

API Reference

Props for the hero plus the shape of action and stat entries.

DashboardHero

Prop	Type	Default	Description
`name`	string	—	First name. Rendered in coral italic in the greeting.
`greeting`	string	auto	Overrides the "Good morning / afternoon / evening" prefix derived from local hour.
`subheader`	React.ReactNode	—	Paragraph below the headline.
`actions`	DashboardHeroAction[]	—	Action buttons rendered as a row of pills.
`stats`	DashboardHeroStat[]	—	Uppercase stat chips rendered at the bottom.
`date`	string	auto	Overrides the auto-formatted date eyebrow.
`locale`	string	browser	BCP-47 locale used to format the auto date.
`className`	string	—	Extra classes merged onto the outer section.

DashboardHeroAction

Prop	Type	Default	Description
`label`	string	—	Button label. Rendered uppercase + tracked.
`icon`	React.ReactNode	—	Optional lucide icon. Auto-tagged with data-icon for spacing.
`onClick`	() => void	—	Click handler.
`variant`	"primary" \| "ghost"	"primary"	Coral filled pill or transparent white-bordered pill.
`iconPosition`	"start" \| "end"	primary: "end", ghost: "start"	Where to render the icon relative to the label.

DashboardHeroStat

Prop	Type	Default	Description
`value`	React.ReactNode	—	Bold white value (e.g. a number).
`label`	string	—	Uppercase muted label after the value.