### Run Development Server with npm

Source: https://github.com/radix-ui/themes/blob/main/apps/playground/README.md

Use this command to start the Next.js development server using npm. Open http://localhost:3000 in your browser to view the application.

```bash
npm run dev
```

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

### Run Development Server with bun

Source: https://github.com/radix-ui/themes/blob/main/apps/playground/README.md

Use this command to start the Next.js development server using bun. Open http://localhost:3000 in your browser to view the application.

```bash
bun dev
```

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

### Install Dependencies with pnpm

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Use this command to install all project dependencies in the monorepo.

```bash
pnpm install
```

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

### Run Development Server with yarn

Source: https://github.com/radix-ui/themes/blob/main/apps/playground/README.md

Use this command to start the Next.js development server using yarn. Open http://localhost:3000 in your browser to view the application.

```bash
yarn dev
```

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

### Run Development Server with pnpm

Source: https://github.com/radix-ui/themes/blob/main/apps/playground/README.md

Use this command to start the Next.js development server using pnpm. Open http://localhost:3000 in your browser to view the application.

```bash
pnpm dev
```

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

### Install Radix Themes

Source: https://context7.com/radix-ui/themes/llms.txt

Install the Radix Themes package using npm. This command adds the library to your project dependencies.

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

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

### TextField with Icons and Clear Button

Source: https://context7.com/radix-ui/themes/llms.txt

Use TextField.Root with TextField.Slot for leading/trailing icons or buttons. The example shows a search input with a magnifying glass icon and a clear button, and a password field with a reveal toggle.

```tsx
import * as TextField from '@radix-ui/themes/components/text-field';
// or namespace: import { TextField } from '@radix-ui/themes';

import { IconButton, Flex, Text } from '@radix-ui/themes';
import { MagnifyingGlassIcon, Cross2Icon, EyeOpenIcon } from '@radix-ui/react-icons';
import * as React from 'react';

export default function Example() {
  const [query, setQuery] = React.useState('');
  const [showPwd, setShowPwd] = React.useState(false);

  return (
    <Flex direction="column" gap="4" maxWidth="320px" p="6">
      {/* Search with left icon and clear button */}
      <TextField.Root
        size="2"
        placeholder="Search…"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      >
        <TextField.Slot>
          <MagnifyingGlassIcon height="16" width="16" />
        </TextField.Slot>
        {query && (
          <TextField.Slot side="right">
            <IconButton size="1" variant="ghost" color="gray" onClick={() => setQuery('')}>
              <Cross2Icon />
            </IconButton>
          </TextField.Slot>
        )}
      </TextField.Root>

      {/* Password field with reveal toggle */}
      <TextField.Root
        type={showPwd ? 'text' : 'password'}
        placeholder="Password"
        size="2"
        variant="surface"
      >
        <TextField.Slot side="right">
          <IconButton size="1" variant="ghost" color="gray" onClick={() => setShowPwd(!showPwd)}>
            <EyeOpenIcon />
          </IconButton>
        </TextField.Slot>
      </TextField.Root>
    </Flex>
  );
}
```

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

### Avatar Component Examples

Source: https://context7.com/radix-ui/themes/llms.txt

Avatar displays user images with fallback text or icons. It handles loading states and supports different sizes, variants, and colors. Ensure fallback is provided.

```tsx
import { Flex, Avatar, Text } from '@radix-ui/themes';

const users = [
  { name: 'Alice Johnson', src: 'https://i.pravatar.cc/150?img=1', id: 1 },
  { name: 'Bob Smith', src: '/broken-image.png', id: 2 }, // will show fallback
  { name: 'Charlie Brown', src: undefined, id: 3 },
];

export default function Example() {
  return (
    <Flex gap="3" align="center" p="4">
      {users.map((user) => (
        <Flex key={user.id} direction="column" align="center" gap="1">
          <Avatar
            src={user.src}
            fallback={user.name.slice(0, 2).toUpperCase()}
            size="4"
            radius="full"
            color="indigo"
          />
          <Text size="1" color="gray">{user.name}</Text>
        </Flex>
      ))}

      {/* Variant "solid" for high-contrast fallbacks */}
      <Avatar fallback="AD" variant="solid" color="crimson" size="5" />
    </Flex>
  );
}
```

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

### Switch with Size Variants and Color Options

Source: https://context7.com/radix-ui/themes/llms.txt

The Switch component functions as a binary on/off toggle. It supports controlled and uncontrolled states similar to Checkbox. This example demonstrates different sizes, colors, and variants.

