Components

UI reference pages used during prototyping.

All components

Quick links to each component section (route + anchor).

CNCNAvatarCNAvatarCN
CNCNCNCN
Avatar 1CNAvatar 2GHAvatar 3OPAvatar 1CNAvatar 2GHAvatar 3OP
BadgeSecondaryOutlineGhostDestructive
RoundRound secondaryRound outlineRound ghostRound destructive
Card title
Displays a card with header, content, and footer.

Slot in your own content: forms, lists, images, etc.

Login to your account
Enter your email below to login.
https://
EUR

We’ll only use this for account-related updates.

Example error + loading integration.

Rows use hover + selected state (`data-state="selected"`).
OrganizationRoleStatusAction
Acme Inc.AdminActive
KOMOEditorPending
Land SteiermarkViewerActive

Overview content

Small content

Regular content

Large content

Controlled: unchecked
Controlled: indeterminate

Inline layout

Block layout

Rich checkbox items

Inline

Block

Inline

Block

Single item

Optional header
Title
Description

Group + separators

Item one
Description
Item two
Description
Item three (xs)
Description