Radix Themes

https://www.radix-ui.com/themes/docs
Admin
Radix Themes is a pre-styled component library offering ready-to-use UI components and layout...
Tokens:111,831
Snippets:982
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install Radix Themes with npm

Source: https://www.radix-ui.com/themes/docs/overview/getting-started

Run this command in your terminal to install the @radix-ui/themes package.

```bash
npm install @radix-ui/themes
```

--------------------------------

### Theme scaling example JSX

Source: https://www.radix-ui.com/themes/docs/theme/spacing

Example of using the scaling prop on the Theme component to scale UI density. The example shows a card with an avatar and text, and the scaling value is set to 100%.

```jsx
<Theme scaling="100%">
  <Card variant="surface">
    <Flex gap="3" align="center">
      <Avatar size="3" src={person.image} fallback={person.name} />

      <Box>
        <Text as="div" size="2" weight="bold">
          {person.name}
        </Text>

        <Text as="div" size="2" color="gray">
          Approved invoice <Link>#3461</Link>
        </Text>
      </Box>
    </Flex>
  </Card>
</Theme>
```

--------------------------------

### Weight prop examples

Source: https://www.radix-ui.com/themes/docs/components/blockquote.md

Use the `weight` prop to set the text weight. The example shows regular, medium, and bold weights.

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote weight="regular">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote weight="medium">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote weight="bold">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>
```

--------------------------------

### Type scale: Text size example

Source: https://www.radix-ui.com/themes/docs/theme/typography

Example of using the size prop on a Text component to apply a specific step from the 9-step type scale.

```jsx
<Text size="6">The quick brown fox jumps over the lazy dog.</Text>
```

--------------------------------

### High-contrast prop examples

Source: https://www.radix-ui.com/themes/docs/components/blockquote.md

Use the `highContrast` prop to increase color contrast with the background. The example shows a gray Blockquote without and with highContrast.

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="gray">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="gray" highContrast>
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>
```

--------------------------------

### High-contrast prop example

Source: https://www.radix-ui.com/themes/docs/components/checkbox-cards.md

Use the `highContrast` prop to increase color contrast with the background. The example shows pairs of roots with and without highContrast for each color.

```jsx
<Grid columns="2" gap="3" display="inline-grid">
  <CheckboxCards.Root defaultValue={["1"]} color="indigo">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="indigo" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="cyan">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="cyan" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="orange">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="orange" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="crimson">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} color="crimson" highContrast>
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Grid>
```

--------------------------------

### Heading trim prop example for vertical spacing in cards

Source: https://www.radix-ui.com/themes/docs/components/heading.md

Demonstrates using trim="start" on Heading and trim="end" on Text to improve vertical spacing in a card-like layout. The example compares a box without trim to one with trim.

```jsx
<Flex direction="column" gap="3">
  <Box
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
    p="4"
  >
    <Heading mb="1" size="3">
      Without trim
    </Heading>

    <Text>
      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.
    </Text>
  </Box>

  <Box
    p="4"
    style={{
      background: "var(--gray-a2)",
      border: "1px dashed var(--gray-a7)",
    }}
  >
    <Heading mb="1" size="3" trim="start">
      With trim
    </Heading>

    <Text trim="end">
      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.
    </Text>
  </Box>
</Flex>
```

--------------------------------

### Progress variant prop example

Source: https://www.radix-ui.com/themes/docs/components/progress.md

Use the variant prop to control the visual style. This example shows the classic, surface, and soft variants.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} variant="classic" />

  <Progress value={50} variant="surface" />

  <Progress value={75} variant="soft" />
</Flex>
```

--------------------------------

### Size prop examples

Source: https://www.radix-ui.com/themes/docs/components/blockquote.md

Use the `size` prop to control the size of the Blockquote. The example shows sizes 1 through 9, each wrapped in a Box with increasing maxWidth.

```jsx
<Flex direction="column" gap="5">
  <Box maxWidth="300px">
    <Blockquote size="1">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="350px">
    <Blockquote size="2">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="400px">
    <Blockquote size="3">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="450px">
    <Blockquote size="4">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="500px">
    <Blockquote size="5">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="550px">
    <Blockquote size="6">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="600px">
    <Blockquote size="7">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="650px">
    <Blockquote size="8">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>

  <Box maxWidth="1000px">
    <Blockquote size="9">
      Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
      near it in obstinacy.
    </Blockquote>
  </Box>
