Déjà ViewOpen the dashboard

Components

Every primitive in the template, with its variants and states. Each card names the file it comes from, so you can copy that file and its imports straight into a new project.

Foundations

Every colour is a CSS variable that flips with the theme. Re-skin the whole template by editing the two blocks at the top of globals.css.

Surfaces & lines

app/globals.css
--canvas
--surface
--surface-soft
--surface-sunken
--border
--border-strong

Semantic colours

bg-success / bg-success-soft …
success
warning
danger
info
brand
purple

Chart palette

var(--chart-1) … var(--chart-6)
--chart-1
--chart-2
--chart-3
--chart-4
--chart-5
--chart-6

Type scale

Inter (body) · Graphik (display)

Display — Graphik

Gross volume $482,910

Section heading

Body — Inter

The quick brown fox jumps over the lazy dog — --ink

The quick brown fox jumps over the lazy dog — --ink-soft

The quick brown fox jumps over the lazy dog — --ink-muted

The quick brown fox jumps over the lazy dog — --brand

Tabular numerals: 1,204.50 · 9,887.00 · 3,141.59

Elevation & radius

.card-shadow · .pop-shadow
card-shadow · rounded-lg
card-shadow · rounded-xl
pop-shadow · rounded-2xl

Buttons & badges

One button component with six skins and four sizes; badges carry the same tone vocabulary as everything else.

Variants

components/ui/button.tsx

Variants

Sizes

With icons, loading & disabled

Full width

Badges & pills

components/ui/badge.tsx

Tones

NeutralSuccessWarningDangerInfoBrandPurple

With status dot

SucceededPendingFailedDisputed

Pills & counts

OwnerAdministratorView only799+

Text inputs

Label, hint and error live in one shell, so every field in the app lines up and reports problems the same way.

Text fields

components/ui/input.tsx
Without the protocol — we add https:// for you.
That doesn't look like an email address.
%
$USD
Markdown is not supported here.

Search

components/ui/search-input.tsx

Type to see the clear affordance appear

Debounce it with useDebounce before feeding a query.

Selects

components/ui/select.tsx · custom-select.tsx

Selection controls

Checkboxes, radios and switches are drawn by us rather than the OS, so they match across browsers and both themes.

Checkboxes

components/ui/checkbox.tsx

Radios

components/ui/radio.tsx

RadioGroup

RadioCards

Switches & slider

switch.tsx · slider.tsx
$1,200

Verification code & file upload

otp-input.tsx · file-drop.tsx

OTP — paste fills every box

Entered: —

File drop

Forms

Every form in this app is React Hook Form with a Zod resolver. Submit this one empty to see how errors land, then fix a field and watch it clear on its own.

Validated form — submit it empty

features/gallery/sections/forms.tsx
$USD
Up to 120 characters.

Field states

components/ui/input.tsx
That doesn't look like an email address.

Overlays

Modals, drawers and dropdowns all portal to <body>, lock page scroll and close on Escape or a backdrop click.

Dialogs

modal.tsx · drawer.tsx · confirm-modal.tsx · settings-modal.tsx

Dropdowns & menus

dropdown.tsx · menu.tsx

The panel flips and shifts to stay on screen

Tooltips & keyboard hints

Appears aboveAppears belowAppears to the rightOpen search ⌘K

Toasts

Tables

One DataTable takes column definitions and handles sorting, selection, row actions, responsive column dropping and horizontal scroll.

DataTable — sortable, selectable, clickable rows

components/ui/table.tsx

Click a header to sort, a checkbox to select, a row to open.

$4,041.24SucceededJul 29, 2026, 5:47 AM
$377.62FailedJul 29, 2026, 5:47 AM
$4,404.49FailedJul 27, 2026, 3:47 PM
$4,609.43SucceededJul 27, 2026, 1:47 AM
$2,727.18SucceededJul 26, 2026, 6:47 PM
$3,123.07SucceededJul 25, 2026, 7:47 PM
$223.38SucceededJul 25, 2026, 6:47 AM
$4,186.53UncapturedJul 23, 2026, 11:47 PM

Loading state

<DataTable loading />

Data display

The pieces that carry numbers: stat tiles, meters, timelines and the loading and empty states that stand in for them.

Stat tiles

components/ui/stat-tile.tsx

Gross volume

$482.9K

20.1%vs previous

Failed payments

112

24.3%vs previous

Loading

Net volume

$468.1K

Progress, composition & meters

components/ui/progress.tsx
Storage used82 of 100 GB
Dispute response window3 days left

Composition bar

  • Card68%
  • Wallets17%
  • Bank debit9%
  • Link6%

Meters

18629144

Avatars, ids & payment methods

avatar.tsx · copy-button.tsx · card-brand.tsx

Avatars

+2

Copyable ids — hover to reveal the control

pi_3QhZk8Lm2NpXv7RtBw9Yc

Payment methods

•••• 4242•••• 5100•••• 0005•••• 9021Apple Pay•••• 4421

Description list, footer & timeline

card.tsx · timeline.tsx
Amount
$1,204.50
Fee
$35.23
Net
$1,169.27
Currency
USD

Last edited

Growth plan · 2 hours ago

  1. Payment intent created

    Jul 27, 2026, 7:47 AM

  2. Authorized

    Jul 27, 2026, 7:47 AM

  3. Captured

    Jul 27, 2026, 7:47 AM

    Funds available in 2 days

  4. Dispute opened

    Jul 29, 2026, 7:47 AM

    Reason: product not received

Banners

components/ui/banner.tsx

Next payout scheduled

$12,845.00 arrives in your bank on Friday.
Your account is fully verified.

One document outstanding

Payouts continue as normal for 30 more days.

Webhook endpoint failing

internal.acme.dev returned 500 on 14 attempts.

Loading & empty states

skeleton.tsx · empty-state.tsx

Skeletons

Ghost rows — the shape a list keeps while loading

Table skeleton

Empty panel — reason over ghost rows

Nothing here yet

Payments you take will show up here.

Empty state

No invoices match

Try a different search, or clear the status filter.

Error state

Something went wrong

The request didn't come back. It may just be the connection.

Charts

Recharts wrappers that read their colours from the theme variables, so every chart follows light and dark without a prop.

Metric cards — the headline shape

components/ui/metric-card.tsx + charts/trend-chart.tsx

Revenue

$97.5K

Jun 30Jul 29

New customers

842

Last 30 days
Jun 30Jul 29
`footer` takes a hairline-separated note or action.

Trend variants

<TrendChart variant='…' />

area

line

bar

step

Area chart with comparison series

components/charts/area-chart.tsx

Line chart — multiple series

components/charts/line-chart.tsx

Bar chart — columns

<BarChart layout='vertical' />

Bar chart — rows

<BarChart layout='horizontal' />

Donut chart

components/charts/donut-chart.tsx

68%

Card

  • Card68%
  • Wallets17%
  • Bank debit9%
  • Link6%

Sparklines

components/charts/sparkline.tsx

Filled

Line only

Alternate colour