### Install Radix UI Package

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

Install the main radix-ui package for incremental adoption. This is the simplest way to get started and prevent version conflicts.

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

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

### Install Individual Radix UI Primitives

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

Install specific primitives like Dialog, DropdownMenu, or Tooltip individually. This allows for a more targeted approach.

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

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

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

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

### Install Radix Primitives

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

Install the latest version of Radix Primitives using npm.

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

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

### Vertical Tabs Example

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

Create vertical tabs by setting the 'orientation' prop on the Tabs.Root component. This example demonstrates a basic setup with three tabs and their corresponding content panels.

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

export default () => (
  <Tabs.Root defaultValue="tab1" orientation="vertical">
    <Tabs.List aria-label="tabs example">
      <Tabs.Trigger value="tab1">One</Tabs.Trigger>

      <Tabs.Trigger value="tab2">Two</Tabs.Trigger>

      <Tabs.Trigger value="tab3">Three</Tabs.Trigger>
    </Tabs.List>

    <Tabs.Content value="tab1">Tab one content</Tabs.Content>

    <Tabs.Content value="tab2">Tab two content</Tabs.Content>

    <Tabs.Content value="tab3">Tab three content</Tabs.Content>
  </Tabs.Root>
);
```

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

### Usage of custom Dropdown Menu components

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

Example showing how to consume the abstracted Dropdown Menu components in a React application.

```jsx
import {
  DropdownMenu,
  DropdownMenuTrigger,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuItem,
  DropdownMenuGroup,
  DropdownMenuCheckboxItem,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuSeparator,
} from "./your-dropdown-menu";

export default () => (
  <DropdownMenu>
    <DropdownMenuTrigger>DropdownMenu trigger</DropdownMenuTrigger>

    <DropdownMenuContent>
      <DropdownMenuItem>Item</DropdownMenuItem>

      <DropdownMenuLabel>Label</DropdownMenuLabel>

      <DropdownMenuGroup>Group</DropdownMenuGroup>

      <DropdownMenuCheckboxItem>CheckboxItem</DropdownMenuCheckboxItem>

      <DropdownMenuSeparator>Separator</DropdownMenuSeparator>

      <DropdownMenuRadioGroup>
        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>

        <DropdownMenuRadioItem>RadioItem</DropdownMenuRadioItem>
      </DropdownMenuRadioGroup>
    </DropdownMenuContent>
  </DropdownMenu>
);
```

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

### Import Components from Radix UI Package

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

Import Dialog, DropdownMenu, and Tooltip components after installing the main radix-ui package.

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

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

### Vertical Slider Example

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

Demonstrates how to create a vertical slider by setting the 'orientation' prop to 'vertical'. Includes basic CSS for styling.

```jsx
// index.jsx

import { Slider } from "radix-ui";

import "./styles.css";

export default () => (
  <Slider.Root className="SliderRoot" defaultValue={[50]} orientation="vertical">
    <Slider.Track className="SliderTrack">
      <Slider.Range className="SliderRange" />
    </Slider.Track>

    <Slider.Thumb className="SliderThumb" />
  </Slider.Root>
);
```

```css
/* styles.css */

.SliderRoot {
  position: relative;

  display: flex;

  align-items: center;
}

.SliderRoot[data-orientation="vertical"] {
  flex-direction: column;

  width: 20px;

  height: 100px;
}

.SliderTrack {
  position: relative;

  flex-grow: 1;

  background-color: grey;
}

.SliderTrack[data-orientation="vertical"] {
  width: 3px;
}

.SliderRange {
  position: absolute;

  background-color: black;
}

.SliderRange[data-orientation="vertical"] {
  width: 100%;
}

.SliderThumb {
  display: block;

  width: 20px;

  height: 20px;

  background-color: black;
}
```

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

### Basic Navigation Menu Structure

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

This snippet shows the basic structure of a Navigation Menu with two items, each having a trigger and content. It's a foundational example for setting up the component.

```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>
);
```

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

### Import and Render Toggle Root

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

Import the Toggle component from 'radix-ui' and render the root element. This is the basic setup for using the Toggle.

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

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

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

### Import and Render Aspect Ratio Root

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

Import the AspectRatio component and render its root element. This is the basic setup for using the component.

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

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

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

### Usage Example of Custom Button with 'asChild'

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

Illustrates how to use the custom Button component with the 'asChild' prop to render an anchor tag.

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

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

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

### Radio Group Anatomy Example

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

Demonstrates the basic structure for importing and using the Radio Group component with its root, item, and indicator parts.

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

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

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

### Import and Render Separator Root

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

Import the Separator component and render its root element. This is the basic setup for using the Separator.

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

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

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

### Custom Select API Usage

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

Shows how to use a custom Select API that abstracts primitive parts into a reusable component. This example demonstrates importing and using the custom Select and SelectItem components.

```jsx
import { Select, SelectItem } from "./your-select";