</Flex>
```

--------------------------------

### Separator color examples

Source: https://www.radix-ui.com/themes/docs/components/separator.md

Shows how to use the color prop to assign specific colors to separators, with examples for indigo, cyan, orange, and crimson.

```jsx
<Flex direction="column" gap="3">
  <Separator color="indigo" size="4" />

  <Separator color="cyan" size="4" />

  <Separator color="orange" size="4" />

  <Separator color="crimson" size="4" />
</Flex>
```

--------------------------------

### Button with icons example

Source: https://www.radix-ui.com/themes/docs/components/button.md

You can nest icons directly inside the button. An appropriate gap is provided automatically. This example shows a BookmarkIcon inside buttons of all variants.

```jsx
<Flex gap="3">
  <Button variant="classic">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="solid">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="soft">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="surface">
    <BookmarkIcon /> Bookmark
  </Button>

  <Button variant="outline">
    <BookmarkIcon /> Bookmark
  </Button>
</Flex>
```

--------------------------------

### Size prop example

Source: https://www.radix-ui.com/themes/docs/components/context-menu.md

Use the `size` prop to control the size of the context menu. This example shows two context menus with sizes "1" and "2".

```jsx
<Grid columns="2" gap="3">
  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size one" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="1">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>

  <ContextMenu.Root>
    <ContextMenu.Trigger>
      <RightClickZone title="Size two" />
    </ContextMenu.Trigger>

    <ContextMenu.Content size="2">
      <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

      <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Item shortcut="⌘ ⌫" color="red">
        Delete
      </ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Root>
</Grid>
```

--------------------------------

### Heading wrap prop examples

Source: https://www.radix-ui.com/themes/docs/components/heading.md

Shows three examples of the wrap prop on Heading: nowrap, balance, and pretty. The pretty value is experimental and not yet supported in all browsers.

```jsx
<Flex maxWidth="300px">
  <Heading wrap="nowrap">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
```

```jsx
<Flex maxWidth="300px">
  <Heading wrap="balance">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
```

```jsx
<Flex maxWidth="300px">
  <Heading wrap="pretty">The quick brown fox jumps over the lazy dog</Heading>
</Flex>
```

--------------------------------

### Progress size prop example

Source: https://www.radix-ui.com/themes/docs/components/progress.md

Use the size prop to control the size of the Progress component. This example shows sizes 1, 2, and 3.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} size="1" />

  <Progress value={50} size="2" />

  <Progress value={75} size="3" />
</Flex>
```

--------------------------------

### Size prop example

Source: https://www.radix-ui.com/themes/docs/components/checkbox-cards.md

Use the `size` prop to control the size of the CheckboxCards. The example shows three roots with sizes 1, 2, and 3.

```jsx
<Flex align="center" gap="3">
  <CheckboxCards.Root defaultValue={["1"]} size="1">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} size="2">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} size="3">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>
```

--------------------------------

### Heading trim prop example with normal and both values

Source: https://www.radix-ui.com/themes/docs/components/heading.md

Shows how to use the trim prop on Heading to remove leading space. The example compares 'normal' (no trim) with 'both' (trim both sides) using dashed borders to visualize the effect.

```jsx
<Flex direction="column" gap="3">
  <Heading
    trim="normal"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    Without trim
  </Heading>

  <Heading
    trim="both"
    style={{
      background: "var(--gray-a2)",
      borderTop: "1px dashed var(--gray-a7)",
      borderBottom: "1px dashed var(--gray-a7)",
    }}
  >
    With trim
  </Heading>
</Flex>
```

--------------------------------

### Avatar size prop example

Source: https://www.radix-ui.com/themes/docs/components/avatar.md

Use the size prop to control the size of the avatar. The example renders eight avatars with sizes from 1 to 8, each using the same image and fallback.

```jsx
<Flex align="center" gap="4">
  <Avatar
    size="1"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="2"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="3"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="4"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="5"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="6"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="7"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />

  <Avatar
    size="8"
    src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
    fallback="A"
  />
</Flex>
```

--------------------------------

### Slider Size Examples

Source: https://www.radix-ui.com/themes/docs/components/slider.md

