Radix Primitives

https://www.radix-ui.com/primitives/docs
Admin
Radix Primitives is an open-source, low-level UI component library for building accessible,...
Tokens:99,362
Snippets:990
Trust Score:9.8
Update:2 weeks ago
Show doc for...
Tokens:
Raw
### Install radix-ui

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

Install the Radix Primitives package from the command line.

```bash
npm install radix-ui@latest
```

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

### Install and import from radix-ui package

Source: https://www.radix-ui.com/primitives/docs/overview/introduction

Install the unified radix-ui package and import the primitives you need. Recommended for simplicity, to prevent version conflicts or duplication, and to manage updates easily. The package is tree-shakeable, so only the components you use are shipped.

```bash
npm install radix-ui
```

```tsx
import { Dialog, DropdownMenu, Tooltip } from "radix-ui";
```

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

### Install radix-ui package

Source: https://www.radix-ui.com/primitives/docs

Install the unified radix-ui package, which is tree-shakeable and recommended for incremental adoption.

```bash
npm install radix-ui
```

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

### With grouped items

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to use the Group and Label parts to group items.

```APIDOC
## [With grouped items]

### Description
Use the `Group` and `Label` parts to group items in a section.

### Example
```jsx
<Select.Root>
  <Select.Trigger>…</Select.Trigger>

  <Select.Portal>
    <Select.Content>
      <Select.Viewport>
        <Select.Group>
          <Select.Label>Label</Select.Label>

          <Select.Item>…</Select.Item>

          <Select.Item>…</Select.Item>

          <Select.Item>…</Select.Item>
        </Select.Group>
      </Select.Viewport>
    </Select.Content>
  </Select.Portal>
</Select.Root>
```

```

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

### Install individual Radix primitives

Source: https://www.radix-ui.com/primitives/docs

Install individual primitives separately. Update all Radix packages together to prevent duplication of shared dependencies and keep bundle size down.

```bash
npm install @radix-ui/react-dialog

npm install @radix-ui/react-dropdown-menu

npm install @radix-ui/react-tooltip
```

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

### With a placeholder

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to use a placeholder and style the trigger when no value is selected.

```APIDOC
## [With a placeholder]

### Description
You can use the `placeholder` prop on `Value` for when the select has no value. There's also a `data-placeholder` attribute on `Trigger` to help with styling.

### Example
```jsx
import { Select } from "radix-ui";

import "./styles.css";

