Source: https://www.radix-ui.com/themes/playground?tab-nav=documents

Radix Homepage

Made by WorkOS

Radix Homepage

Made by WorkOS

ThemesThemes PrimitivesPrimitives IconsIcons ColorsColors

Documentation Playground Blog

T

Theme

Accent color

Gray color

Appearance

Light

Dark

Radius

None

Small

Medium

Large

Full

Scaling

90%

95%

100%

105%

110%

Panel background

Learn more about panel background options

Solid

Translucent

Copy Theme

Alert Dialog

==========================================================================================

View in docs

OpenOpenOpenOpen

Aspect Ratio

==========================================================================================

View in docs

2:3

1:1

16:9

Avatar

==============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | | | | Gray | | | | | | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | | Solid | | V | BG | | | | V | BG | | | | Soft | | V | BG | | | | V | BG | | |

Badge

============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | | --- | --- | --- | | Solid | NewNew | NewNew | | Soft | NewNew | NewNew | | Surface | NewNew | NewNew | | Outline | NewNew | NewNew |

Blockquote

======================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizesAll weightsAll weights

Accent

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Gray

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Perfect typography is certainly the most elusive of all arts.
Sculpture in stone alone comes near it in obstinacy.

Button

==============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | Disabled | Loading | | --- | --- | --- | --- | --- | --- | --- | | Classic | Next | Next | Next | Next | Next | Next Next | | Solid | Next | Next | Next | Next | Next | Next Next | | Soft | Next | Next | Next | Next | Next | Next Next | | Surface | Next | Next | Next | Next | Next | Next Next | | Outline | Next | Next | Next | Next | Next | Next Next | | Ghost | Next | Next | Next | Next | Next | Next Next |

Callout

================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | | --- | --- | --- | | Soft | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. | | Surface | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. | | Outline | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. | Please upgrade<br> to the new version.<br><br>Please upgrade<br> to the new version. |

Card

==========================================================================

View in docs

Sign in

Email

PasswordForgot password?

Create an accountSign in

| | Surface | Classic | Ghost | | --- | --- | --- | --- | | Size 1 | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com | | Size 2 | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com | | Size 3 | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com | Emily Adams<br><br>emily.adams@example.com |

Checkbox

==================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | Disabled | | --- | --- | --- | --- | --- | --- | | Classic | | | | | | | Surface | | | | | | | Soft | | | | | |

Checkbox Group

==============================================================================================

View in docs

Agree to Terms and ConditionsAgree to Privacy Policy

Agree to Terms and ConditionsAgree to Privacy Policy

Agree to Terms and ConditionsAgree to Privacy Policy

Checkbox Cards

==============================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | | --- | --- | --- | | Surface | Next.jsRemix<br><br>Next.jsRemix | Next.jsRemix<br><br>Next.jsRemix | | Classic | Next.jsRemix<br><br>Next.jsRemix | Next.jsRemix<br><br>Next.jsRemix |

Code

==========================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizesAll weightsAll weights

| | Accent | | Gray | | | --- | --- | --- | --- | --- | | Solid | console.log() | console.log() | console.log() | console.log() | | Soft | console.log() | console.log() | console.log() | console.log() | | Outline | console.log() | console.log() | console.log() | console.log() | | Ghost | console.log() | console.log() | console.log() | console.log() |

Context Menu

==========================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | | --- | --- | --- | --- | --- | | Solid | Right-click here | Right-click here | Right-click here | Right-click here | | Soft | Right-click here | Right-click here | Right-click here | Right-click here |

Data List

====================================================================================

View in docs

HorizontalHorizontalVerticalVertical

Size 1

Status

Active

Name

Vlad Moroz

Email

vlad@workos.com

Company

WorkOS

Title

Product Designer

Size 2

Status

Active

Name

Vlad Moroz

Email

vlad@workos.com

Company

WorkOS

Title

Product Designer

Size 3

Status

Active

Name

Vlad Moroz

Email

vlad@workos.com

Company

WorkOS

Title

Product Designer

Dialog

==============================================================================

View in docs

OpenOpenOpenOpen

Dropdown Menu

============================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | | --- | --- | --- | --- | --- | | Solid | Options | Options | Options | Options | | Soft | Options | Options | Options | Options |

Em

======================================================================

View in docs

Versions of the Lorem ipsum text have been used in typesetting at least since the 1960s, when it was popularized by advertisements for Letraset transfer sheets. It is typically a corrupted version of De finibus bonorum et malorum, a 1st-century BC text by the Roman statesman and philosopher Cicero, with words altered, added, and removed to make it nonsensical and improper Latin.

Heading

================================================================================

View in docs

SpecimenSpecimenAll colorsAll colorsAll sizesAll sizesAll weightsAll weights

The principles of the typographic craft are difficult to master

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

The principles of the typographic craft are difficult to master

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant.

Hover Card

======================================================================================

View in docs

Technology revolutionized typography in the latter twentieth century.Technology revolutionized typography in the latter twentieth century.Technology revolutionized typography in the latter twentieth century.

Icon Button

========================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | Disabled | Loading | | --- | --- | --- | --- | --- | --- | --- | | Classic | | | | | | | | Solid | | | | | | | | Soft | | | | | | | | Surface | | | | | | | | Outline | | | | | | | | Ghost | | | | | | |

Inset

============================================================================

View in docs

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed.

Kbd

========================================================================

View in docs

SpecimenSpecimenAll sizesAll sizes

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Press ⌘ C to show/hide the Theme Panel, or press ⌘ D to toggle dark mode.