```tsx
import { Switch, Flex, Text } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [enabled, setEnabled] = React.useState(false);

  return (
    <Flex direction="column" gap="4" p="4">
      <Flex as="label" gap="2" align="center">
        <Switch
          checked={enabled}
          onCheckedChange={setEnabled}
          size="2"
          color="green"
        />
        <Text size="2">{enabled ? 'Notifications on' : 'Notifications off'}</Text>
      </Flex>

      {/* Size variants */}
      <Flex gap="3" align="center">
        <Switch size="1" defaultChecked />
        <Switch size="2" defaultChecked color="orange" />
        <Switch size="3" defaultChecked color="crimson" variant="surface" />
      </Flex>
    </Flex>
  );
}
```

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

### Access Theme Context with useThemeContext

Source: https://context7.com/radix-ui/themes/llms.txt

Use the `useThemeContext` hook inside a `<Theme>` tree to access current theme values and change handlers. This example demonstrates toggling the appearance.

```tsx
import { Theme, useThemeContext, Button, Flex, Text } from '@radix-ui/themes';

function ThemeInfo() {
  const {
    appearance,
    accentColor,
    radius,
    scaling,
    onAppearanceChange,
  } = useThemeContext();

  return (
    <Flex direction="column" gap="2">
      <Text size="2">Appearance: {appearance}</Text>
      <Text size="2">Accent: {accentColor}</Text>
      <Text size="2">Radius: {radius}</Text>
      <Text size="2">Scaling: {scaling}</Text>
      <Button onClick={() => onAppearanceChange(appearance === 'light' ? 'dark' : 'light')}>
        Toggle appearance
      </Button>
    </Flex>
  );
}

export default function App() {
  return (
    <Theme accentColor="teal">
      <ThemeInfo />
    </Theme>
  );
}
```

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

### Badge Component Examples

Source: https://context7.com/radix-ui/themes/llms.txt

Use Badge for status labels, counts, and categories. Supports various colors, variants, sizes, and can be rendered as a link using asChild.

```tsx
import { Flex, Badge, Text } from '@radix-ui/themes';

export default function Example() {
  return (
    <Flex gap="2" align="center" wrap="wrap" p="4">
      <Badge color="green">Active</Badge>
      <Badge color="red" variant="solid">Error</Badge>
      <Badge color="orange" variant="surface">Warning</Badge>
      <Badge color="blue" variant="outline" size="2">v3.3.0</Badge>
      <Badge color="gray" radius="none">Draft</Badge>

      {/* asChild: renders badge as a <span> link */}
      <Badge asChild color="indigo">
        <a href="/status">View status</a>
      </Badge>

      <Flex align="center" gap="1">
        <Text size="2">Notifications</Text>
        <Badge color="tomato" size="1">12</Badge>
      </Flex>
    </Flex>
  );
}
```

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

### Card Component Examples

Source: https://context7.com/radix-ui/themes/llms.txt

Card provides a bordered, rounded container for grouping content. Use it for distinct sections, with variants for different visual elevations. Supports edge-to-edge content via Inset and can be interactive with asChild.

```tsx
import { Card, Flex, Avatar, Text, Badge, Button, Box, Inset } from '@radix-ui/themes';

export default function Example() {
  return (
    <Flex gap="4" p="6" wrap="wrap">
      {/* Basic card */}
      <Card size="2" style={{ maxWidth: 320 }}>
        <Flex gap="3" align="center">
          <Avatar size="4" fallback="JD" color="teal" radius="full" />
          <Box>
            <Text as="div" size="3" weight="bold">Jane Doe</Text>
            <Text as="div" size="2" color="gray">Software Engineer</Text>
          </Box>
        </Flex>
      </Card>

      {/* Card with Inset for edge-to-edge image */}
      <Card size="2" style={{ maxWidth: 280 }}>
        <Inset clip="padding-box" side="top" pb="current">
          <img
            src="https://picsum.photos/280/140"
            alt="Cover"
            style={{ display: 'block', width: '100%', objectFit: 'cover' }}
          />
        </Inset>
        <Text as="p" size="2" mt="2">Card with edge-to-edge image header.</Text>
      </Card>

      {/* Interactive card via asChild */}
      <Card asChild size="2" variant="surface" style={{ maxWidth: 240 }}>
        <a href="/profile">
          <Text size="2" weight="medium">View profile →</Text>
        </a>
      </Card>
    </Flex>
  );
}
```

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

### Build the Library

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Builds all packages within the monorepo.

```bash
pnpm build
```

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

### Build Only the Themes Package

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Builds only the `@radix-ui/themes` package.

```bash
pnpm build:pkg
```

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

### Flex and Grid Layouts with Responsiveness

Source: https://context7.com/radix-ui/themes/llms.txt

Illustrates the use of Flex and Grid layout primitives for structuring content, demonstrating responsive properties for direction, alignment, and column counts. Requires Box, Text, and Button imports.