export default () => (
  <Select defaultValue="2">
    <SelectItem value="1">Item 1</SelectItem>

    <SelectItem value="2">Item 2</SelectItem>

    <SelectItem value="3">Item 3</SelectItem>
  </Select>
);

```

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

### Abstract Tooltip Component

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

Create a custom tooltip component by abstracting the primitive parts of the Radix UI Tooltip. This example introduces a `content` prop for easier usage.

```jsx
import { Tooltip } from "./your-tooltip";

export default () => (
  <Tooltip content="Tooltip content">
    <button>Tooltip trigger</button>
  </Tooltip>
);
```

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

### Basic One-Time Password Field Usage

Source: https://www.radix-ui.com/primitives/docs/components/one-time-password-field.md

Render a field with a specified number of inputs for the password length. This example demonstrates a 6-character password field.

```jsx
// This will render a field with 6 inputs, for use with

// 6-character passwords. Render an Input component for

// each character of accepted password's length.
<OneTimePasswordField.Root>
  <OneTimePasswordField.Input />

  <OneTimePasswordField.Input />

  <OneTimePasswordField.Input />

  <OneTimePasswordField.Input />

  <OneTimePasswordField.Input />

  <OneTimePasswordField.Input />

  <OneTimePasswordField.HiddenInput />
</OneTimePasswordField.Root>
```

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

### Server-Side Validation Example

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

Demonstrates how to handle server-side validation errors by using the `serverInvalid` prop on `Form.Field` and `forceMatch` on `Form.Message`. The `onSubmit` handler catches form submission, processes potential server errors, and updates the `serverErrors` state.

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

import { Form } from "radix-ui";

function Page() {
  const [serverErrors, setServerErrors] = React.useState({
    email: false,

    password: false,
  });

  return (
    <Form.Root
      // `onSubmit` only triggered if it passes client-side validation
      onSubmit={(event) => {
        const data = Object.fromEntries(new FormData(event.currentTarget));

        // Submit form data and catch errors in the response
        submitForm(data)
          .then(() => {}) 
          /**
           * Map errors from your server response into a structure you'd like to work with.
           * In this case resulting in this object: `{ email: false, password: true }`
           */
          .catch((errors) => setServerErrors(mapServerErrors(errors)));

        // prevent default form submission
        event.preventDefault();
      }}
      onClearServerErrors={() => setServerErrors({ email: false, password: false })}
    >
      <Form.Field name="email" serverInvalid={serverErrors.email}>
        <Form.Label>Email address</Form.Label>

        <Form.Control type="email" required />

        <Form.Message match="valueMissing">Please enter your email.</Form.Message>

        <Form.Message match="typeMismatch" forceMatch={serverErrors.email}>
          Please provide a valid email.
        </Form.Message>
      </Form.Field>

      <Form.Field name="password" serverInvalid={serverErrors.password}>
        <Form.Label>Password</Form.Label>

        <Form.Control type="password" required />

        <Form.Message match="valueMissing">Please enter a password.</Form.Message>

        {serverErrors.password && (
          <Form.Message>
            Please provide a valid password. It should contain at least 1 number and 1 special
            character.
          </Form.Message>
        )}
      </Form.Field>

      <Form.Submit>Submit</Form.Submit>
    </Form.Root>
  );
}

```

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

### Import and Render Label Root

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

Demonstrates how to import and render the basic Label.Root component.

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

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

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

### Implement Toast Component Structure

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

Basic implementation showing the required Provider, Root, and Viewport structure for the Toast component.

```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>
);
```

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

### Implement a controlled Context Menu

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

Use the open prop and onOpenChange callback to manage the menu state programmatically.

```javascript

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>

	);

}



```

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

### Basic Popover Usage

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

