Radix UI test suite

An environment for testing Radix DS.

Section

Section 1

Section 2

Section 3

Container

Forgot password

This is a really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we're using prose here is because the most common use case for this container size is longform text. So we're previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.

This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we're using text here is because one common use case for this container size is a 3-up grid.

This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we're using text here is because one common use case for this container size is a 3-up grid.

This is a much shorter paragraph of text, to demonstrate narrow text container. The reason we're using text here is because one common use case for this container size is a 3-up grid.

No max width

Text

The quick brown fox

The quick brown fox jumped

The quick brown fox jumped

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

The quick brown fox jumped over the lazy dog.

Typography

A set of pre-formatted components for setting text.

This is a title

This is a subtitle, used to support a title or heading. It defaults to h2 but can be rendered as any h level.

This is a large heading

This is a small heading

This is a really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we're using prose here is because the most common use case for this container size is longform text. So we're previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.

Skeleton

Avatar variants

Text variants

Control variants

Badge

Default Badge

Coming soon

Sizes

Coming soonComing soon

Variants

Live
ApprovedPendingFailedNewApprovedPendingFailedNewApprovedPendingFailedFailedWinnerRunner-up

Interactive variant

New

Status

Default Status

Sizes

Variants

Button

Input

ControlGroup

Textarea

Kbd

Kbd test

Resize selected object

Kbd variants

Space
Enter
Tab
Shift + Tab
Esc
IAW
A
⌘ + Tab
Tab
Tab
Space
IAW
W
⌘ + Tab
Tab
Tab
Space

VerifiedBadge

Colm Tuite
@colmtuite

Link

Link variants

Inline link test

There are 5 variants to choose from. Use is for positive states. This is a link Traditional business literature won’t help you solve it- most of that stuff is focused on life after product/market fit, after the Trough of Sorrow. A lot of startup stuff is focused on the initial phases, when you don’t have a team, idea, or investors.

Code

There are 5 variants to choose from. Use console.log('Radix').console is for positive states. Traditional business literature won’t help you solve it- most of that stuff is focused on life after product/market fit, after the Trough of Sorrow. A lot of startup stuff is focused on the initial phases, when you don’t have a team, idea, or investors.

Alert Dialog

Dialog

ProgressBar

Default

Indeterminate state

Indeterminate

UI test

Download 50% complete
46 hours remaining

Gradient variant

Blue variant

Popover

Accordion

Avatar

Default

J

Avatar sizes

J
J
J
J
J
J

Avatar fallback

F
F
F
F
F
F

Avatar colors

F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F

Interactive avatar

Inactive avatar

D
R
A
J
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F
F

Grouped avatars

J
J
J
J
J
J
J
J

Nested avatars

J
J

Avatar with status

J
J
J
J
J
J
J
J
J
J

Avatar with icon

Story avatars

Tabs

Default

Panel 1

Vertical orientation

Panel 1

Slider

Default

Range

Vertical orientaiton

SimpleToggle

Checkbox

Sizes

Radio

Sizes

RadioCard

Switch

Sizes

DropdownMenu

ContextMenu

Right-click me