```tsx
import { Flex, Grid, Box, Text, Button } from '@radix-ui/themes';

export default function Example() {
  return (
    // Flex: direction, align, justify, gap, wrap are responsive
    <Flex direction={{ initial: 'column', sm: 'row' }} gap="4" p="6">
      <Box flexShrink="0" width="200px" style={{ background: 'var(--accent-3)' }} p="4">
        <Text size="2">Sidebar</Text>
      </Box>

      {/* Grid: 1 column on mobile, 3 on sm+ */}
      <Grid columns={{ initial: '1', sm: '3' }} gap="3" flexGrow="1">
        {['Alpha', 'Beta', 'Gamma', 'Delta', 'Epsilon', 'Zeta'].map((name) => (
          <Box key={name} p="3" style={{ background: 'var(--gray-3)' }}>
            <Text size="2">{name}</Text>
          </Box>
        ))}
      </Grid>
    </Flex>
  );
}
```

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

### Lint All Code

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Runs ESLint and Stylelint across the entire monorepo to check for code quality issues.

```bash
pnpm lint
```

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

### Typography with Text and Heading

Source: https://context7.com/radix-ui/themes/llms.txt

Demonstrates the Text and Heading components for rendering typography, showcasing different sizes, weights, colors, alignment, and truncation. Requires Flex import.

```tsx
import { Flex, Heading, Text } from '@radix-ui/themes';

export default function Example() {
  return (
    <Flex direction="column" gap="2" maxWidth="480px" p="6">
      <Heading as="h1" size="8" trim="start">
        Page Title
      </Heading>
      <Heading as="h2" size="5" color="gray">
        Subtitle
      </Heading>

      <Text as="p" size="3" color="gray">
        Body text with <Text weight="bold">bold</Text> and{' '}
        <Text color="indigo">colored</Text> inline spans.
      </Text>

      <Text size="1" color="gray" truncate>
        This very long line of text will be truncated with an ellipsis if it overflows its container.
      </Text>
    </Flex>
  );
}
```

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

### Button Variants, Sizes, and States

Source: https://context7.com/radix-ui/themes/llms.txt

Demonstrates different visual styles, sizes, color overrides, loading states, high contrast, and the `asChild` pattern for the Button component. Ensure necessary imports are included.

```tsx
import { Button, Flex, Spinner } from '@radix-ui/themes';

export default function Example() {
  return (
    <Flex gap="3" align="center" wrap="wrap">
      {/* Variants */}
      <Button variant="solid">Solid</Button>
      <Button variant="soft">Soft</Button>
      <Button variant="outline">Outline</Button>
      <Button variant="surface">Surface</Button>
      <Button variant="ghost">Ghost</Button>

      {/* Sizes: 1–4 */}
      <Button size="1">Small</Button>
      <Button size="3">Large</Button>

      {/* Color override */}
      <Button color="crimson">Delete</Button>

      {/* Loading state — spinner replaces content, button stays same size */}
      <Button loading>Saving…</Button>

      {/* High contrast */}
      <Button highContrast>High contrast</Button>

      {/* asChild: renders as <a> while keeping Button styles */}
      <Button asChild>
        <a href="/dashboard">Go to dashboard</a>
      </Button>
    </Flex>
  );
}
```

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

### IconButton Usage with Tooltips

Source: https://context7.com/radix-ui/themes/llms.txt

Shows how to use the IconButton component for icon-only actions, including applying variants, colors, sizes, and integrating with Tooltips for accessibility. Requires importing icons and Tooltip.

```tsx
import { IconButton, Flex, Tooltip } from '@radix-ui/themes';
import { MagnifyingGlassIcon, GearIcon, PlusIcon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <Flex gap="3" align="center">
      <Tooltip content="Search">
        <IconButton variant="soft" aria-label="Search">
          <MagnifyingGlassIcon width="16" height="16" />
        </IconButton>
      </Tooltip>

      <Tooltip content="Settings">
        <IconButton variant="ghost" color="gray" aria-label="Settings">
          <GearIcon width="16" height="16" />
        </IconButton>
      </Tooltip>

      <IconButton size="3" radius="full" aria-label="Add item">
        <PlusIcon width="20" height="20" />
      </IconButton>
    </Flex>
  );
}
```

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

### Import Radix Themes Stylesheet

Source: https://context7.com/radix-ui/themes/llms.txt

Import the main stylesheet for Radix Themes at your application's entry point. This ensures all theme styles are applied globally.

```tsx
import '@radix-ui/themes/styles.css';
```

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

### Root Theme Provider with Nested Overrides

Source: https://context7.com/radix-ui/themes/llms.txt

Use the `Theme` component to wrap your application and provide design tokens. Nested `Theme` components can override specific tokens for isolated sections.