Demonstrates the basic usage of the Popover component with a trigger and content. Import necessary components from './your-popover'.

```jsx
import { Popover, PopoverTrigger, PopoverContent } from "./your-popover";

export default () => (
  <Popover>
    <PopoverTrigger>Popover trigger</PopoverTrigger>

    <PopoverContent>Popover content</PopoverContent>
  </Popover>
);
```

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

### Import Toggle Group Component

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

Demonstrates how to import and set up the basic structure of the Toggle Group component.

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

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

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

### Implement a basic Menubar structure

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

Use this structure to compose the Menubar using its constituent parts, including triggers, content, items, and submenus.

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

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

      <Menubar.Portal>
        <Menubar.Content>
          <Menubar.Label />

          <Menubar.Item />

          <Menubar.Group>
            <Menubar.Item />
          </Menubar.Group>

          <Menubar.CheckboxItem>
            <Menubar.ItemIndicator />
          </Menubar.CheckboxItem>

          <Menubar.RadioGroup>
            <Menubar.RadioItem>
              <Menubar.ItemIndicator />
            </Menubar.RadioItem>
          </Menubar.RadioGroup>

          <Menubar.Sub>
            <Menubar.SubTrigger />

            <Menubar.Portal>
              <Menubar.SubContent />
            </Menubar.Portal>
          </Menubar.Sub>

          <Menubar.Separator />

          <Menubar.Arrow />
        </Menubar.Content>
      </Menubar.Portal>
    </Menubar.Menu>
  </Menubar.Root>
);
```

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

### One-Time Password Field Anatomy

Source: https://www.radix-ui.com/primitives/docs/components/one-time-password-field.md

Import and assemble the OneTimePasswordField components. This example shows the basic structure with a Root, individual Inputs, and a HiddenInput.

```jsx
import { unstable_OneTimePasswordField as OneTimePasswordField } from "radix-ui";

export default () => (
  <OneTimePasswordField.Root>
    {/* one Input for each character of the value */}

    <OneTimePasswordField.Input />

    {/* single HiddenInput to store the full value */}

    <OneTimePasswordField.HiddenInput />
  </OneTimePasswordField.Root>
);
```

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

### Accordion Expanded by Default

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

Use the `defaultValue` prop on the `Accordion.Root` to specify which item should be open by default. This example sets 'item-2' to be expanded initially.

```jsx
<Accordion.Root type="single" defaultValue="item-2">
  <Accordion.Item value="item-1">…</Accordion.Item>

  <Accordion.Item value="item-2">…</Accordion.Item>
</Accordion.Root>
```

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

### Password Toggle Field Anatomy

Source: https://www.radix-ui.com/primitives/docs/components/password-toggle-field.md

Import all parts of the Password Toggle Field and assemble them. This example shows the basic structure with input and toggle components.

```jsx
import { unstable_PasswordToggleField as PasswordToggleField } from "radix-ui";

import { EyeClosedIcon, EyeOpenIcon } from "@radix-ui/react-icons";

export default () => (
  <PasswordToggleField.Root>
    <PasswordToggleField.Input />

    <PasswordToggleField.Toggle>
      <PasswordToggleField.Icon visible={<EyeOpenIcon />} hidden={<EyeClosedIcon />} />
    </PasswordToggleField.Toggle>
  </PasswordToggleField.Root>
);
```

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

### Basic Portal Usage

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

Demonstrates the basic usage of the Portal component to render content. The content will be rendered in a separate DOM element.

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

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

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

### Import and Basic Usage of Slot

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

Demonstrates how to import and use the Slot component with a simple div child.

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

export default () => (
  <Slot.Root>
    <div>Hello</div>
  </Slot.Root>
);
```

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

### Style Form Elements Based on Validity

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

Style form elements using the `data-valid` and `data-invalid` attributes added to relevant parts. This example shows styling the `FormLabel`.

```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;
}
```

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

### Animating Collapsible Content Size

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

Animate the size of the collapsible content using CSS variables `--radix-collapsible-content-width` and `--radix-collapsible-content-height`. This example demonstrates slide down and slide up animations.

```jsx
// index.jsx

import { Collapsible } from "radix-ui";

import "./styles.css";

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

    <Collapsible.Content className="CollapsibleContent">…</Collapsible.Content>
  </Collapsible.Root>
);
```

