Three dashboard welcome cards — today at a glance, onboarding checklist and what’s new — with staggered count-ups, one-at-a-time steps and a swipeable release carousel.
welcomedashboardonboardingchecklistgreetingchangelogannouncementupgrade
Today
today.tsxTime-aware greeting, today’s numbers counting up in a stagger and an up-next strip you can step through.
$npx shadcn@latest add @geturui/welcome-cards-today
| Prop | Type | Default | Description |
|---|---|---|---|
name | string | "Maya" | First name in the greeting. |
hour | number | 9 | Local hour used to pick the greeting. |
dateLabel | string | — | Formatted date line. |
stats | { label, value, hint? }[] | — | Today’s numbers. |
events | { title, time, relative, people }[] | — | Upcoming events. |
onJoin | (event) => void | — | Join button handler. |
className | string | — | Extra classes on the card. |
Onboarding checklist
onboarding.tsxOne step open at a time; completing a step ticks, fills its segment and advances, then the card celebrates.
$npx shadcn@latest add @geturui/welcome-cards-onboarding
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | "Get set up" | Card heading. |
steps | OnboardingStep[] | — | { id, title, description, action, done? }. |
onStep | (id: string) => void | — | Called when a step’s action is pressed. |
onDismiss | () => void | — | Hide checklist handler. |
className | string | — | Extra classes on the card. |
What’s new
whats-new.tsxSwipeable release carousel with drawn art; a Pro feature turns the button into an ember upgrade.
$npx shadcn@latest add @geturui/welcome-cards-whats-new
| Prop | Type | Default | Description |
|---|---|---|---|
version | string | — | Release caption. |
slides | WhatsNewSlide[] | — | { title, body, art?: "branches" | "search" | "audit", pro? }. |
onTry / onUpgrade / onDismiss | handlers | — | Button handlers. |
className | string | — | Extra classes on the card. |
Install the whole set
Installs every welcome cards variant at once. Each section above has its own command for a single variant.
$npx shadcn@latest add @geturui/welcome-cards
Accessibility
- The greeting hour and date are props, so server and client render the same text.
- Checklist steps are disclosure buttons with aria-expanded; completed steps announce “done”.
- The release carousel responds to arrow keys and buttons as well as swipe, and reduced motion turns slides into fades.