```tsx
import { Theme, Button, Flex, Text } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';

export default function App() {
  return (
    // Root theme: dark, indigo accent, medium radius, 100% scale
    <Theme appearance="dark" accentColor="indigo" radius="medium" scaling="100%">
      <Flex direction="column" gap="4" p="6">
        <Text size="5" weight="bold">Hello, Radix Themes</Text>
        <Button>Click me</Button>

        {/* Nested theme overrides only accentColor */}
        <Theme accentColor="crimson">
          <Button>Crimson button</Button>
        </Theme>
      </Flex>
    </Theme>
  );
}
```

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

### Format Code

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Applies code formatting rules (Prettier) to all files in the repository.

```bash
pnpm format
```

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

### Check Code Formatting

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Checks if all files adhere to the configured code formatting rules without modifying them.

```bash
pnpm format:check
```

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

### Update Visual Regression Snapshots

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Updates the baseline snapshots for visual regression tests. Use this after making intentional UI changes.

```bash
pnpm test:vr:update
```

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

### Creating Accessible Modal Dialogs with Dialog

Source: https://context7.com/radix-ui/themes/llms.txt

Implement modal overlays using the Dialog component, which includes trigger, content, title, description, and close buttons. Ensure proper import of Dialog and other necessary UI elements.

```tsx
import * as Dialog from '@radix-ui/themes/components/dialog';
// or namespace: import { Dialog } from '@radix-ui/themes';

import { Button, Flex, TextField, Text } from '@radix-ui/themes';

export default function Example() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>
        <Button>Edit profile</Button>
      </Dialog.Trigger>

      <Dialog.Content maxWidth="450px">
        <Dialog.Title>Edit profile</Dialog.Title>
        <Dialog.Description size="2" mb="4" color="gray">
          Make changes to your profile information.
        </Dialog.Description>

        <Flex direction="column" gap="3">
          <label>
            <Text as="div" size="2" mb="1" weight="medium">Name</Text>
            <TextField.Root defaultValue="Jane Doe" placeholder="Enter your name" />
          </label>
          <label>
            <Text as="div" size="2" mb="1" weight="medium">Email</Text>
            <TextField.Root type="email" defaultValue="jane@example.com" />
          </label>
        </Flex>

        <Flex gap="3" mt="4" justify="end">
          <Dialog.Close>
            <Button variant="soft" color="gray">Cancel</Button>
          </Dialog.Close>
          <Dialog.Close>
            <Button>Save changes</Button>
          </Dialog.Close>
        </Flex>
      </Dialog.Content>
    </Dialog.Root>
  );
}
```

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

### Interactive Theme Customizer with ThemePanel

Source: https://context7.com/radix-ui/themes/llms.txt

Integrate `ThemePanel` to provide a floating UI panel for users to customize theme settings at runtime. The panel can be toggled with the 'T' key.

```tsx
import { Theme, ThemePanel, Button, Flex } from '@radix-ui/themes';

export default function App() {
  return (
    <Theme>
      <Flex p="6" gap="3">
        <Button>Primary</Button>
        <Button variant="soft">Soft</Button>
        <Button variant="outline">Outline</Button>
      </Flex>
      {/* defaultOpen=false hides the panel initially; press T to open */}
      <ThemePanel defaultOpen={false} />
    </Theme>
  );
}
```

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

### Skeleton Component Usage

Source: https://context7.com/radix-ui/themes/llms.txt

Use the Skeleton component to wrap any other component. It will display an animated loading placeholder when the `loading` prop is true. Ensure necessary components like Avatar, Text, Flex, and Card are imported from '@radix-ui/themes'.

```tsx
import { Skeleton, Avatar, Text, Flex, Card } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [loading, setLoading] = React.useState(true);

  // Simulate data fetch
  React.useEffect(() => {
    const t = setTimeout(() => setLoading(false), 2000);
    return () => clearTimeout(t);
  }, []);

  return (
    <Card size="2" style={{ maxWidth: 320 }}>
      <Flex gap="3" align="center">
        <Skeleton loading={loading}>
          <Avatar size="4" src="/user.png" fallback="JD" radius="full" />
        </Skeleton>
        <Flex direction="column" gap="1" flexGrow="1">
          <Skeleton loading={loading}>
            <Text size="3" weight="bold">Jane Doe</Text>
          </Skeleton>
          <Skeleton loading={loading}>
            <Text size="2" color="gray">jane@example.com</Text>
          </Skeleton>
        </Flex>
      </Flex>
    </Card>
  );
}
```

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

### Theme Component

Source: https://context7.com/radix-ui/themes/llms.txt

The Theme component wraps your application to provide design tokens. It accepts props to control appearance, accent color, gray color, panel background, radius, and scaling. Nested Theme components can override parent settings.