Shows three sliders with size values 1, 2, and 3.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Slider defaultValue={[25]} size="1" />

  <Slider defaultValue={[50]} size="2" />

  <Slider defaultValue={[75]} size="3" />
</Flex>
```

--------------------------------

### Callout size prop examples

Source: https://www.radix-ui.com/themes/docs/components/callout.md

Use the size prop to control the size of the callout. The example shows three callouts with sizes 1, 2, and 3.

```jsx
<Flex direction="column" gap="3" align="start">
  <Callout.Root size="1">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="2">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root size="3">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      You will need admin privileges to install and access this application.
    </Callout.Text>
  </Callout.Root>
</Flex>
```

--------------------------------

### DataList orientation prop example

Source: https://www.radix-ui.com/themes/docs/components/data-list.md

Use the `orientation` prop to change the layout of the data list. The example shows a responsive orientation that is vertical on initial screens and horizontal on small screens and up.

```jsx
<DataList.Root orientation={{ initial: "vertical", sm: "horizontal" }}>
  <DataList.Item>
    <DataList.Label minWidth="88px">Name</DataList.Label>

    <DataList.Value>Vlad Moroz</DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">Email</DataList.Label>

    <DataList.Value>
      <Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
    </DataList.Value>
  </DataList.Item>

  <DataList.Item>
    <DataList.Label minWidth="88px">Company</DataList.Label>

    <DataList.Value>
      <Link target="_blank" href="https://workos.com">
        WorkOS
      </Link>
    </DataList.Value>
  </DataList.Item>
</DataList.Root>
```

--------------------------------

### Button size prop example

Source: https://www.radix-ui.com/themes/docs/components/button.md

Use the size prop to control the size of the button. This example shows three buttons with sizes 1, 2, and 3, all using the soft variant.

```jsx
<Flex gap="3" align="center">
  <Button size="1" variant="soft">
    Edit profile
  </Button>

  <Button size="2" variant="soft">
    Edit profile
  </Button>

  <Button size="3" variant="soft">
    Edit profile
  </Button>
</Flex>
```

--------------------------------

### Popover size prop example

Source: https://www.radix-ui.com/themes/docs/components/popover.md

Use the `size` prop to control the padding and border-radius of the Popover.Content. Combine with width/height props to control the overall size. This example shows four popovers with sizes 1 through 4.

```jsx
<Flex gap="4" align="center">
  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">Size 1</Button>
    </Popover.Trigger>

    <Popover.Content size="1" maxWidth="300px">
      <Text as="p" trim="both" size="1">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">Size 2</Button>
    </Popover.Trigger>

    <Popover.Content size="2" maxWidth="400px">
      <Text as="p" trim="both" size="2">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">Size 3</Button>
    </Popover.Trigger>

    <Popover.Content size="3" maxWidth="500px">
      <Text as="p" trim="both" size="3">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Popover.Content>
  </Popover.Root>

  <Popover.Root>
    <Popover.Trigger>
      <Button variant="soft">Size 4</Button>
    </Popover.Trigger>

    <Popover.Content size="4">
      <Text as="p" trim="both" size="4">
        The quick brown fox jumps over the lazy dog.
      </Text>
    </Popover.Content>
  </Popover.Root>
</Flex>
```

--------------------------------

### TextArea size prop examples

Source: https://www.radix-ui.com/themes/docs/components/text-area.md

Controls the size of the text area using the `size` prop with values "1", "2", and "3". The example wraps each TextArea in a Box with increasing max-width to illustrate the size differences.

```jsx
<Flex direction="column" gap="3">
  <Box maxWidth="200px">
    <TextArea size="1" placeholder="Reply to comment…" />
  </Box>

  <Box maxWidth="250px">
    <TextArea size="2" placeholder="Reply to comment…" />
  </Box>

  <Box maxWidth="300px">
    <TextArea size="3" placeholder="Reply to comment…" />
  </Box>
</Flex>
```

--------------------------------

### Progress Component

Source: https://www.radix-ui.com/themes/docs/components/progress.md

Documentation for the Progress component, including its props and usage examples.

```APIDOC
## Progress Component

### Description
Displays a progress bar related to a task. Inherits props from the Progress primitive and supports common margin props.

### Props