Link

==========================================================================

View in docs

SpecimenSpecimenAll colorsAll colorsAll sizesAll sizesAll weightsAll weights

Accent

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Gray

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Susan Kare is an American artist and graphic designer , who contributed interface elements and typefaces for the first Apple Macintosh personal computer from 1983 to 1986.

Popover

================================================================================

View in docs

CommentCommentCommentComment

Progress

==================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | | --- | --- | --- | --- | --- | | Classic | | | | | | Surface | | | | | | Soft | | | | |

Quote

============================================================================

View in docs

A man who would letterspace lower case would steal sheep, Frederic Goudy liked to say. The reason for not letterspacing lower case is that it hampers legibility. But there are some lowercase alphabets to which this principle doesn’t apply. Moderate letterspacing can make a face such as lowercase Univers bold condensed more legible rather than less

Radio

============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | Disabled | | --- | --- | --- | --- | | Classic | | | | | Surface | | | | | Soft | | | |

Radio Group

========================================================================================

View in docs

Agree to Terms and ConditionsDisagree with Terms and Conditions

Agree to Terms and ConditionsDisagree with Terms and Conditions

Agree to Terms and ConditionsDisagree with Terms and Conditions

Radio Cards

========================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | | --- | --- | --- | | Surface | Next.jsRemix<br><br>Next.jsRemix | Next.jsRemix<br><br>Next.jsRemix | | Classic | Next.jsRemix<br><br>Next.jsRemix | Next.jsRemix<br><br>Next.jsRemix |

Scroll Area

========================================================================================

View in docs

Three fundamental aspects of typography are legibility, readability, and aesthetics. Although in a non-technical sense “legible” and “readable” are often used synonymously, typographically they are separate but related concepts.

Legibility describes how easily individual characters can be distinguished from one another. It is described by Walter Tracy as “the quality of being decipherable and recognisable”. For instance, if a “b” and an “h”, or a “3” and an “8”, are difficult to distinguish at small sizes, this is a problem of legibility.

Typographers are concerned with legibility insofar as it is their job to select the correct font to use. Brush Script is an example of a font containing many characters that might be difficult to distinguish. The selection of cases influences the legibility of typography because using only uppercase letters (all-caps) reduces legibility.

Select

==============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | Placeholder | Disabled | | --- | --- | --- | --- | --- | | Classic | Apple | Apple | Choose a fruit… | Apple | | Surface | Apple | Apple | Choose a fruit… | Apple | | Soft | Apple | Apple | Choose a fruit… | Apple | | Ghost | Apple | Apple | Choose a fruit… | Apple |

Separator

====================================================================================

View in docs

Tools for building high-quality, accessible UI.

ThemesPrimitivesIconsColors

Segmented Control

====================================================================================================

View in docs

| | No radius | Small | Medium | Large | Full | | --- | --- | --- | --- | --- | --- | | Size 1 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | | Size 2 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | | Size 3 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | | | | Size 1 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | | Size 2 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | | Size 3 | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent | InboxInboxSentSent |

Skeleton

==================================================================================

View in docs

Sign in

Email address

Forgot password?

Password

Create an accountSign in

Sign in

Email address

Forgot password?

Password

Create an accountSign in

Slider

==============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | Disabled | | --- | --- | --- | --- | --- | --- | | Classic | | | | | | | Surface | | | | | | | Soft | | | | | |

Spinner

================================================================================

View in docs

Strong

==============================================================================

View in docs

The most important thing to remember is, stay positive.

Switch

==============================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | | Gray | | Disabled | | --- | --- | --- | --- | --- | --- | | Classic | | | | | | | Surface | | | | | | | Soft | | | | | |

Table

============================================================================

View in docs

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

SurfaceGhostSize 1

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

Size 2

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

Size 3

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

| Full name | Email | Group | | --- | --- | --- | | Danilo Sousa | danilo@example.com | Developer | | Zahra Ambessa | zahra@example.com | Admin | | Jasper Eriksson | jasper@example.com | Developer |

Tabs

==========================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

Accent

AccountAccountDocumentsDocuments

AccountAccountDocumentsDocuments

Gray

AccountAccountDocumentsDocuments

AccountAccountDocumentsDocuments

Tab Nav

================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

Accent

Gray

Text

==========================================================================

View in docs

SpecimenSpecimenAll colorsAll colorsAll sizesAll sizesAll weightsAll weights

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

The goal of typography is to relate font size, line height, and line width in a proportional way that maximizes beauty and makes reading easier and more pleasant. The question is: What proportion(s) will give us the best results? The golden ratio is often observed in nature where beauty and utility intersect; perhaps we can use this “divine” proportion to enhance these attributes in our typography.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick Look

Extensions from the installed software may add new features to this app.

Quick LookOpens in a new window

Quick LookOpens in a new window

Quick LookOpens in a new window

Quick LookOpens in a new window

Text Area

====================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | Disabled | Read-only | | --- | --- | --- | --- | --- | | Classic | | | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. | | Surface | | | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. | | Soft | | | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. | The :autofill CSS pseudo-class matches when an <input> element has its value autofilled by the browser. |

Text Field

======================================================================================

View in docs

Theme colorsTheme colorsAll colorsAll colorsAll sizesAll sizes

| | Accent | Gray | Disabled | Read-only | | --- | --- | --- | --- | --- | | Classic | | | | | | Surface | | | | | | Soft | | | | |

Tooltip

================================================================================

View in docs

Hover here