```APIDOC
## Theme Component

### Description

The `Theme` component must wrap your application (or any subtree) to provide design tokens. It sets `appearance` (light/dark), `accentColor`, `grayColor`, `panelBackground`, `radius`, and `scaling`. Nested `Theme` components inherit parent settings and can override individual tokens for isolated sections.

### Props

- **appearance** (`"light" | "dark" | "inherit"`): Controls the light or dark mode of the theme.
- **accentColor** (29 colors, default `"indigo"`): Sets the primary accent color for UI elements.
- **grayColor** (`"auto" | "gray" | "mauve" | "slate" | ...`): Sets the gray color scale for neutral elements.
- **panelBackground** (`"solid" | "translucent"`): Determines the background style of panels.
- **radius** (`"none" | "small" | "medium" | "large" | "full"`): Sets the border radius for components.
- **scaling** (`"90%" | "95%" | "100%" | "105%" | "110%"`): Controls the UI scaling factor.
- **hasBackground** (boolean): Indicates if the theme has a background.

### Example

```tsx
import { Theme, Button, Flex, Text } from '@radix-ui/themes';
import '@radix-ui/themes/styles.css';

export default function App() {
  return (
    <Theme appearance="dark" accentColor="indigo" radius="medium" scaling="100%">
      <Flex direction="column" gap="4" p="6">
        <Text size="5" weight="bold">Hello, Radix Themes</Text>
        <Button>Click me</Button>

        <Theme accentColor="crimson">
          <Button>Crimson button</Button>
        </Theme>
      </Flex>
    </Theme>
  );
}
```
```

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

### Progress Bar with Determinate and Indeterminate States

Source: https://context7.com/radix-ui/themes/llms.txt

Shows how to use the Radix UI Progress component for both determinate (with a value) and indeterminate (loading) states. Useful for indicating task progress.

```tsx
import { Progress, Flex, Text } from '@radix-ui/themes';

export default function Example() {
  return (
    <Flex direction="column" gap="4" maxWidth="360px" p="6">
      {/* Determinate */}
      <Flex direction="column" gap="1">
        <Text size="2">Upload: 75%</Text>
        <Progress value={75} max={100} size="2" color="blue" radius="full" />
      </Flex>

      {/* Indeterminate (no value prop) — animates indefinitely */}
      <Flex direction="column" gap="1">
        <Text size="2">Processing…</Text>
        <Progress size="1" color="indigo" duration="1.4s" />
      </Flex>

      {/* Size and variant */}
      <Progress value={40} size="3" variant="surface" color="green" />
    </Flex>
  );
}
```

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

### Create a Tooltip with custom content and behavior

Source: https://context7.com/radix-ui/themes/llms.txt

Use the Tooltip component to wrap any trigger element and display a contextual hover label. Customize content, side, offset, and delay duration.

```tsx
import { Tooltip, IconButton, Flex, Button } from '@radix-ui/themes';
import { InfoCircledIcon, QuestionMarkCircledIcon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <Flex gap="4" align="center" p="4">
      <Tooltip content="Your account settings" side="bottom">
        <IconButton variant="soft" aria-label="Info">
          <InfoCircledIcon />
        </IconButton>
      </Tooltip>

      <Tooltip
        content="This action cannot be undone"
        delayDuration={0}
        side="right"
        sideOffset={8}
      >
        <Button color="red" variant="soft">Delete account</Button>
      </Tooltip>

      <Tooltip content={<span>Learn more at <a href="/docs">docs</a></span>}> 
        <QuestionMarkCircledIcon color="gray" />
      </Tooltip>
    </Flex>
  );
}
```

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

### Render structured data in a Table

Source: https://context7.com/radix-ui/themes/llms.txt

Use the Table component for displaying data in a grid format. Configure table variant, size, and layout. Rows can contain headers and cells, with cells supporting components like Badges.

```tsx
import * as Table from '@radix-ui/themes/components/table';
// or namespace: import { Table } from '@radix-ui/themes';

import { Badge } from '@radix-ui/themes';

const users = [
  { id: 1, name: 'Alice Johnson', email: 'alice@example.com', role: 'Admin', status: 'active' },
  { id: 2, name: 'Bob Smith', email: 'bob@example.com', role: 'Editor', status: 'inactive' },
  { id: 3, name: 'Carol White', email: 'carol@example.com', role: 'Viewer', status: 'active' },
];

export default function Example() {
  return (
    <Table.Root variant="surface" size="2" layout="auto">
      <Table.Header>
        <Table.Row>
          <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
          <Table.ColumnHeaderCell>Email</Table.ColumnHeaderCell>
          <Table.ColumnHeaderCell>Role</Table.ColumnHeaderCell>
          <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
        </Table.Row>
      </Table.Header>
      <Table.Body>
        {users.map((user) => (
          <Table.Row key={user.id}>
            <Table.RowHeaderCell>{user.name}</Table.RowHeaderCell>
            <Table.Cell>{user.email}</Table.Cell>
            <Table.Cell>{user.role}</Table.Cell>
            <Table.Cell>
              <Badge color={user.status === 'active' ? 'green' : 'gray'} variant="soft">
                {user.status}
              </Badge>
            </Table.Cell>
          </Table.Row>
        ))}
      </Table.Body>
    </Table.Root>
  );
}
```

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