```css
/* styles.css */

.CollapsibleContent {
  overflow: hidden;
}

.CollapsibleContent[data-state="open"] {
  animation: slideDown 300ms ease-out;
}

.CollapsibleContent[data-state="closed"] {
  animation: slideUp 300ms ease-out;
}

@keyframes slideDown {
  from {
    height: 0;
  }

  to {
    height: var(--radix-collapsible-content-height);
  }
}

@keyframes slideUp {
  from {
    height: var(--radix-collapsible-content-height);
  }

  to {
    height: 0;
  }
}
```

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

### ContextMenu Components

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

Reference for the various components available within the ContextMenu primitive.

```APIDOC
## Label
Used to render a label. It won't be focusable using arrow keys.

### Props
- **asChild** (boolean) - Optional - Default: false

## CheckboxItem
An item that can be controlled and rendered like a checkbox.

### Props
- **asChild** (boolean) - Optional - Default: false
- **checked** (boolean | 'indeterminate') - Optional
- **onCheckedChange** (function) - Optional
- **disabled** (boolean) - Optional
- **onSelect** (function) - Optional
- **textValue** (string) - Optional

### Data Attributes
- **[data-state]** ("checked" | "unchecked" | "indeterminate")
- **[data-highlighted]** (Present when highlighted)
- **[data-disabled]** (Present when disabled)

## RadioGroup
Used to group multiple ContextMenu.RadioItems.

### Props
- **asChild** (boolean) - Optional - Default: false
- **value** (string) - Optional
- **onValueChange** (function) - Optional

## RadioItem
An item that can be controlled and rendered like a radio.

### Props
- **asChild** (boolean) - Optional - Default: false
- **value** (string) - Required
- **disabled** (boolean) - Optional
- **onSelect** (function) - Optional
- **textValue** (string) - Optional

### Data Attributes
- **[data-state]** ("checked" | "unchecked" | "indeterminate")
- **[data-highlighted]** (Present when highlighted)
- **[data-disabled]** (Present when disabled)

## ItemIndicator
Renders when the parent CheckboxItem or RadioItem is checked.

### Props
- **asChild** (boolean) - Optional - Default: false
- **forceMount** (boolean) - Optional

### Data Attributes
- **[data-state]** ("checked" | "unchecked" | "indeterminate")

## Separator
Used to visually separate items in the context menu.

### Props
- **asChild** (boolean) - Optional - Default: false

## Sub
Contains all the parts of a submenu.

### Props
- **defaultOpen** (boolean) - Optional
- **open** (boolean) - Optional
- **onOpenChange** (function) - Optional

## SubTrigger
An item that opens a submenu. Must be rendered inside ContextMenu.Sub.

### Props
- **asChild** (boolean) - Optional - Default: false
- **disabled** (boolean) - Optional
- **textValue** (string) - Optional

### Data Attributes
- **[data-state]** ("open" | "closed")
- **[data-highlighted]** (Present when highlighted)
- **[data-disabled]** (Present when disabled)
```

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

### Import Visually Hidden Component

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

Demonstrates how to import the VisuallyHidden component from the Radix UI library.

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

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

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

### Custom Slider Implementation

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

Abstract all primitive Slider parts into a custom component for self-closing element usage. This example shows how to implement a custom Slider component that accepts a `defaultValue` prop.

```jsx
import { Slider } from "./your-slider";

export default () => <Slider defaultValue={[25]} />;

```

```jsx
// your-slider.jsx

import { Slider as SliderPrimitive } from "radix-ui";

export const Slider = React.forwardRef((props, forwardedRef) => {
  const value = props.value || props.defaultValue;

  return (
    <SliderPrimitive.Slider {...props} ref={forwardedRef}>
      <SliderPrimitive.Track>
        <SliderPrimitive.Range />
      </SliderPrimitive.Track>

      {value.map((_, i) => (
        <SliderPrimitive.Thumb key={i} />
      ))}
    </SliderPrimitive.Slider>
  );
});

```

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

### Implementation of custom Dropdown Menu components

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

Implementation details for wrapping Radix UI primitives to include custom arrows and item indicators.

