Components

neutral

Every component, all variants and states — themed by the selected brand. Each lists the props that matter and which token paints each part.

Button

ActionsTier 1
@radix-ui/themes · Button

Primary interactive control for actions.

PROPS

variant
size

COLOUR BREAKDOWN

Solid background--accent-9
Solid text--accent-contrast
Soft background--accent-a3
Soft text--accent-a11

Badge

Data displayTier 1
@radix-ui/themes · Badge

Small status or category label.

Badge

PROPS

variant
color

COLOUR BREAKDOWN

Soft background--accent-a3
Soft text--accent-a11

Card

SurfacesTier 1
@radix-ui/themes · Card

Container surface for grouped content.

Card title

A surface for grouped content.

PROPS

size
variant

COLOUR BREAKDOWN

Background--color-panel-solid
Border--gray-6
Text--gray-12

Text field

FormsTier 1
@radix-ui/themes · TextField

Single-line text input.

PROPS

size
variant

COLOUR BREAKDOWN

Background--color-surface
Border--gray-7
Text--gray-12

Checkbox

FormsTier 1
@radix-ui/themes · Checkbox

Binary selection control.

PROPS

size
variant

COLOUR BREAKDOWN

Checked background--accent-9
Indicator--accent-contrast

Switch

FormsTier 1
@radix-ui/themes · Switch

On/off toggle.

PROPS

size
variant

COLOUR BREAKDOWN

Track (on)--accent-indicator
Thumb--gray-1

Select

FormsTier 1
@radix-ui/themes · Select

Dropdown selection control.

PROPS

size
variant

COLOUR BREAKDOWN

Trigger background--color-surface
Trigger border--gray-7

Callout

FeedbackTier 1
@radix-ui/themes · Callout

Highlighted message or notice.

Tap your card to claim it in the app.

PROPS

variant
color

COLOUR BREAKDOWN

Background--accent-a3
Text--accent-11

Text

TypographyTier 1
@radix-ui/themes · Text

Text follows the Radix step logic: light/dark pick the fixed white/black alpha ramp, high/low contrast pick step 12 vs 11. Colour profiles set these per surface.

The quick brown fox

dark tone · high contrast

PROPS

tone
contrast

COLOUR BREAKDOWN

Dark · high--black-a12
Dark · low--black-a11
Light · high--white-a12
Light · low--white-a11