### Clean Build Artifacts

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Removes all generated build artifacts and temporary files from the repository.

```bash
pnpm clean
```

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

### Displaying Inline Alert Messages with Callout

Source: https://context7.com/radix-ui/themes/llms.txt

Use Callout components for prominent informational messages. They require importing the Callout component and relevant icons. Supports different colors, variants, and sizes.

```tsx
import * as Callout from '@radix-ui/themes/components/callout';
// or:
import { Callout } from '@radix-ui/themes'; // namespace import

import { InfoCircledIcon, ExclamationTriangleIcon, CheckCircledIcon } from '@radix-ui/react-icons';

export default function Example() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: 12, padding: 24, maxWidth: 480 }}>
      <Callout.Root color="blue">
        <Callout.Icon><InfoCircledIcon /></Callout.Icon>
        <Callout.Text>Your session will expire in 10 minutes.</Callout.Text>
      </Callout.Root>

      <Callout.Root color="red" variant="surface" size="2">
        <Callout.Icon><ExclamationTriangleIcon /></Callout.Icon>
        <Callout.Text>
          <strong>Error:</strong> Could not connect to the database. Please try again.
        </Callout.Text>
      </Callout.Root>

      <Callout.Root color="green" variant="soft">
        <Callout.Icon><CheckCircledIcon /></Callout.Icon>
        <Callout.Text>Deployment successful. Changes are now live.</Callout.Text>
      </Callout.Root>
    </div>
  );
}
```

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

### Run Visual Regression Tests

Source: https://github.com/radix-ui/themes/blob/main/AGENTS.md

Executes Playwright visual regression tests to detect unintended UI changes.

```bash
pnpm test:vr
```

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

### Tabs Component for Tabbed Content

Source: https://context7.com/radix-ui/themes/llms.txt

Illustrates the structure of the Radix UI Tabs component, including Tabs.Root, Tabs.List, Tabs.Trigger, and Tabs.Content. Use for organizing content into navigable sections.

```tsx
import * as Tabs from '@radix-ui/themes/components/tabs';
// or namespace: import { Tabs } from '@radix-ui/themes';

import { Box, Text, Flex } from '@radix-ui/themes';

export default function Example() {
  return (
    <Box maxWidth="480px" p="4">
      <Tabs.Root defaultValue="overview" size="2">
        <Tabs.List color="indigo">
          <Tabs.Trigger value="overview">Overview</Tabs.Trigger>
          <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
          <Tabs.Trigger value="billing">Billing</Tabs.Trigger>
        </Tabs.List>

        <Box pt="4">
          <Tabs.Content value="overview">
            <Text size="2">Project statistics and recent activity.</Text>
          </Tabs.Content>
          <Tabs.Content value="settings">
            <Flex direction="column" gap="2">
              <Text size="2" weight="bold">Project name</Text>
              <Text size="2" color="gray">my-awesome-project</Text>
            </Flex>
          </Tabs.Content>
          <Tabs.Content value="billing">
            <Text size="2">Manage your subscription and invoices.</Text>
          </Tabs.Content>
        </Box>
      </Tabs.Root>
    </Box>
  );
}
```

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

### useThemeContext Hook

Source: https://context7.com/radix-ui/themes/llms.txt

A React hook that returns the current theme context values and change handlers. It must be used inside a `<Theme>` tree.

```APIDOC
## useThemeContext Hook

### Description

A React hook that returns the current theme context values and change handlers. Must be used inside a `<Theme>` tree.

### Usage

```tsx
import { Theme, useThemeContext, Button, Flex, Text } from '@radix-ui/themes';

function ThemeInfo() {
  const {
    appearance,
    accentColor,
    radius,
    scaling,
    onAppearanceChange,
  } = useThemeContext();

  return (
    <Flex direction="column" gap="2">
      <Text size="2">Appearance: {appearance}</Text>
      <Text size="2">Accent: {accentColor}</Text>
      <Text size="2">Radius: {radius}</Text>
      <Text size="2">Scaling: {scaling}</Text>
      <Button onClick={() => onAppearanceChange(appearance === 'light' ? 'dark' : 'light')}> 
        Toggle appearance
      </Button>
    </Flex>
  );
}

export default function App() {
  return (
    <Theme accentColor="teal">
      <ThemeInfo />
    </Theme>
  );
}
```

### Returns

An object containing the current theme values: `appearance`, `accentColor`, `radius`, `scaling`, and a function `onAppearanceChange` to toggle the appearance.
```

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

### Implementing Dropdown Selectors with Select