| Prop | Type | Default |
| --- | --- | --- |
| `size` | `Responsive<"1" | "2" | "3">` | `"2"` |
| `variant` | `"classic" | "surface" | "soft"` | `"surface"` |
| `color` | `enum` | No default value |
| `highContrast` | `boolean` | No default value |
| `radius` | `"none" | "small" | "medium" | "large" | "full"` | No default value |
| `duration` | `string` | No default value |

### Examples

#### Size

Use the `size` prop to control the size.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} size="1" />
  <Progress value={50} size="2" />
  <Progress value={75} size="3" />
</Flex>
```

#### Variant

Use the `variant` prop to control the visual style.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} variant="classic" />
  <Progress value={50} variant="surface" />
  <Progress value={75} variant="soft" />
</Flex>
```

#### Color

Use the `color` prop to assign a specific color.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={20} color="indigo" />
  <Progress value={40} color="cyan" />
  <Progress value={60} color="orange" />
  <Progress value={80} color="crimson" />
</Flex>
```

#### High-contrast

Use the `highContrast` prop to increase color contrast with the background.

```jsx
<Grid columns="2" gap="4">
  <Progress value={10} color="indigo" />
  <Progress value={10} color="indigo" highContrast />
  <Progress value={30} color="cyan" />
  <Progress value={30} color="cyan" highContrast />
  <Progress value={50} color="orange" />
  <Progress value={50} color="orange" highContrast />
  <Progress value={70} color="crimson" />
  <Progress value={70} color="crimson" highContrast />
  <Progress value={90} color="gray" />
  <Progress value={90} color="gray" highContrast />
</Grid>
```

#### Radius

Use the `radius` prop to assign a specific radius value.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} radius="none" />
  <Progress value={50} radius="small" />
  <Progress value={75} radius="full" />
</Flex>
```

#### With controlled value

Use the `value` prop to provide a precise indication of the task progress.

```jsx
<Progress value={75} />
```

#### With custom duration

Use the `duration` prop to indicate an approximate duration of an indeterminate task. Once the duration times out, the progress bar will start an indeterminate animation.

```jsx
<Progress duration="30s" />
```
```

--------------------------------

### Start building with Radix Themes components

Source: https://www.radix-ui.com/themes/docs/overview/getting-started

Use Flex, Text, and Button components to create a simple UI.

```jsx
import { Flex, Text, Button } from "@radix-ui/themes";

export default function MyApp() {
  return (
    <Flex direction="column" gap="2">
      <Text>Hello from Radix Themes :)</Text>

      <Button>Let's go</Button>
    </Flex>
  );
}
```

--------------------------------

### Basic Link usage

Source: https://www.radix-ui.com/themes/docs/components/link.md

Renders a simple link with the text 'Sign up'.

```jsx
<Link href="#">Sign up</Link>
```

--------------------------------

### Margin props usage examples

Source: https://www.radix-ui.com/themes/docs/overview/layout

Shows how to apply margin using a space scale step, a CSS value, and a responsive object.

```jsx
<Button m="4" />

<Button m="100px">

<Button m={{ sm: '6', lg: '9' }}>
```

--------------------------------

### Color prop examples

Source: https://www.radix-ui.com/themes/docs/components/blockquote.md

Use the `color` prop to assign a specific color. The example shows indigo, cyan, orange, and crimson.

```jsx
<Flex direction="column" gap="3" maxWidth="500px">
  <Blockquote color="indigo">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="cyan">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="orange">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>

  <Blockquote color="crimson">
    Perfect typography is certainly the most elusive of all arts. Sculpture in stone alone comes
    near it in obstinacy.
  </Blockquote>
</Flex>
```

--------------------------------

### Size prop examples

Source: https://www.radix-ui.com/themes/docs/components/text-field.md

Demonstrates the size prop with values 1, 2, and 3. Use matching component sizes when composing with buttons, but avoid size 1 inputs with buttons due to insufficient vertical space.

```jsx
<Flex direction="column" gap="3">
  <Box maxWidth="200px">
    <TextField.Root size="1" placeholder="Search the docs…" />
  </Box>

  <Box maxWidth="250px">
    <TextField.Root size="2" placeholder="Search the docs…" />
  </Box>

  <Box maxWidth="300px">
    <TextField.Root size="3" placeholder="Search the docs…" />
  </Box>