```jsx
// your-dropdown-menu.jsx

import * as React from "react";

import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";

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

export const DropdownMenu = DropdownMenuPrimitive.Root;

export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;

export const DropdownMenuContent = React.forwardRef(({ children, ...props }, forwardedRef) => {
  return (
    <DropdownMenuPrimitive.Portal>
      <DropdownMenuPrimitive.Content {...props} ref={forwardedRef}>
        {children}

        <DropdownMenuPrimitive.Arrow />
      </DropdownMenuPrimitive.Content>
    </DropdownMenuPrimitive.Portal>
  );
});

export const DropdownMenuLabel = DropdownMenuPrimitive.Label;

export const DropdownMenuItem = DropdownMenuPrimitive.Item;

export const DropdownMenuGroup = DropdownMenuPrimitive.Group;

export const DropdownMenuCheckboxItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
  return (
    <DropdownMenuPrimitive.CheckboxItem {...props} ref={forwardedRef}>
      {children}

      <DropdownMenuPrimitive.ItemIndicator>
        {props.checked === "indeterminate" && <DividerHorizontalIcon />}

        {props.checked === true && <CheckIcon />}
      </DropdownMenuPrimitive.ItemIndicator>
    </DropdownMenuPrimitive.CheckboxItem>
  );
});

export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;

export const DropdownMenuRadioItem = React.forwardRef(({ children, ...props }, forwardedRef) => {
  return (
    <DropdownMenuPrimitive.RadioItem {...props} ref={forwardedRef}>
      {children}

      <DropdownMenuPrimitive.ItemIndicator>
        <CheckIcon />
      </DropdownMenuPrimitive.ItemIndicator>
    </DropdownMenuPrimitive.RadioItem>
  );
});

export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;
```

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

### Select with Custom Scrollbar using ScrollArea

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

Integrates the Select component with the ScrollArea primitive to create a custom scrollbar. This example requires importing both `Select` and `ScrollArea` and includes associated CSS for styling.

```jsx
// index.jsx

import { Select, ScrollArea } from "radix-ui";

import "./styles.css";

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

    <Select.Portal>
      <Select.Content>
        <ScrollArea.Root className="ScrollAreaRoot" type="auto">
          <Select.Viewport asChild>
            <ScrollArea.Viewport className="ScrollAreaViewport">
              <StyledItem>…</StyledItem>

              <StyledItem>…</StyledItem>

              <StyledItem>…</StyledItem>
            </ScrollArea.Viewport>
          </Select.Viewport>

          <ScrollArea.Scrollbar className="ScrollAreaScrollbar" orientation="vertical">
            <ScrollArea.Thumb className="ScrollAreaThumb" />
          </ScrollArea.Scrollbar>
        </ScrollArea.Root>
      </Select.Content>
    </Select.Portal>
  </Select.Root>
);
```

```css
/* styles.css */

.ScrollAreaRoot {
  width: 100%;

  height: 100%;
}

.ScrollAreaViewport {
  width: 100%;

  height: 100%;
}

.ScrollAreaScrollbar {
  width: 4px;

  padding: 5px 2px;
}

.ScrollAreaThumb {
  background: rgba(0, 0, 0, 0.3);

  border-radius: 3px;
}
```

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

### Create submenus with Menubar.Sub

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

Use Menubar.Sub in combination with Menubar.SubTrigger and Menubar.SubContent to create nested menu structures.

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

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

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

        <Menubar.Separator />

        <Menubar.Sub>
          <Menubar.SubTrigger>Sub menu →</Menubar.SubTrigger>

          <Menubar.Portal>
            <Menubar.SubContent>
              <Menubar.Item>Sub menu item</Menubar.Item>

              <Menubar.Item>Sub menu item</Menubar.Item>

              <Menubar.Arrow />
            </Menubar.SubContent>
          </Menubar.Portal>
        </Menubar.Sub>

        <Menubar.Separator />

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

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

### Auto-Submit Form with One-Time Password Field

Source: https://www.radix-ui.com/primitives/docs/components/one-time-password-field.md

Use the `autoSubmit` prop to automatically submit an associated form once all inputs in the One-Time Password Field are filled. This example demonstrates a form submission with validation.

```jsx
function Verify({ validCode }) {
  const PASSWORD_LENGTH = 6;

  function handleSubmit(event) {
    event.preventDefault();

    const formData = event.formData;

    if (formData.get("otp") === validCode) {
      redirect("/authenticated");
    } else {
      window.alert("Invalid code");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <OneTimePasswordField.Root name="otp" autoSubmit>
        {PASSWORD_LENGTH.map((_, i) => (
          <OneTimePasswordField.Input key={i} />
        ))}

        {/* HiddenInput is required for the form to have data associated with the field */}

        <OneTimePasswordField.HiddenInput />
      </OneTimePasswordField.Root>

      <button>Submit</button>
    </form>
  );
}
```

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