Source: https://context7.com/radix-ui/themes/llms.txt

Build composable dropdown selectors using the Select component, including root, trigger, content, items, groups, labels, and separators. Manage the selected value using React state.

```tsx
import * as Select from '@radix-ui/themes/components/select';
// or namespace: import { Select } from '@radix-ui/themes';

import { Flex, Text } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [framework, setFramework] = React.useState('nextjs');

  return (
    <Flex gap="4" align="center" p="4" wrap="wrap">
      <Select.Root value={framework} onValueChange={setFramework} size="2">
        <Select.Trigger placeholder="Choose framework…" variant="surface" radius="medium" />
        <Select.Content>
          <Select.Group>
            <Select.Label>React</Select.Label>
            <Select.Item value="nextjs">Next.js</Select.Item>
            <Select.Item value="remix">Remix</Select.Item>
            <Select.Item value="vite">Vite</Select.Item>
          </Select.Group>
          <Select.Separator />
          <Select.Group>
            <Select.Label>Vue</Select.Label>
            <Select.Item value="nuxt">Nuxt</Select.Item>
            <Select.Item value="quasar">Quasar</Select.Item>
          </Select.Group>
        </Select.Content>
      </Select.Root>
      <Text size="2">Selected: {framework}</Text>
    </Flex>
  );
}
```

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

### ThemePanel Component

Source: https://context7.com/radix-ui/themes/llms.txt

A floating UI panel that allows users to customize theme settings at runtime. It can be toggled with the 'T' key or programmatically and includes a 'Copy Theme' button.

```APIDOC
## ThemePanel Component

### Description

A floating UI panel (toggled with the `T` key or programmatically) that lets users pick accent color, gray color, appearance, radius, scaling, and panel background at runtime, with a "Copy Theme" button that writes the resulting `<Theme ...>` JSX to the clipboard.

### Props

- **defaultOpen** (boolean, default `false`): Controls whether the panel is open by default.

### Example

```tsx
import { Theme, ThemePanel, Button, Flex } from '@radix-ui/themes';

export default function App() {
  return (
    <Theme>
      <Flex p="6" gap="3">
        <Button>Primary</Button>
        <Button variant="soft">Soft</Button>
        <Button variant="outline">Outline</Button>
      </Flex>
      <ThemePanel defaultOpen={false} />
    </Theme>
  );
}
```
```

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

### Tabs

Source: https://context7.com/radix-ui/themes/llms.txt

Accessible tabbed navigation composed of `Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, and `Tabs.Content`. Allows for structured content display with customizable list and trigger props.

```APIDOC
## Tabs — Tabbed content panels

Accessible tabbed navigation using `Tabs.Root`, `Tabs.List`, `Tabs.Trigger`, and `Tabs.Content`.

### Props:
**`Tabs.Root` props:** `defaultValue`, `value`, `onValueChange`, `orientation`. **`Tabs.List` props:** `size` (`"1"–"2"`), `color`, `highContrast`. **`Tabs.Content` props:** `value` (required).
```

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

### Display labeled data with DataList

Source: https://context7.com/radix-ui/themes/llms.txt

Utilize the DataList component for semantic key-value pairs. Configure orientation, size, and trim behavior. Labels and values can include other components like Links and Badges.

```tsx
import * as DataList from '@radix-ui/themes/components/data-list';
// or namespace: import { DataList } from '@radix-ui/themes';

import { Badge, Link, Code } from '@radix-ui/themes';

const user = {
  name: 'Jane Doe',
  email: 'jane@example.com',
  role: 'Admin',
  status: 'active',
  joined: '2022-03-15',
  userId: 'usr_8f2a9c1d',
};

export default function Example() {
  return (
    <DataList.Root size="2" orientation="horizontal" style={{ maxWidth: 360, padding: 24 }}>
      <DataList.Item>
        <DataList.Label color="gray">Name</DataList.Label>
        <DataList.Value>{user.name}</DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label color="gray">Email</DataList.Label>
        <DataList.Value>
          <Link href={`mailto:${user.email}`} size="2">{user.email}</Link>
        </DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label color="gray">Status</DataList.Label>
        <DataList.Value>
          <Badge color="green" variant="soft">{user.status}</Badge>
        </DataList.Value>
      </DataList.Item>
      <DataList.Item>
        <DataList.Label color="gray">User ID</DataList.Label>
        <DataList.Value>
          <Code size="2">{user.userId}</Code>
        </DataList.Value>
      </DataList.Item>
    </DataList.Root>
  );
}
```

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

### Progress

Source: https://context7.com/radix-ui/themes/llms.txt

A visual indicator for task completion, which can be determinate or indeterminate. It offers customization for value, max, duration, size, variant, and color.

```APIDOC
## Progress — Progress bar

A visual indicator for task completion with optional indeterminate animation.