</Flex>
```

```jsx
<Flex direction="column" gap="3" maxWidth="400px">
  <Box maxWidth="200px">
    <TextField.Root placeholder="Search the docs…" size="1">
      <TextField.Slot>
        <MagnifyingGlassIcon height="16" width="16" />
      </TextField.Slot>
    </TextField.Root>
  </Box>

  <Box maxWidth="250px">
    <TextField.Root placeholder="Search the docs…" size="2">
      <TextField.Slot>
        <MagnifyingGlassIcon height="16" width="16" />
      </TextField.Slot>

      <TextField.Slot>
        <IconButton size="1" variant="ghost">
          <DotsHorizontalIcon height="14" width="14" />
        </IconButton>
      </TextField.Slot>
    </TextField.Root>
  </Box>

  <Box maxWidth="300px">
    <TextField.Root placeholder="Search the docs…" size="3">
      <TextField.Slot>
        <MagnifyingGlassIcon height="16" width="16" />
      </TextField.Slot>

      <TextField.Slot pr="3">
        <IconButton size="2" variant="ghost">
          <DotsHorizontalIcon height="16" width="16" />
        </IconButton>
      </TextField.Slot>
    </TextField.Root>
  </Box>
</Flex>
```

--------------------------------

### Font weight examples

Source: https://www.radix-ui.com/themes/docs/theme/typography

Shows how to apply different font weights (Light, Regular, Medium, Bold) to text using the Text component.

```jsx
<Text size="6">
  <Flex direction="column">
    <Text weight="light">Light</Text>

    <Text weight="regular">Regular</Text>

    <Text weight="medium">Medium</Text>

    <Text weight="bold">Bold</Text>
  </Flex>
</Text>
```

--------------------------------

### Code size prop example

Source: https://www.radix-ui.com/themes/docs/components/code.md

Shows how to use the `size` prop to control text size. The prop also provides correct line height and corrective letter spacing, which decrease as text size increases.

```jsx
<Flex direction="column" gap="3" align="start">
  <Code size="1">console.log()</Code>

  <Code size="2">console.log()</Code>

  <Code size="3">console.log()</Code>

  <Code size="4">console.log()</Code>

  <Code size="5">console.log()</Code>

  <Code size="6">console.log()</Code>

  <Code size="7">console.log()</Code>

  <Code size="8">console.log()</Code>

  <Code size="9">console.log()</Code>
</Flex>
```

--------------------------------

### Import individual color CSS files for Radix Themes

Source: https://www.radix-ui.com/themes/docs/theme/color

Use this setup to import only the color CSS files you need, reducing bundle size. Import base tokens first, then each color module (e.g., ruby, teal, slate), and remember to include the gray tint matching your theme. Unimported colors still work with the color prop, and your tooling must preserve the import order.

```typescript
// Base theme tokens

import "@radix-ui/themes/tokens/base.css";

// Include just the colors you use, for example `ruby`, `teal`, and `slate`.

// Remember to import the gray tint that matches your theme setting.

import "@radix-ui/themes/tokens/colors/ruby.css";

import "@radix-ui/themes/tokens/colors/teal.css";

import "@radix-ui/themes/tokens/colors/slate.css";

// Rest of the CSS

import "@radix-ui/themes/components.css";

import "@radix-ui/themes/utilities.css";
```

--------------------------------

### Avatar variant prop example

Source: https://www.radix-ui.com/themes/docs/components/avatar.md

Use the variant prop to control the visual style of the avatar. The example shows solid and soft variants.

```jsx
<Flex gap="2">
  <Avatar variant="solid" fallback="A" />

  <Avatar variant="soft" fallback="A" />
</Flex>
```

--------------------------------

### Hover Card size example

Source: https://www.radix-ui.com/themes/docs/components/hover-card.md

Shows three Hover Cards with size prop values "1", "2", and "3", each with different maxWidth. Demonstrates how to control the size of the content.

```jsx
<Flex gap="4">
  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 1</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="1" maxWidth="240px">
      <Text as="div" size="1" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>

  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 2</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="2" maxWidth="280px">
      <Text as="div" size="2" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>

  <HoverCard.Root>
    <HoverCard.Trigger>
      <Link href="#">Size 3</Link>
    </HoverCard.Trigger>

    <HoverCard.Content size="3" maxWidth="320px">
      <Text as="div" size="3" trim="both">
        <Strong>Typography</Strong> is the art and technique of arranging type to make written
        language legible, readable and appealing when displayed.
      </Text>
    </HoverCard.Content>
  </HoverCard.Root>
