Radix UI test suite

An environment for testing Radix DS.

Section

Section 1

Section 2

Section 3

Container

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.

No max width

Flex

Grid

Text

The quick brown fox

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.

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.¹ This is a really long paragraph of text, to demonstrate prose text.₁

Skeleton

Avatar variants

Text variants

Control variants

Badge

Default Badge

Coming soon

Sizes

Coming soonComing soon

Variants

LiveApprovedPendingFailedNewApprovedPendingFailedNewApprovedPendingFailedFailedWinnerRunner-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.

Button

TextField

ControlGroup

Textarea

eihuweofjew

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

Link with jy descenders Link with jy descenders Link with jy descenders

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.

Card

Modulz raises $4.2M to close the gap between design and code

Modulz is a visual code editor that empowers teams to design, develop, document and deploy a design system, without writing code.

Modulz raises $4.2M to close the gap between design and code

Modulz is a visual code editor that empowers teams to design, develop, document and deploy a design system, without writing code.

J

Colm Tuite

May 2020

Modulz raises $4.2M to close the gap between design and code

Modulz is a visual code editor that empowers teams to design, develop, document and deploy a design system, without writing code.

J

Colm Tuite

May 2020

Modulz raises $4.2M to close the gap between design and code

Modulz is a visual code editor that empowers teams to design, develop, document and deploy a design system, without writing code.

J

Colm Tuite

May 2020

Alert Dialog

Dialog

Sheet

ProgressBar

Default

Indeterminate state

Indeterminate

UI test

Download 50% complete

46 hours remaining

Gradient variant

Blue variant

Badge

Accordion

Avatar

Default

J

Avatar sizes

J

Avatar fallback

F

Avatar colors

F

Interactive avatar

J

Inactive avatar

D

R

A

J

F

Grouped avatars

J

Nested avatars

J

Avatar with status

J

Avatar with icon

Story avatars

Tabs

Default

Tabs Content 1

Vertical orientation

Panel 1

TabLink

Slider

Default

Range

Vertical orientation

SimpleToggle

Checkbox

Sizes

Radio

Sizes

Table

This is the table caption.
Club	MP	W	D	L	GF	GA	GD	Pts	Last 5
Man City	32	32	32	32	32	32	32	32
Man United	32	32	32	32	32	32	32	32
Leicester City	32	32	32	32	32	32	32	32
Chelsea	32	32	32	32	32	32	32	32
West Ham	32	32	32	32	32	32	32	32
Leicester City	32	32	32	32	32	32	32	32

This is the table caption.
Club	MP	W	D	L	GF	GA	GD	Pts	Last 5
1 Man City	32	32	32	32	32	32	32	32
2 Man United	32	32	32	32	32	32	32	32
3 Leicester City	32	32	32	32	32	32	32	32
4 Chelsea	32	32	32	32	32	32	32	32
5 West Ham	32	32	32	32	32	32	32	32
6 Leicester City	32	32	32	32	32	32	32	32

Striped table caption.
Club	MP	W	D	L	GF	GA	GD	Pts	Last 5
Man City	32	32	32	32	32	32	32	32
Man United	32	32	32	32	32	32	32	32
Leicester City	32	32	32	32	32	32	32	32
Chelsea	32	32	32	32	32	32	32	32
West Ham	32	32	32	32	32	32	32	32
Leicester City	32	32	32	32	32	32	32	32

Quick nav

Radix UI test suite

Section

Container

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.

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

Skeleton

Avatar variants

Text variants

Control variants

Badge

Default Badge

Sizes

Variants

Interactive variant

Status

Default Status

Sizes

Variants

Alert

Button

TextField

ControlGroup

Textarea

Kbd

Kbd test

Kbd variants

VerifiedBadge

Link

Link variants

Inline link test

Code

Card

Modulz raises $4.2M to close the gap between design and code

Modulz raises $4.2M to close the gap between design and code

Modulz raises $4.2M to close the gap between design and code

Modulz raises $4.2M to close the gap between design and code

Alert Dialog

Dialog

Sheet

ProgressBar

Default

Indeterminate state

UI test

Gradient variant

Blue variant

Popover

Accordion

Accordion one

Accordion two

Accordion one