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

Flex

Grid

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

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

This is a heading size 4

This is a heading size 3

This is a heading size 2

This is a heading size 1

This is a Paragraph size 2. Design in the target medium. Prototype with real components. Handoff production code.

This is a Paragraph size 1. 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 Sup and Sub demo. The kind you might read in a blog post.1 This is a really long paragraph of text, to demonstrate prose text.1

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

Alert

Alert headingA modal dialog that interrupts the user with important content and expects a response.
Alert headingA modal dialog that interrupts the user with important content and expects a response.
Alert headingA modal dialog that interrupts the user with important content and expects a response.
Alert headingA modal dialog that interrupts the user with important content and expects a response.
Alert headingA modal dialog that interrupts the user with important content and expects a response.

Button

TextField

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

Sheet

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

Table

This is the table caption.
ClubMPWDLGFGAGDPtsLast 5
Man City3232323232323232
Man United3232323232323232
Leicester City3232323232323232
Chelsea3232323232323232
West Ham3232323232323232
Leicester City3232323232323232
This is the table caption.
ClubMPWDLGFGAGDPtsLast 5
1
Man City
3232323232323232
2
Man United
3232323232323232
3
Leicester City
3232323232323232
4
Chelsea
3232323232323232
5
West Ham
3232323232323232
6
Leicester City
3232323232323232
Striped table caption.
ClubMPWDLGFGAGDPtsLast 5
Man City3232323232323232
Man United3232323232323232
Leicester City3232323232323232
Chelsea3232323232323232
West Ham3232323232323232
Leicester City3232323232323232

RadioCard

Switch

Sizes

DropdownMenu

ContextMenu

Right-click me