</Flex>
```

--------------------------------

### Callout highContrast prop example

Source: https://www.radix-ui.com/themes/docs/components/callout.md

Use the HighContrast prop to add additional contrast. The example shows a callout without and with the highContrast prop.

```jsx
<Flex direction="column" gap="3">
  <Callout.Root color="gray" variant="soft">
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      An update to Radix Themes is available. See what’s new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>

  <Callout.Root color="gray" variant="soft" highContrast>
    <Callout.Icon>
      <InfoCircledIcon />
    </Callout.Icon>

    <Callout.Text>
      An update to Radix Themes is available. See what’s new in version 3.2.0.
    </Callout.Text>
  </Callout.Root>
</Flex>
```

--------------------------------

### Variant prop example

Source: https://www.radix-ui.com/themes/docs/components/checkbox-cards.md

Use the `variant` prop to control the visual style. The example shows two roots with variants 'surface' and 'classic'.

```jsx
<Flex direction="column" gap="3" maxWidth="200px">
  <CheckboxCards.Root defaultValue={["1"]} variant="surface">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>

  <CheckboxCards.Root defaultValue={["1"]} variant="classic">
    <CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>
  </CheckboxCards.Root>
</Flex>
```

--------------------------------

### Code weight prop example

Source: https://www.radix-ui.com/themes/docs/components/code.md

Shows how to use the `weight` prop to set the text weight of the Code component.

```jsx
<Flex direction="column" gap="2" align="start">
  <Code weight="regular">console.log()</Code>

  <Code weight="bold">console.log()</Code>
</Flex>
```

--------------------------------

### TabNav size prop example

Source: https://www.radix-ui.com/themes/docs/components/tab-nav.md

Shows TabNav.Root with size="1" and size="2" to control tab size.

```jsx
<Flex direction="column" gap="4" pb="2">
  <TabNav.Root size="1">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>

  <TabNav.Root size="2">
    <TabNav.Link href="#" active>
      Account
    </TabNav.Link>

    <TabNav.Link href="#">Documents</TabNav.Link>

    <TabNav.Link href="#">Settings</TabNav.Link>
  </TabNav.Root>
</Flex>
```

--------------------------------

### Progress radius prop example

Source: https://www.radix-ui.com/themes/docs/components/progress.md

Use the radius prop to assign a specific radius value. This example shows none, small, and full radius values.

```jsx
<Flex direction="column" gap="4" maxWidth="300px">
  <Progress value={25} radius="none" />

  <Progress value={50} radius="small" />

  <Progress value={75} radius="full" />
</Flex>
```

--------------------------------

### Disabled attribute example

Source: https://www.radix-ui.com/themes/docs/components/radio-group.md

Use the native disabled attribute to create a disabled radiobutton. This example shows a RadioGroup.Root with enabled items and another with disabled items.

```jsx
<Flex direction="column" gap="2">
  <RadioGroup.Root defaultValue="2">
    <RadioGroup.Item value="1">Off</RadioGroup.Item>

    <RadioGroup.Item value="2">On</RadioGroup.Item>
  </RadioGroup.Root>

  <RadioGroup.Root defaultValue="2">
    <RadioGroup.Item value="1" disabled>
      Off
    </RadioGroup.Item>

    <RadioGroup.Item value="2" disabled>
      On
    </RadioGroup.Item>
  </RadioGroup.Root>
</Flex>
```

--------------------------------

### Color prop example

Source: https://www.radix-ui.com/themes/docs/components/radio-group.md

Use the color prop to assign a specific color. This example shows RadioGroup.Root components with colors indigo, cyan, orange, and crimson.

```jsx
<Flex gap="2">
  <RadioGroup.Root color="indigo" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="cyan" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="orange" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root color="crimson" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>
</Flex>
```

--------------------------------

### Size prop example

Source: https://www.radix-ui.com/themes/docs/components/radio-group.md

Use the size prop to control the radiobutton size. This example shows three RadioGroup.Root components with sizes 1, 2, and 3.

```jsx
<Flex align="center" gap="2">
  <RadioGroup.Root size="1" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root size="2" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>

  <RadioGroup.Root size="3" defaultValue="1">
    <RadioGroup.Item value="1" />
  </RadioGroup.Root>
