Components

SiteNav — the site header (open Product)

Sign inRequest early accessOpen menu

Button — variants

DefaultSecondaryOutlineGhostLinkDestructiveDisabled

Button — sizes

xssmdefaultlg

Badge

DefaultSecondaryOutlineDestructiveGhostLink

Form controls

Email

Checkbox

Checked

Switch

Switch on

Feedback

Draft held at the gate

Nothing touches live spend until approved.

Sync failed

Meta returned 403 — reconnect the ad account.

Budget pacing62%

x

Card + Tabs

Budget change

Meta · Prospecting · +20%

BeforeAfter

$500 / day

CardEmptyAlertTableItemAccordionCollapsibleHoverCardAspectRatio

Under neutral a card has a 12px radius, an inset hairline and no shadow; an empty state has no box and no drawing; every notice is the dashed banner, and a destructive one is red in its icon alone; a static list has a 40px header and rows of about 41 with no hover; and a row is at least 36 tall. Under every other theme each part draws as it did before.

Spend this month

Meta, Google and TikTok

$12,840.50

1.91 : 1

Two ad accounts have not synced today

Meta returned an error for both.

Retry

Name	Email	Role	Joined
Ana Ruiz	ana@example.com	Owner	2 Mar 2026
Tom Okafor	tom@example.com	Admin	19 May 2026
Mei Lin	mei@example.com	Member	14 Sept 2026

No drafts to review

Drafted changes wait here until they are approved or rejected.

New draft

Icons

The glyph set and the coloured tiles

What goes in a banner?

What goes in an empty state?

Row heights

The radius rule and the shadow set are on the layout page.

ToasterDialogAlertDialogSheetContextMenu

Under neutral a toast is 300 by 40 at radius 8 with a 20px outline tile, top right and 16 in, dropping 24px into place; a form dialog is the 808 frame at 14% of the viewport's height from the top (126 at 900 tall), with a 44px header, a body padded 16 16 24 and a 44px frosted footer, and a settings dialog (Create object) darkens the page behind it by a quarter, without a blur; an alert dialog is the same frame, narrower; the side panel opens from the right with no scrim, on the float shadow, with a 48px header; and a context menu is a menu, radius 12 with 32px rows. Right-click the company row for its menu. Under every other theme each part draws as it did before.

Show defaultShow successShow infoShow warningShow errorShow loading

Create companyCreate objectDelete companyOpen comments

Tarnwick Logistics

FieldLabelNativeSelectRadioGroupSwitchToggleToggleGroupProgressCalendarAvatarPaginationBreadcrumbChartResizableScrollAreaSeparator

Under neutral a label is 12px in the placeholder ink, 4 above its 32px field, and fields sit 20 apart; the toggle is 24 by 16; the segmented control is 24px segments on the active fill, the chosen one raised on the page; a stage bar is 4px segments 2 apart; a crumb is 24 tall with a slash between; a chart's grid is a dashed hairline. Under every other theme each part draws as it did before.

Name

Domain (optional)

Without the https://

Stage

LeadIn progressWonLost

Monthly budget

Enter a budget above zero.

Kind

Flight

Milestone

Create more

In progress

x

Budget spent62%

x

aaaaAna Ruiz

October 2026

Su	Mo	Tu	We	Th	Fr	Sa
27	28	29	30	1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30	31

• Ana Ruiz changed the stage to In progress
• Tom Okafor added a note
• Mei Lin set the close date
• Ana Ruiz linked Tarnwick Logistics
• Tom Okafor logged a call
• Mei Lin changed the owner
• Ana Ruiz created the deal

Details

Activity

All primitives are shadcn’s Base UI builds (style: base-vega), installed into packages/ui/components/ui. Import as @tempio/ui/components/ui/<name>.

The gallery opens on neutral, the look the app and the console wear. Each primitive takes that look from feel tokens and neutral: classes, so under tempio, the site’s look, it draws what it drew before. Pick tempio above to compare.