export default () => (
  <Select.Root>
    <Select.Trigger className="SelectTrigger">
      <Select.Value placeholder="Pick an option" />

      <Select.Icon />
    </Select.Trigger>

    <Select.Portal>
      <Select.Content>…</Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

```css
.SelectTrigger[data-placeholder] {
  color: "gainsboro";
}
```

```

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

### Import and render Portal.Root

Source: https://www.radix-ui.com/primitives/docs/utilities/portal.md

Import the Portal component and render its Root. This is the minimal setup for using the portal primitive.

```jsx
import { Portal } from "radix-ui";

export default () => <Portal.Root />;
```

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

### With separators

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to use the Separator part to add separators between items.

```APIDOC
## [With separators]

### Description
Use the `Separator` part to add a separator between items.

### Example
```jsx
<Select.Root>
  <Select.Trigger>…</Select.Trigger>

  <Select.Portal>
    <Select.Content>
      <Select.Viewport>
        <Select.Item>…</Select.Item>

        <Select.Item>…</Select.Item>

        <Select.Item>…</Select.Item>

        <Select.Separator />

        <Select.Item>…</Select.Item>

        <Select.Item>…</Select.Item>
      </Select.Viewport>
    </Select.Content>
  </Select.Portal>
</Select.Root>
```

```

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

### Import individual Radix primitives

Source: https://www.radix-ui.com/primitives/docs

Import individual primitives when installed separately.

```tsx
import * as Dialog from "@radix-ui/react-dialog";

import * as DropdownMenu from "@radix-ui/react-dropdown-menu";

import * as Tooltip from "@radix-ui/react-tooltip";
```

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

### Configure globally with Tooltip.Provider

Source: https://www.radix-ui.com/primitives/docs/components/tooltip.md

Use the Provider to set delayDuration and skipDelayDuration for all tooltips. This example sets delayDuration to 800ms and skipDelayDuration to 500ms.

```jsx
import { Tooltip } from "radix-ui";

export default () => (
  <Tooltip.Provider delayDuration={800} skipDelayDuration={500}>
    <Tooltip.Root>
      <Tooltip.Trigger>…</Tooltip.Trigger>

      <Tooltip.Content>…</Tooltip.Content>
    </Tooltip.Root>

    <Tooltip.Root>
      <Tooltip.Trigger>…</Tooltip.Trigger>

      <Tooltip.Content>…</Tooltip.Content>
    </Tooltip.Root>
  </Tooltip.Provider>
);
```

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

### Basic example with icon button

Source: https://www.radix-ui.com/primitives/docs/utilities/visually-hidden.md

Use the visually hidden primitive inside a button to provide an accessible label for an icon-only button.

```jsx
import { VisuallyHidden } from "radix-ui";

import { GearIcon } from "@radix-ui/react-icons";

export default () => (
  <button>
    <GearIcon />

    <VisuallyHidden.Root>Settings</VisuallyHidden.Root>
  </button>
);
```

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

### With disabled items

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to style disabled items using the data-disabled attribute.

```APIDOC
## [With disabled items]

### Description
You can add special styles to disabled items via the `data-disabled` attribute.

### Example
```jsx
import { Select } from "radix-ui";

import "./styles.css";

export default () => (
  <Select.Root>
    <Select.Trigger>…</Select.Trigger>

    <Select.Portal>
      <Select.Content>
        <Select.Viewport>
          <Select.Item className="SelectItem" disabled>
            …
          </Select.Item>

          <Select.Item>…</Select.Item>

          <Select.Item>…</Select.Item>
        </Select.Viewport>
      </Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

```css
.SelectItem[data-disabled] {
  color: "gainsboro";
}
```

```

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

### React Spring animation with forceMount

Source: https://www.radix-ui.com/primitives/docs/guides/animation

React Spring example for animating a Dialog. Uses `forceMount` and `asChild` to delegate mounting/unmounting to the animation library, conditionally rendering Overlay and Content based on `useTransition` state.

```jsx
import { Dialog } from "radix-ui";

import { useTransition, animated, config } from "react-spring";

function Example() {
  const [open, setOpen] = React.useState(false);

  const transitions = useTransition(open, {
    from: { opacity: 0, y: -10 },

    enter: { opacity: 1, y: 0 },

    leave: { opacity: 0, y: 10 },

    config: config.stiff,
  });

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>

      {transitions((styles, item) =>
        item ? (
          <>
            <Dialog.Overlay forceMount asChild>
              <animated.div
                style={{
                  opacity: styles.opacity,
                }}
              />
            </Dialog.Overlay>

            <Dialog.Content forceMount asChild>
              <animated.div style={styles}>
                <h1>Hello from inside the Dialog!</h1>

                <Dialog.Close>close</Dialog.Close>
              </animated.div>
            </Dialog.Content>
          </>
        ) : null,
      )}
    </Dialog.Root>
  );
}
```

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

### Select Anatomy Example

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Shows how to import and compose all Select parts: Root, Trigger, Value, Icon, Portal, Content, ScrollUpButton, Viewport, Item, ItemText, ItemIndicator, Group, Label, Separator, ScrollDownButton, and Arrow.

```jsx
import { Select } from "radix-ui";

export default () => (
  <Select.Root>
    <Select.Trigger>
      <Select.Value />

      <Select.Icon />
    </Select.Trigger>

    <Select.Portal>
      <Select.Content>
        <Select.ScrollUpButton />

        <Select.Viewport>
          <Select.Item>
            <Select.ItemText />

            <Select.ItemIndicator />
          </Select.Item>

          <Select.Group>
            <Select.Label />

            <Select.Item>
              <Select.ItemText />

              <Select.ItemIndicator />
            </Select.Item>
          </Select.Group>

          <Select.Separator />
        </Select.Viewport>

        <Select.ScrollDownButton />

        <Select.Arrow />
      </Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

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

### Slider.Root with onMouseDown and onMouseUp (won't fire)

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

This example will not fire onMouseDown or onMouseUp due to a known limitation in the Slider implementation. Use pointer events (onPointerDown, onPointerUp) instead for cross-platform handling.

```jsx
<Slider.Root
  onMouseDown={() => console.log("onMouseDown")}
  onMouseUp={() => console.log("onMouseUp")}
>
  …
</Slider.Root>
```

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

### Constrain the content size

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to constrain the content size using CSS custom properties.

```APIDOC
## [Constrain the content size]

### Description
When using `position="popper"` on `Select.Content`, you may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport. We expose several CSS custom properties such as `--radix-select-trigger-width` and `--radix-select-content-available-height` to support this. Use them to constrain the content dimensions.

### Example
```jsx
import { Select } from "radix-ui";

import "./styles.css";

export default () => (
  <Select.Root>
    <Select.Trigger>…</Select.Trigger>

    <Select.Portal>
      <Select.Content className="SelectContent" position="popper" sideOffset={5}>
        …
      </Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

```css
.SelectContent {
  width: var(--radix-select-trigger-width);

  max-height: var(--radix-select-content-available-height);
}
```

```

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

### Change the positioning mode

Source: https://www.radix-ui.com/primitives/docs/components/select.md

Example showing how to change the positioning mode of the Select content.

```APIDOC
## [Change the positioning mode]

### Description
By default, `Select` will behave similarly to a native MacOS menu by positioning `Select.Content` relative to the active item. If you would prefer an alternative positioning approach similar to `Popover` or `DropdownMenu` then you can set `position` to `popper` and make use of additional alignment options such as `side`, `sideOffset` and more.

### Example
```jsx
import { Select } from "radix-ui";

export default () => (
  <Select.Root>
    <Select.Trigger>…</Select.Trigger>

    <Select.Portal>
      <Select.Content position="popper" sideOffset={5}>
        …
      </Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

```

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

### Provide alternative action with altText prop

Source: https://www.radix-ui.com/primitives/docs/components/toast.md

Demonstrates using the `altText` prop on `Toast.Action` to provide an alternative action for screen reader users. The first example uses a background toast with a permanent action; the second uses a foreground toast with a custom hotkey and a longer duration (10000 ms) to give users ample time.

```jsx
<Toast.Root type="background">

	<Toast.Title>Upgrade Available!</Toast.Title>

	<Toast.Description>We've just released Radix 1.0.</Toast.Description>

	<Toast.Action altText="Goto account settings to upgrade">

		Upgrade

	</Toast.Action>

	<Toast.Close>Dismiss</Toast.Close>

</Toast.Root>



<Toast.Root type="foreground" duration={10000}>

	<Toast.Description>File removed successfully.</Toast.Description>

	<Toast.Action altText="Undo (Alt+U)">

		Undo <kbd>Alt</kbd>+<kbd>U</kbd>

	</Toast.Action>

	<Toast.Close>Dismiss</Toast.Close>

</Toast.Root>
```

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

### Import and render Direction.Provider

Source: https://www.radix-ui.com/primitives/docs/utilities/direction-provider.md

Import the Direction component from radix-ui and render the provider without a dir prop. This is the basic setup for the Direction Provider.

```jsx
import { Direction } from "radix-ui";

export default () => <Direction.Provider />;
```

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

### Accordion Anatomy Example

Source: https://www.radix-ui.com/primitives/docs/components/accordion.md

Shows the basic structure of the Accordion component with all its parts: Root, Item, Header, Trigger, and Content. Import the Accordion from the "radix-ui" package and compose the parts as shown.

```jsx
import { Accordion } from "radix-ui";

export default () => (
  <Accordion.Root>
    <Accordion.Item>
      <Accordion.Header>
        <Accordion.Trigger />
      </Accordion.Header>

      <Accordion.Content />
    </Accordion.Item>
  </Accordion.Root>
);
```

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

### Advanced animation with Viewport and Content

Source: https://www.radix-ui.com/primitives/docs/components/navigation-menu.md

Advanced animation example using the exposed --radix-navigation-menu-viewport-[width|height] CSS variables and data-motion attributes to animate Viewport size and Content position based on enter/exit direction. The CSS uses position: absolute on the content and keyframes to create smooth overlapping effects when moving between items.

```jsx
// index.jsx

import { NavigationMenu } from "radix-ui";

import "./styles.css";

export default () => (
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item>
        <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>

        <NavigationMenu.Content className="NavigationMenuContent">
          Item one content
        </NavigationMenu.Content>
      </NavigationMenu.Item>

      <NavigationMenu.Item>
        <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>

        <NavigationMenu.Content className="NavigationMenuContent">
          Item two content
        </NavigationMenu.Content>
      </NavigationMenu.Item>
    </NavigationMenu.List>

    <NavigationMenu.Viewport className="NavigationMenuViewport" />
  </NavigationMenu.Root>
);
```

```css
/* styles.css */

.NavigationMenuContent {
  position: absolute;

  top: 0;

  left: 0;

  animation-duration: 250ms;

  animation-timing-function: ease;
}

.NavigationMenuContent[data-motion="from-start"] {
  animation-name: enterFromLeft;
}

.NavigationMenuContent[data-motion="from-end"] {
  animation-name: enterFromRight;
}

.NavigationMenuContent[data-motion="to-start"] {
  animation-name: exitToLeft;
}

.NavigationMenuContent[data-motion="to-end"] {
  animation-name: exitToRight;
}

.NavigationMenuViewport {
  position: relative;

  width: var(--radix-navigation-menu-viewport-width);

  height: var(--radix-navigation-menu-viewport-height);

  transition:
    width,
    height,
    250ms ease;
}

@keyframes enterFromRight {
  from {
    opacity: 0;

    transform: translateX(200px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes enterFromLeft {
  from {
    opacity: 0;

    transform: translateX(-200px);
  }

  to {
    opacity: 1;

    transform: translateX(0);
  }
}

@keyframes exitToRight {
  from {
    opacity: 1;

    transform: translateX(0);
  }

  to {
    opacity: 0;

    transform: translateX(200px);
  }
}

@keyframes exitToLeft {
  from {
    opacity: 1;

    transform: translateX(0);
  }

  to {
    opacity: 0;

    transform: translateX(-200px);
  }
}
```

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

### Usage of Button with asChild

Source: https://www.radix-ui.com/primitives/docs/utilities/slot.md

Usage example of the Button component with asChild, rendering an anchor element instead of a button.

```jsx
import { Button } from "./your-button";

export default () => (
  <Button asChild>
    <a href="/contact">Contact</a>
  </Button>
);
```

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

### Controlled ContextMenu.Root with open and onOpenChange

Source: https://www.radix-ui.com/primitives/docs/overview/releases

Shows the new controlled `open` prop on `ContextMenu.Root`. Use `open` for reading state and `onOpenChange` to close programmatically; opening programmatically is discouraged because positioning depends on user interaction.

```jsx
function ControlledContextMenu() {

	const [open, setOpen] = React.useState(false);

	return (

		<ContextMenu.Root open={open} onOpenChange={setOpen}>

			<ContextMenu.Trigger>Open</ContextMenu.Trigger>

			<ContextMenu.Content>

				<button type="button" onClick={() => setOpen(false)}>

					Close me

				</button>

				<ContextMenu.Item>Item 1</ContextMenu.Item>

				<ContextMenu.Item>Item 2</ContextMenu.Item>

			</ContextMenu.Content>

		</ContextMenu.Root>

	);

}
```

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

### Import VisuallyHidden component

Source: https://www.radix-ui.com/primitives/docs/utilities/visually-hidden.md

Import the VisuallyHidden component from radix-ui and render its Root.

```jsx
import { VisuallyHidden } from "radix-ui";

export default () => <VisuallyHidden.Root />;
```

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

### Prevent thumb overlap with minStepsBetweenThumbs

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

Use `minStepsBetweenThumbs` to avoid thumbs with equal values. The example sets `step={10}` and `minStepsBetweenThumbs={1}`.

```jsx
import { Slider } from "radix-ui";

export default () => (
  <Slider.Root defaultValue={[25, 75]} step={10} minStepsBetweenThumbs={1}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />

    <Slider.Thumb />
  </Slider.Root>
);
```

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

### Import and render Separator.Root

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

Import the Separator component from the radix-ui package and render a Separator.Root element. This is the basic usage example from the Anatomy section.

```jsx
import { Separator } from "radix-ui";

export default () => <Separator.Root />;
```

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

### Provider

Source: https://www.radix-ui.com/primitives/docs/components/tooltip.md

Wraps your app to provide global functionality to your tooltips. Accepts delayDuration, skipDelayDuration, and disableHoverableContent props.

```APIDOC
## Provider

### Description
Wraps your app to provide global functionality to your tooltips.

### Props

| Prop | Type | Default |
| --- | --- | --- |
| `delayDuration` | `number` | `700` |
| `skipDelayDuration` | `number` | `300` |
| `disableHoverableContent` | `boolean` | No default value |

```

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

### Root

Source: https://www.radix-ui.com/primitives/docs/components/tooltip.md

Contains all the parts of a tooltip. Manages open state and delay behavior.

```APIDOC
## Root

### Description
Contains all the parts of a tooltip.

### Props

| Prop | Type | Default |
| --- | --- | --- |
| `defaultOpen` | `boolean` | No default value |
| `open` | `boolean` | No default value |
| `onOpenChange` | `function` | No default value |
| `delayDuration` | `number` | `700` |
| `disableHoverableContent` | `boolean` | No default value |

```

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

### Dropdown Menu with Complex Items

Source: https://www.radix-ui.com/primitives/docs/components/dropdown-menu.md

Add extra decorative elements, such as images, inside the Item parts. The example shows two items with images.

```jsx
import { DropdownMenu } from "radix-ui";

export default () => (
  <DropdownMenu.Root>
    <DropdownMenu.Trigger>…</DropdownMenu.Trigger>

    <DropdownMenu.Portal>
      <DropdownMenu.Content>
        <DropdownMenu.Item>
          <img src="…" />
          Adolfo Hess
        </DropdownMenu.Item>

        <DropdownMenu.Item>
          <img src="…" />
          Miyah Myles
        </DropdownMenu.Item>
      </DropdownMenu.Content>
    </DropdownMenu.Portal>
  </DropdownMenu.Root>
);
```

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

### Define step size with step prop

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

Use the `step` prop to increase the stepping interval. The example sets `step={10}` on the slider root.

```jsx
import { Slider } from "radix-ui";

export default () => (
  <Slider.Root defaultValue={[50]} step={10}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />
  </Slider.Root>
);
```

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

### Import and structure Popover parts

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

Import and structure the Popover parts. The first block shows the full component using the main radix-ui entrypoint. The second block shows importing from the subpath radix-ui/popover, which can help some bundlers tree-shake more effectively.

```jsx
// index.jsx

import * as React from "react";

import { Popover } from "radix-ui";

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger>More info</Popover.Trigger>

    <Popover.Portal>
      <Popover.Content>
        Some more info…
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;
```

```jsx
import * as Popover from "radix-ui/popover";
```

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

### Styling based on validity with data attributes

Source: https://www.radix-ui.com/primitives/docs/components/form.md

Use data-valid and data-invalid attributes to style components. This example shows styling the Label part with CSS.

```jsx
//index.jsx

import * as React from "react";

import { Form } from "radix-ui";

export default () => (
  <Form.Root>
    <Form.Field name="email">
      <Form.Label className="FormLabel">Email</Form.Label>

      <Form.Control type="email" />
    </Form.Field>
  </Form.Root>
);
```

```css
/* styles.css */

.FormLabel[data-invalid] {
  color: red;
}

.FormLabel[data-valid] {
  color: green;
}
```

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

### Toolbar.Root

Source: https://www.radix-ui.com/primitives/docs/components/toolbar.md

Contains all the toolbar component parts. Supports orientation, direction, and loop props for keyboard navigation.

```APIDOC
## Toolbar.Root

### Description
Contains all the toolbar component parts.

### Props
- `asChild` (boolean) - Default: `false`
- `orientation` (enum) - Default: `"horizontal"`
- `dir` (enum) - No default value
- `loop` (boolean) - Default: `true`

### Data Attributes
- `[data-orientation]` - Values: `"vertical" | "horizontal"`

```

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

### Import and render Toast components

Source: https://www.radix-ui.com/primitives/docs/components/toast.md

Import the Toast component from radix-ui and render the provider, root, title, description, action, close, and viewport components in the required structure.

```jsx
import { Toast } from "radix-ui";

export default () => (
  <Toast.Provider>
    <Toast.Root>
      <Toast.Title />

      <Toast.Description />

      <Toast.Action />

      <Toast.Close />
    </Toast.Root>

    <Toast.Viewport />
  </Toast.Provider>
);
```

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

### Form.Message with custom children

Source: https://www.radix-ui.com/primitives/docs/components/form.md

Provide your own children to Form.Message for a more meaningful message, useful for internationalization. This example yields "Please provide a name".

```jsx
// will yield "Please provide a name"

<Form.Message match="valueMissing">Please provide a name</Form.Message>
```

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

### Menubar.SubContent

Source: https://www.radix-ui.com/primitives/docs/components/menubar.md

Documentation for the Menubar.SubContent component, including its props, data attributes, and CSS variables.

```APIDOC
## Menubar.SubContent

### Description
The component that pops out when a submenu is open. Must be rendered inside `Menubar.Sub`.

### Props

| Prop | Type | Default |
| --- | --- | --- |
| `asChild` | `boolean` | `false` |
| `loop` | `boolean` | `false` |
| `onEscapeKeyDown` | `function` | No default value |
| `onPointerDownOutside` | `function` | No default value |
| `onFocusOutside` | `function` | No default value |
| `onInteractOutside` | `function` | No default value |
| `forceMount` | `boolean` | No default value |
| `sideOffset` | `number` | `0` |
| `align` | `enum` | `"start"` |
| `alignOffset` | `number` | `0` |
| `avoidCollisions` | `boolean` | `true` |
| `collisionBoundary` | `Boundary` | `[]` |
| `collisionPadding` | `number \| Padding` | `0` |
| `arrowPadding` | `number` | `0` |
| `sticky` | `enum` | `"partial"` |
| `hideWhenDetached` | `boolean` | `false` |

### Data Attributes

| Data attribute | Values |
| --- | --- |
| `[data-state]` | `"open" \| "closed"` |
| `[data-side]` | `"left" \| "right" \| "bottom" \| "top"` |
| `[data-align]` | `"start" \| "end" \| "center"` |
| `[data-orientation]` | `"vertical" \| "horizontal"` |

### CSS Variables

| CSS Variable | Description |
| --- | --- |
| `--radix-menubar-content-transform-origin` | The `transform-origin` computed from the content and arrow positions/offsets |
| `--radix-menubar-content-available-width` | The remaining width between the trigger and the boundary edge |
| `--radix-menubar-content-available-height` | The remaining height between the trigger and the boundary edge |
| `--radix-menubar-trigger-width` | The width of the trigger |
| `--radix-menubar-trigger-height` | The height of the trigger |
```

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

### Add separators with Menubar.Separator

Source: https://www.radix-ui.com/primitives/docs/components/menubar.md

Add separators between menu items by placing Menubar.Separator elements inside Menubar.Content. This example shows two separators dividing three items.

```jsx
<Menubar.Root>
  <Menubar.Menu>
    <Menubar.Trigger>…</Menubar.Trigger>

    <Menubar.Portal>
      <Menubar.Content>
        <Menubar.Item>…</Menubar.Item>

        <Menubar.Separator />

        <Menubar.Item>…</Menubar.Item>

        <Menubar.Separator />

        <Menubar.Item>…</Menubar.Item>
      </Menubar.Content>
    </Menubar.Portal>
  </Menubar.Menu>
</Menubar.Root>
```

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

### Import and compose Progress.Root and Progress.Indicator

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

Import the Progress component from 'radix-ui' and compose the Root and Indicator parts. The Root contains all progress parts, and the Indicator shows the progress visually and makes it accessible.

```jsx
import { Progress } from "radix-ui";

export default () => (
  <Progress.Root>
    <Progress.Indicator />
  </Progress.Root>
);
```

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

### Form.Message default error message

Source: https://www.radix-ui.com/primitives/docs/components/form.md

When no children are provided, Form.Message renders a default error message for the given match. This example yields "This value is missing".

```jsx
// will yield "This value is missing"

<Form.Message match="valueMissing" />
```

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

### Dropdown Menu with Radio Items

Source: https://www.radix-ui.com/primitives/docs/components/dropdown-menu.md

Use the RadioGroup and RadioItem parts to add a selectable item among others. The example uses React state to manage the selected color.

```jsx
import * as React from "react";

import { CheckIcon } from "@radix-ui/react-icons";

import { DropdownMenu } from "radix-ui";

export default () => {
  const [color, setColor] = React.useState("blue");

  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>…</DropdownMenu.Trigger>

      <DropdownMenu.Portal>
        <DropdownMenu.Content>
          <DropdownMenu.RadioGroup value={color} onValueChange={setColor}>
            <DropdownMenu.RadioItem value="red">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Red
            </DropdownMenu.RadioItem>

            <DropdownMenu.RadioItem value="blue">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Blue
            </DropdownMenu.RadioItem>

            <DropdownMenu.RadioItem value="green">
              <DropdownMenu.ItemIndicator>
                <CheckIcon />
              </DropdownMenu.ItemIndicator>
              Green
            </DropdownMenu.RadioItem>
          </DropdownMenu.RadioGroup>
        </DropdownMenu.Content>
      </DropdownMenu.Portal>
    </DropdownMenu.Root>
  );
};
```

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

### Import and render AspectRatio.Root

Source: https://www.radix-ui.com/primitives/docs/components/aspect-ratio.md

Import the AspectRatio component from the radix-ui package and render its Root element. The Root contains the content you want to constrain to a given ratio.

```jsx
import { AspectRatio } from "radix-ui";

export default () => <AspectRatio.Root />;
```

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

### Progress.Root

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

Contains all of the progress parts. It accepts props for value, max, and a custom value label function.

```APIDOC
## Progress.Root

### Description
Contains all of the progress parts.

### Props
- `asChild` (boolean) - Default: `false`
- `value` (number | null) - No default value
- `max` (number) - No default value
- `getValueLabel` (function) - No default value

### Data Attributes
- `[data-state]` - Values: `"complete" | "indeterminate" | "loading"`
- `[data-value]` - The current value
- `[data-max]` - The max value

```

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

### Create a range slider with multiple thumbs

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

Add multiple thumbs and values to create a range slider. The example uses `defaultValue={[25, 75]}` and renders two thumbs.

```jsx
import { Slider } from "radix-ui";

export default () => (
  <Slider.Root defaultValue={[25, 75]}>
    <Slider.Track>
      <Slider.Range />
    </Slider.Track>

    <Slider.Thumb />

    <Slider.Thumb />
  </Slider.Root>
);
```

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

### Import and use Toolbar components

Source: https://www.radix-ui.com/primitives/docs/components/toolbar.md

Shows the basic anatomy of the Toolbar component: import Toolbar from radix-ui and compose Root with Button, Separator, Link, and ToggleGroup/ToggleItem.

```jsx
import { Toolbar } from "radix-ui";

export default () => (
  <Toolbar.Root>
    <Toolbar.Button />

    <Toolbar.Separator />

    <Toolbar.Link />

    <Toolbar.ToggleGroup>
      <Toolbar.ToggleItem />
    </Toolbar.ToggleGroup>
  </Toolbar.Root>
);
```

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

### Add decorative elements to Menubar.Item

Source: https://www.radix-ui.com/primitives/docs/components/menubar.md

Adds decorative elements like images inside Menubar.Item parts. The example shows two items with img elements and text labels.

```jsx
import { Menubar } from "radix-ui";

export default () => (
  <Menubar.Root>
    <Menubar.Menu>
      <Menubar.Trigger>…</Menubar.Trigger>

      <Menubar.Portal>
        <Menubar.Content>
          <Menubar.Item>
            <img src="…" />
            Adolfo Hess
          </Menubar.Item>

          <Menubar.Item>
            <img src="…" />
            Miyah Myles
          </Menubar.Item>
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);
```

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

### Vertical NavigationMenu with orientation prop

Source: https://www.radix-ui.com/primitives/docs/components/navigation-menu.md

Use the `orientation` prop set to "vertical" on `NavigationMenu.Root` to render a vertical menu. The example includes two items with triggers and content.

```jsx
<NavigationMenu.Root orientation="vertical">
  <NavigationMenu.List>
    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Item one</NavigationMenu.Trigger>

      <NavigationMenu.Content>Item one content</NavigationMenu.Content>
    </NavigationMenu.Item>

    <NavigationMenu.Item>
      <NavigationMenu.Trigger>Item two</NavigationMenu.Trigger>

      <NavigationMenu.Content>Item Two content</NavigationMenu.Content>
    </NavigationMenu.Item>
  </NavigationMenu.List>
</NavigationMenu.Root>
```

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

### Import primitives from radix-ui

Source: https://www.radix-ui.com/primitives/docs

Import primitives from the unified radix-ui package.

```tsx
import { Dialog, DropdownMenu, Tooltip } from "radix-ui";
```

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

### ScrollArea Anatomy Example

Source: https://www.radix-ui.com/primitives/docs/components/scroll-area.md

Import the ScrollArea component and compose its parts: Root, Viewport, Scrollbar (with orientation), Thumb, and Corner. This is the basic anatomy for a scroll area with both horizontal and vertical scrollbars.

```jsx
import { ScrollArea } from "radix-ui";

export default () => (
  <ScrollArea.Root>
    <ScrollArea.Viewport />

    <ScrollArea.Scrollbar orientation="horizontal">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>

    <ScrollArea.Scrollbar orientation="vertical">
      <ScrollArea.Thumb />
    </ScrollArea.Scrollbar>

    <ScrollArea.Corner />
  </ScrollArea.Root>
);
```

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

### Add decorative elements to ContextMenu.Item

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

Shows how to add decorative elements like images inside ContextMenu.Item parts. The example renders two items, each containing an img element alongside text.

```jsx
import { ContextMenu } from "radix-ui";

export default () => (
  <ContextMenu.Root>
    <ContextMenu.Trigger>…</ContextMenu.Trigger>

    <ContextMenu.Portal>
      <ContextMenu.Content>
        <ContextMenu.Item>
          <img src="…" />
          Adolfo Hess
        </ContextMenu.Item>

        <ContextMenu.Item>
          <img src="…" />
          Miyah Myles
        </ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Portal>
  </ContextMenu.Root>
);
```
Tokens:
Raw