</Flex>
```

--------------------------------

### Basic Theme configuration

Source: https://www.radix-ui.com/themes/docs/components/theme.md

Wrap a component tree in the Theme component to provide or modify configuration for all children. This example shows a feedback form with a text area, switch, and buttons.

```jsx
<Box maxWidth="400px">
  <Card size="2">
    <Flex direction="column" gap="3">
      <Grid gap="1">
        <Text as="div" weight="bold" size="2" mb="1">
          Feedback
        </Text>

        <TextArea placeholder="Write your feedback…" />
      </Grid>

      <Flex asChild justify="between">
        <label>
          <Text color="gray" size="2">
            Attach screenshot?
          </Text>

          <Switch size="1" defaultChecked />
        </label>
      </Flex>

      <Grid columns="2" gap="2">
        <Button variant="surface">Back</Button>

        <Button>Send</Button>
      </Grid>
    </Flex>
  </Card>
</Box>
```

--------------------------------

### IconButton color examples

Source: https://www.radix-ui.com/themes/docs/components/icon-button.md

Use the color prop to assign a specific color. This example shows crimson, indigo, grass, and orange colors with the soft variant.

```jsx
<Flex gap="3">
  <IconButton color="crimson" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="indigo" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="grass" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>

  <IconButton color="orange" variant="soft">
    <MagnifyingGlassIcon width="18" height="18" />
  </IconButton>
</Flex>
```

--------------------------------

### Avatar radius prop example

Source: https://www.radix-ui.com/themes/docs/components/avatar.md

Use the radius prop to assign a specific radius value. The example shows none, large, and full radius options.

```jsx
<Flex gap="2">
  <Avatar radius="none" fallback="A" />

  <Avatar radius="large" fallback="A" />

  <Avatar radius="full" fallback="A" />
</Flex>
```

--------------------------------

### Context Menu usage example

Source: https://www.radix-ui.com/themes/docs/components/context-menu.md

Shows a basic context menu with trigger, items, separators, submenu, and a delete item with a shortcut and red color. The trigger wraps a RightClickZone element.

```jsx
<ContextMenu.Root>
  <ContextMenu.Trigger>
    <RightClickZone style={{ height: 150 }} />
  </ContextMenu.Trigger>

  <ContextMenu.Content>
    <ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>

    <ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

    <ContextMenu.Sub>
      <ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>

      <ContextMenu.SubContent>
        <ContextMenu.Item>Move to project…</ContextMenu.Item>

        <ContextMenu.Item>Move to folder…</ContextMenu.Item>

        <ContextMenu.Separator />

        <ContextMenu.Item>Advanced options…</ContextMenu.Item>
      </ContextMenu.SubContent>
    </ContextMenu.Sub>

    <ContextMenu.Separator />

    <ContextMenu.Item>Share</ContextMenu.Item>

    <ContextMenu.Item>Add to favorites</ContextMenu.Item>

    <ContextMenu.Separator />

    <ContextMenu.Item shortcut="⌘ ⌫" color="red">
      Delete
    </ContextMenu.Item>
  </ContextMenu.Content>
</ContextMenu.Root>
```

--------------------------------

### Avatar color prop example

Source: https://www.radix-ui.com/themes/docs/components/avatar.md

Use the color prop to assign a specific color. The example shows solid avatars in indigo, cyan, orange, and crimson.

```jsx
<Flex gap="2">
  <Avatar variant="solid" color="indigo" fallback="A" />

  <Avatar variant="solid" color="cyan" fallback="A" />

  <Avatar variant="solid" color="orange" fallback="A" />

  <Avatar variant="solid" color="crimson" fallback="A" />
</Flex>
```

--------------------------------

### Basic Callout with Icon and Text

Source: https://www.radix-ui.com/themes/docs/components/callout.md

Use Callout.Root to group Callout.Icon and Callout.Text. The Icon part provides width and height for the icon, and Text renders the callout text. This example uses InfoCircledIcon.

```jsx
<Callout.Root>
  <Callout.Icon>
    <InfoCircledIcon />
  </Callout.Icon>

  <Callout.Text>
    You will need admin privileges to install and access this application.
  </Callout.Text>
</Callout.Root>
```
Tokens:
Raw