### Props:
`value` (omit for indeterminate), `max` (default 100), `duration` (CSS time string for indeterminate animation), `size` (`"1"–"3"`), `variant` (`"classic" | "surface" | "soft"`), `color`, `radius`, `highContrast`.
```

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

### Slider with Single and Multi-Thumb Modes

Source: https://context7.com/radix-ui/themes/llms.txt

Demonstrates the Radix UI Slider component in both single-thumb and range (two-thumb) configurations. Use to control numerical values within a defined range.

```tsx
import { Slider, Flex, Text } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [volume, setVolume] = React.useState([60]);
  const [range, setRange] = React.useState([20, 80]);

  return (
    <Flex direction="column" gap="5" maxWidth="300px" p="6">
      {/* Single-thumb */}
      <Flex direction="column" gap="2">
        <Text size="2">Volume: {volume[0]}%</Text>
        <Slider
          value={volume}
          onValueChange={setVolume}
          min={0}
          max={100}
          step={1}
          size="2"
          color="indigo"
        />
      </Flex>

      {/* Range (two thumbs) */}
      <Flex direction="column" gap="2">
        <Text size="2">Price: ${range[0]} – ${range[1]}</Text>
        <Slider
          value={range}
          onValueChange={setRange}
          min={0}
          max={200}
          step={5}
          size="1"
          color="green"
        />
      </Flex>
    </Flex>
  );
}
```

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

### Slider

Source: https://context7.com/radix-ui/themes/llms.txt

A draggable range slider that supports single and multi-thumb modes. It can be customized with various props for min, max, step, size, color, and more.

```APIDOC
## Slider — Range input

A draggable range slider supporting single and multi-thumb modes.

### Props:
`value`, `defaultValue`, `onValueChange`, `min`, `max`, `step`, `size` (`"1"–"3"`), `variant` (`"classic" | "surface" | "soft"`), `color`, `radius`, `highContrast`, `inverted`, `orientation`.
```

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

### SegmentedControl for Mutually Exclusive Options

Source: https://context7.com/radix-ui/themes/llms.txt

Demonstrates the Radix UI SegmentedControl component for selecting one option from a group. It functions similarly to radio buttons but is presented as a segmented button group.

```tsx
import * as SegmentedControl from '@radix-ui/themes/components/segmented-control';
// or namespace: import { SegmentedControl } from '@radix-ui/themes';

import { Flex } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [view, setView] = React.useState('grid');

  return (
    <Flex direction="column" gap="4" p="4">
      <SegmentedControl.Root
        value={view}
        onValueChange={setView}
        size="2"
        radius="medium"
      >
        <SegmentedControl.Item value="list">List</SegmentedControl.Item>
        <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
        <SegmentedControl.Item value="kanban">Kanban</SegmentedControl.Item>
      </SegmentedControl.Root>
    </Flex>
  );
}
```

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

### Checkbox with Controlled, Indeterminate, and Uncontrolled States

Source: https://context7.com/radix-ui/themes/llms.txt

The Checkbox component supports controlled and uncontrolled states, as well as an indeterminate checked value. Use onCheckedChange for controlled states and defaultChecked for uncontrolled ones.

```tsx
import { Checkbox, Flex, Text } from '@radix-ui/themes';
import * as React from 'react';

export default function Example() {
  const [checked, setChecked] = React.useState<boolean | 'indeterminate'>(false);

  return (
    <Flex direction="column" gap="3" p="4">
      {/* Controlled */}
      <Flex as="label" gap="2" align="center">
        <Checkbox
          checked={checked}
          onCheckedChange={(val) => setChecked(val)}
          size="2"
          color="indigo"
        />
        <Text size="2">Accept terms and conditions</Text>
      </Flex>

      {/* Indeterminate state */}
      <Flex as="label" gap="2" align="center">
        <Checkbox checked="indeterminate" size="2" />
        <Text size="2">Select all (partial)</Text>
      </Flex>

      {/* Uncontrolled with default */}
      <Flex as="label" gap="2" align="center">
        <Checkbox defaultChecked size="1" variant="surface" />
        <Text size="2">Receive newsletter</Text>
      </Flex>
    </Flex>
  );
}
```

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

### SegmentedControl

Source: https://context7.com/radix-ui/themes/llms.txt

A mutually exclusive option selector presented as a segmented button group, similar to radio buttons. Supports value, defaultValue, onValueChange, size, radius, and disabled states.

```APIDOC
## SegmentedControl — Button group selector

A mutually exclusive option selector, similar to radio buttons but displayed as a segmented button group.

### Props:
**`SegmentedControl.Root` props:** `size` (`"1"–"3"`), `value`, `defaultValue`, `onValueChange`, `radius`, `disabled`. **`SegmentedControl.Item` props:** `value` (required).
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.