### Close Alert Dialog After Async Form Submission

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

Use controlled props to programmatically close the Alert Dialog after an asynchronous operation completes. This example demonstrates closing the dialog after a simulated API call.

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

import { AlertDialog } from "radix-ui";

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));

export default () => {
  const [open, setOpen] = React.useState(false);

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

      <AlertDialog.Portal>
        <AlertDialog.Overlay />

        <AlertDialog.Content>
          <form
            onSubmit={(event) => {
              wait().then(() => setOpen(false));
              event.preventDefault();
            }}
          >
            {/** some inputs **/

            <button type="submit">Submit</button>
          </form>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};
```

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

### Import Individual Radix UI Primitives

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

Import individual primitives using their specific package names. This method is useful when only a few components are needed.

```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";
```

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

### Composing Toolbar with DropdownMenu

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

Shows how to compose the Toolbar component with other primitives like DropdownMenu using the `asChild` prop. This allows integrating complex components within the toolbar layout.

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

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

    <Toolbar.Separator />

    <DropdownMenu.Root>
      <Toolbar.Button asChild>
        <DropdownMenu.Trigger>Trigger</DropdownMenu.Trigger>
      </Toolbar.Button>

      <DropdownMenu.Content>…</DropdownMenu.Content>
    </DropdownMenu.Root>
  </Toolbar.Root>
);
```

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

### Import Portal Component

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

Import the Portal component from the radix-ui library.

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

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

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

### Toolbar Anatomy and Basic Structure

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

Demonstrates the basic structure of the Toolbar component, including its root, button, separator, link, and toggle group elements. Import the component to begin.

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

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

    <Toolbar.Separator />

    <Toolbar.Link />

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

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

### Popover Anatomy and Structure

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

Demonstrates the basic import and structure for using the Popover component, including its root, trigger, anchor, portal, content, close, and arrow parts.

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

export default () => (
  <Popover.Root>
    <Popover.Trigger />

    <Popover.Anchor />

    <Popover.Portal>
      <Popover.Content>
        <Popover.Close />

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

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

### Tooltip Provider

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

Wraps your app to provide global functionality to your tooltips. It allows for the configuration of global display delays.

```APIDOC
## Tooltip Provider

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

### Props

- **`delayDuration`** (number) - Optional - The delay in milliseconds before the tooltip appears. Defaults to `700`.
- **`skipDelayDuration`** (number) - Optional - The delay in milliseconds before the tooltip appears when the trigger is focused. Defaults to `300`.
- **`disableHoverableContent`** (boolean) - Optional - If true, the tooltip will not close when the user hovers over the tooltip content. No default value.
```

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

### Popover Implementation with Default Configuration

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

Shows how to implement a custom Popover component, abstracting the Arrow and setting a default sideOffset. This file is named 'your-popover.jsx'.

```jsx
// your-popover.jsx

import * as React from "react";

import { Popover as PopoverPrimitive } from "radix-ui";

export const Popover = PopoverPrimitive.Root;

export const PopoverTrigger = PopoverPrimitive.Trigger;

export const PopoverContent = React.forwardRef(({ children, ...props }, forwardedRef) => (
  <PopoverPrimitive.Portal>
    <PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>
      {children}

      <PopoverPrimitive.Arrow />
    </PopoverPrimitive.Content>
  </PopoverPrimitive.Portal>
));
```

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

### NavigationMenu.List

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

Contains the top level menu items.

```APIDOC
## List

Contains the top level menu items.

### Props

- `asChild` (boolean) - Default: `false`

### Data Attributes

- `[data-orientation]` (enum) - Values: `"vertical" | "horizontal"`
```

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

### Create submenus with ContextMenu.Sub

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

Use ContextMenu.Sub in combination with its parts to nest menus.

```jsx
<ContextMenu.Root>
  <ContextMenu.Trigger>…</ContextMenu.Trigger>

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

      <ContextMenu.Item>…</ContextMenu.Item>

      <ContextMenu.Separator />

      <ContextMenu.Sub>
        <ContextMenu.SubTrigger>Sub menu →</ContextMenu.SubTrigger>

        <ContextMenu.Portal>
          <ContextMenu.SubContent>
            <ContextMenu.Item>Sub menu item</ContextMenu.Item>

            <ContextMenu.Item>Sub menu item</ContextMenu.Item>

            <ContextMenu.Arrow />
          </ContextMenu.SubContent>
        </ContextMenu.Portal>
      </ContextMenu.Sub>

      <ContextMenu.Separator />

      <ContextMenu.Item>…</ContextMenu.Item>
    </ContextMenu.Content>
  </ContextMenu.Portal>
</ContextMenu.Root>
```

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

### Group Select Items with Label

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

Demonstrates how to group Select items into sections using the Select.Group and Select.Label components.

```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>
```

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

### Basic Switch Anatomy

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

Demonstrates the basic structure of a Radix UI Switch component by importing and assembling its root and thumb parts.

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

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

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

### Implement radio items

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

Use Menubar.RadioGroup and Menubar.RadioItem to create a set of mutually exclusive selection options.

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

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

import { Menubar } from "radix-ui";

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

  return (
    <Menubar.Root>
      <Menubar.Menu>
        <Menubar.Trigger>…</Menubar.Trigger>

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

              <Menubar.RadioItem value="blue">
                <Menubar.ItemIndicator>
                  <CheckIcon />
                </Menubar.ItemIndicator>
                Blue
              </Menubar.RadioItem>
            </Menubar.RadioGroup>
          </Menubar.Content>
        </Menubar.Portal>
      </Menubar.Menu>
    </Menubar.Root>
  );
};
```

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

### Set Reading Direction with Provider

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

Wrap your application with Direction.Provider and set the 'dir' prop to 'rtl' for right-to-left reading direction.

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

export default () => <Direction.Provider dir="rtl">{/* your app */}</Direction.Provider>;
```

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

### Basic Usage of Visually Hidden

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

Shows how to use the Visually Hidden primitive to hide text content (e.g., 'Settings') from visual display while making it available to screen readers, often used in conjunction with icons.

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

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

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

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

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

### Menubar.SubContent

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

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

```APIDOC
## Menubar.SubContent

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

### Props
- **asChild** (boolean) - Optional - Default: false
- **loop** (boolean) - Optional - Default: false
- **onEscapeKeyDown** (function) - Optional
- **onPointerDownOutside** (function) - Optional
- **onFocusOutside** (function) - Optional
- **onInteractOutside** (function) - Optional
- **forceMount** (boolean) - Optional
- **sideOffset** (number) - Optional - Default: 0
- **align** (enum) - Optional - Default: "start"
- **alignOffset** (number) - Optional - Default: 0
- **avoidCollisions** (boolean) - Optional - Default: true
- **collisionBoundary** (Boundary) - Optional - Default: []
- **collisionPadding** (number | Padding) - Optional - Default: 0
- **arrowPadding** (number) - Optional - Default: 0
- **sticky** (enum) - Optional - Default: "partial"
- **hideWhenDetached** (boolean) - Optional - Default: false

### Data Attributes
- **[data-state]** - "open" | "closed"
- **[data-side]** - "left" | "right" | "bottom" | "top"
- **[data-align]** - "start" | "end" | "center"
- **[data-orientation]** - "vertical" | "horizontal"

### CSS Variables
- **--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
```

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

### NavigationMenu.Link

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

A navigational link.

```APIDOC
## Link

A navigational link.

### Props

- `asChild` (boolean) - Default: `false`
- `active` (boolean) - Default: `false`
- `onSelect` (function) - No default value

### Data Attributes

- `[data-active]` - Present when active
```

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

### Select with Complex Items

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

Demonstrates how to use custom content within Select items, including images and text. Ensure all necessary components are imported.

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

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

    <Select.Portal>
      <Select.Content>
        <Select.Viewport>
          <Select.Item>
            <Select.ItemText>
              <img src="…" />
              Adolfo Hess
            </Select.ItemText>

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

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

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

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

### Tooltip Anatomy and Structure

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

Demonstrates the basic structure for importing and assembling the Tooltip component's parts. This includes the Provider, Root, Trigger, Portal, Content, and Arrow.

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

export default () => (
  <Tooltip.Provider>
    <Tooltip.Root>
      <Tooltip.Trigger />

      <Tooltip.Portal>
        <Tooltip.Content>
          <Tooltip.Arrow />
        </Tooltip.Content>
      </Tooltip.Portal>
    </Tooltip.Root>
  </Tooltip.Provider>
);
```

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

### Import AccessibleIcon Component

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

Import the AccessibleIcon.Root component from the Radix UI library. This is the primary step to begin using the component.

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

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

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

### Compose Tooltip and Dialog Triggers with Custom Button

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

Demonstrates nesting `asChild` props to compose the functionality of multiple Radix primitives (`Tooltip.Trigger` and `Dialog.Trigger`) onto a single custom `MyButton` component.

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

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

const MyButton = React.forwardRef((props, forwardedRef) => (
  <button {...props} ref={forwardedRef} />
));

export default () => {
  return (
    <Dialog.Root>
      <Tooltip.Root>
        <Tooltip.Trigger asChild>
          <Dialog.Trigger asChild>
            <MyButton>Open dialog</MyButton>
          </Dialog.Trigger>
        </Tooltip.Trigger>

        <Tooltip.Portal>…</Tooltip.Portal>
      </Tooltip.Root>

      <Dialog.Portal>...</Dialog.Portal>
    </Dialog.Root>
  );
};
```

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

### Portal

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

When used, portals the content part into the `body`. It accepts props like `forceMount` and `container` to control where the content is rendered.

```APIDOC
## Portal

When used, portals the content part into the `body`.

| Prop         | Type          | Default          |
| ------------ | ------------- | ---------------- |
| `forceMount` | `boolean`     | No default value |
| `container`  | `HTMLElement` | `document.body`  |
```

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

### Direction.Provider

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

Wraps your app to provide global reading direction. When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `Direction.Provider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.

```APIDOC
## Direction.Provider

### Description
Wraps your app to provide global reading direction. When creating localized apps that require right-to-left (RTL) reading direction, you need to wrap your application with the `Direction.Provider` component to ensure all of the primitives adjust their behavior based on the `dir` prop.

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Props
- **`dir`** (enum) - No default value - Specifies the reading direction. Can be 'ltr' or 'rtl'.

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

<Direction.Provider dir="rtl">
  {/* your app */}
</Direction.Provider>
```

### Response
#### Success Response (200)
This component does not return a response body as it is a provider.

#### Response Example
N/A
```

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

### Implement radio items

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

Use RadioGroup and RadioItem to allow users to select one option from a set.

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

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

import { ContextMenu } from "radix-ui";

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

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

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

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

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

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

### Show Hover Card Instantly

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

Control the open delay of the hover card using the `openDelay` prop. Setting it to 0 makes the card appear instantly on hover.

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

export default () => (
  <HoverCard.Root openDelay={0}>
    <HoverCard.Trigger>…</HoverCard.Trigger>

    <HoverCard.Content>…</HoverCard.Content>
  </HoverCard.Root>
);
```

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

### Implement alternative toast actions

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

Provide screen reader users with alternative ways to interact with toasts using the altText prop on the Action component.

```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>
```

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

### Navigation Menu with Client-Side Routing (Next.js)

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

Integrates the Navigation Menu with Next.js client-side routing by composing NavigationMenu.Link with Next.js's Link component. This ensures accessibility and consistent keyboard control.

```jsx
// index.jsx

import { usePathname } from "next/navigation";

import NextLink from "next/link";

import { NavigationMenu } from "radix-ui";

import "./styles.css";

const Link = ({ href, ...props }) => {
  const pathname = usePathname();

  const isActive = href === pathname;

  return (
    <NavigationMenu.Link asChild active={isActive}>
      <NextLink href={href} className="NavigationMenuLink" {...props} />
    </NavigationMenu.Link>
  );
};

export default () => (
  <NavigationMenu.Root>
    <NavigationMenu.List>
      <NavigationMenu.Item>
        <Link href="/">Home</Link>
      </NavigationMenu.Item>

      <NavigationMenu.Item>
        <Link href="/about">About</Link>
      </NavigationMenu.Item>
    </NavigationMenu.List>
  </NavigationMenu.Root>
);
```

```css
/* styles.css */

.NavigationMenuLink {
  text-decoration: none;
}

.NavigationMenuLink[data-active] {
  text-decoration: "underline";
}
```