### Install Radix Primitives

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/overview/getting-started.mdx

Install Radix Primitives from your command line using npm.

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

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

### Install Radix Themes using bun

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/overview/getting-started.mdx

Install the Radix Themes package using bun. This is a fast, all-in-one JavaScript runtime.

```bash
bun add @radix-ui/themes
```

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

### Basic Tabs Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/tabs.mdx

A fundamental example demonstrating the structure of the Tabs component with triggers and content sections. Use this as a starting point for implementing tabs.

```jsx
<Tabs.Root defaultValue="account">
	<Tabs.List>
		<Tabs.Trigger value="account">Account</Tabs.Trigger>
		<Tabs.Trigger value="documents">Documents</Tabs.Trigger>
		<Tabs.Trigger value="settings">Settings</Tabs.Trigger>
	</Tabs.List>

	<Box pt="3">
		<Tabs.Content value="account">
			<Text size="2">Make changes to your account.</Text>
		</Tabs.Content>

		<Tabs.Content value="documents">
			<Text size="2">Access and update your documents.</Text>
		</Tabs.Content>

		<Tabs.Content value="settings">
			<Text size="2">Edit your profile or update contact information.</Text>
		</Tabs.Content>
	</Box>
</Tabs.Root>
```

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

### Install Radix UI Package

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/overview/introduction.mdx

Install the main radix-ui package to import primitives. This is recommended to prevent version conflicts and manage updates.

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

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

### Install Individual Radix Primitives

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/overview/introduction.mdx

Alternatively, install each primitive individually using its scoped package name. This allows for more granular control over dependencies.

```bash
npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip
```

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

### Basic Callout Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/callout.mdx

A basic example of the Callout component with an icon and text. This is useful for general information or tips.

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

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

### Slider Size Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

Demonstrates how to control the size of the Slider using the `size` prop.

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

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

### Dropdown Menu Usage Example

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/dropdown-menu.mdx

Demonstrates how to use a custom Dropdown Menu component. This example shows the import and rendering of various menu items, labels, groups, checkboxes, radio buttons, and separators.

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

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

### Basic Flex Layout Example

Source: https://github.com/radix-ui/website/blob/main/data/blog/themes-3.mdx

Demonstrates a simple Flex layout component with a fixed width.

```jsx
<Flex width="500px" />
```

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

### Responsive Grid Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/grid.mdx

Demonstrates how to use breakpoint objects with props like `columns` and `rows` to create responsive grid layouts.

```APIDOC
## Responsive Grid

All props marked `Responsive`, such as `columns` and `rows` accept a [breakpoint object](/themes/docs/theme/breakpoints). For example, the following grid starts with 1 column, and uses 2 columns from the medium breakpoint.

### Example Usage

```jsx
<Grid columns={{ initial: "1", md: "2" }} gap="3" width="auto">
	<Box height="64px">
		<DecorativeBox />
	</Box>
	<Box height="64px">
		<DecorativeBox />
	</Box>
</Grid>
```

### Props Used

- **columns**: Accepts a breakpoint object. `initial` sets the default, `md` applies from the medium breakpoint onwards.
- **gap**: Standard gap property.
- **width**: Standard width property.
```

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

### Install Radix Themes using npm

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/overview/getting-started.mdx

Install the Radix Themes package using npm. This is the first step to integrating the component library into your project.

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

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

### Install Radix Themes using yarn

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/overview/getting-started.mdx

Install the Radix Themes package using yarn. This is an alternative to npm for package management.

```bash
yarn add @radix-ui/themes
```

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

### Basic Alert Dialog Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/alert-dialog.mdx

This example demonstrates a basic alert dialog with a trigger button, title, description, cancel button, and action button. Use this for standard confirmation flows.

```jsx
<AlertDialog.Root>
	<AlertDialog.Trigger>
		<Button color="red">Revoke access</Button>
	</AlertDialog.Trigger>
	<AlertDialog.Content maxWidth="450px">
		<AlertDialog.Title>Revoke access</AlertDialog.Title>
		<AlertDialog.Description size="2">
			Are you sure? This application will no longer be accessible and any
			existing sessions will be expired.
		</AlertDialog.Description>

		<Flex gap="3" mt="4" justify="end">
			<AlertDialog.Cancel>
				<Button variant="soft" color="gray">
					Cancel
				</Button>
			</AlertDialog.Cancel>
			<AlertDialog.Action>
				<Button variant="solid" color="red">
					Revoke access
				</Button>
			</AlertDialog.Action>
		</Flex>
	</AlertDialog.Content>
</AlertDialog.Root>
```

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

### Basic Checkbox Cards Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/checkbox-cards.mdx

Demonstrates the basic usage of CheckboxCards.Root with multiple items. Use this to create a group of selectable cards.

```jsx
<Box maxWidth="600px">
	<CheckboxCards.Root defaultValue={"[\"1\"]" columns={"{\"initial\": \"1\", \"sm\": \"3\"}"}>
		<CheckboxCards.Item value="1">
			<Flex direction="column" width="100%">
				<Text weight="bold">A1 Keyboard</Text>
				<Text>US Layout</Text>
			</Flex>
		</CheckboxCards.Item>
		<CheckboxCards.Item value="2">
			<Flex direction="column" width="100%">
				<Text weight="bold">Pro Mouse</Text>
				<Text>Zero-lag wireless</Text>
			</Flex>
		</CheckboxCards.Item>
		<CheckboxCards.Item value="3">
			<Flex direction="column" width="100%">
				<Text weight="bold">Lightning Mat</Text>
				<Text>Wireless charging</Text>
			</Flex>
		</CheckboxCards.Item>
	</CheckboxCards.Root>
</Box>
```

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

### Basic Button Usage

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/button.mdx

A basic example of using the Button component with an icon and text.

```jsx
<Button>
	<BookmarkIcon /> Bookmark
</Button>
```

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

### Install Radix Themes using pnpm

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/overview/getting-started.mdx

Install the Radix Themes package using pnpm. This is another package manager option.

```bash
pnpm add @radix-ui/themes
```

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

### Card Sizing Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/card.mdx

Illustrates different `size` prop values for the Card component, affecting its overall dimensions and spacing.

```jsx
<Flex gap="3" direction="column">
	<Box width="350px">
		<Card size="1">
			<Flex gap="3" align="center">
				<Avatar size="3" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" size="2" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" size="2" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>

	<Box width="400px">
		<Card size="2">
			<Flex gap="4" align="center">
				<Avatar size="4" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>

	<Box width="500px">
		<Card size="3">
			<Flex gap="4" align="center">
				<Avatar size="5" radius="full" fallback="T" color="indigo" />
				<Box>
					<Text as="div" size="4" weight="bold">
						Teodros Girmay
					</Text>
					<Text as="div" size="4" color="gray">
						Engineering
					</Text>
				</Box>
			</Flex>
		</Card>
	</Box>
</Flex>
```

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

### Vertical Tabs Example

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/tabs.mdx

Demonstrates how to create vertical tabs using the `orientation` prop. Ensure the Tabs component is imported from 'radix-ui'.

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

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

### Progress Component Example

Source: https://github.com/radix-ui/website/blob/main/data/blog/themes-3.mdx

Illustrates the usage of the Progress component for indicating task progress or indeterminate loading states.

```jsx
<ThemesBlogPostExampleProgress />
```

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

### Slider Radius Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

Shows how to set the border radius of the Slider using the `radius` prop.

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

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

### Tab Navigation Component Example

Source: https://github.com/radix-ui/website/blob/main/data/blog/themes-3.mdx

Shows how to use the Tab Nav component for navigating between views, built on the Navigation Menu primitive for accessibility.

```jsx
<ThemesBlogPostExampleTabNav baseUrl="/themes/docs/overview/3.0" />
```

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

### Slider High-Contrast Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

Demonstrates the `highContrast` prop for increased color contrast in light mode.

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

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

### Basic Code Snippet

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/code.mdx

A simple example of the Code component displaying a console log statement.

```jsx
<Code>console.log()</Code>
```

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

### Vertical Slider Example

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/slider.mdx

Demonstrates how to create a vertical slider using the `orientation` prop. Includes JSX and CSS for styling.

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

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/grid.mdx

A basic example of a Grid component with 3 columns and 2 rows, each row having a fixed height.

```jsx
<Grid columns="3" gap="3" rows="repeat(2, 64px)" width="auto">
	<DecorativeBox />
	<DecorativeBox />
	<DecorativeBox />
	<DecorativeBox />
	<DecorativeBox />
	<DecorativeBox />
</Grid>
```

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

### Menubar Anatomy

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/menubar.mdx

Import all Menubar parts and assemble them to create the component structure. This example demonstrates the basic anatomy and available sub-components.

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

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

### Run Development Server

Source: https://github.com/radix-ui/website/blob/main/README.md

Use this command to start the development server for the Radix UI website. Open http://localhost:3000 in your browser to view the result.

```bash
pnpm dev
```

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

### Slider Range Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

An example of a Slider component configured to select a range of values.

```jsx
<Slider defaultValue={[25, 75]} />
```

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

### Controlled Context Menu Example

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/overview/releases.mdx

Demonstrates how to use the controlled `open` prop on `ContextMenu.Root` to manage the open state programmatically. This is useful for reading the state and closing the menu, but opening it programmatically is discouraged.

```tsx
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 Radio Cards Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/radio-cards.mdx

Demonstrates the basic structure of Radio Cards with multiple items. Use the `defaultValue` prop to set the initially selected card and `columns` to control the layout.

```jsx
<Box maxWidth="600px">
	<RadioCards.Root defaultValue="1" columns={{ initial: "1", sm: "3" }}>
		<RadioCards.Item value="1">
			<Flex direction="column" width="100%">
				<Text weight="bold">8-core CPU</Text>
				<Text>32 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
		<RadioCards.Item value="2">
			<Flex direction="column" width="100%">
				<Text weight="bold">6-core CPU</Text>
				<Text>24 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
		<RadioCards.Item value="3">
			<Flex direction="column" width="100%">
				<Text weight="bold">4-core CPU</Text>
				<Text>16 GB RAM</Text>
			</Flex>
		</RadioCards.Item>
	</RadioCards.Root>
</Box>
```

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

### Install Radix Colors with npm, yarn, or pnpm

Source: https://github.com/radix-ui/website/blob/main/data/colors/docs/overview/installation.mdx

Install Radix Colors from your terminal using your preferred package manager. The current version is 3.0.0.

```bash
# with npm
npm install @radix-ui/colors
# with yarn
yarn add @radix-ui/colors
# with pnpm
pnpm add @radix-ui/colors
```

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

### Basic Hover Card Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/hover-card.mdx

This is a basic example of a Hover Card component. It wraps a link with the HoverCard.Root and HoverCard.Trigger, and displays content in HoverCard.Content when hovered.

```jsx
<Text>
	Follow{" "}
	<HoverCard.Root>
		<HoverCard.Trigger>
			<Link href="https://twitter.com/radix_ui" target="_blank">
				@radix_ui
			</Link>
		</HoverCard.Trigger>
		<HoverCard.Content maxWidth="300px">
			<Flex gap="4">
				<Avatar
					size="3"
					fallback="R"
					radius="full"
					src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
				/>
				<Box>
					<Heading size="3" as="h3">
						Radix
					</Heading>
					<Text as="div" size="2" color="gray" mb="2">
						@radix_ui
					</Text>
					<Text as="div" size="2">
						React components, icons, and colors for building high-quality,
						accessible UI.
					</Text>
				</Box>
			</Flex>
		</HoverCard.Content>
	</HoverCard.Root>{" "}
	for updates.
</Text>
```

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

### Checkbox Indeterminate State Example

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/checkbox.mdx

Demonstrates how to set a checkbox to an indeterminate state by controlling its state. This example includes a button to toggle between indeterminate and checked states.

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

export default () => {
	const [checked, setChecked] = React.useState("indeterminate");

	return (
		<>
			<StyledCheckbox checked={checked} onCheckedChange={setChecked}>
				<Checkbox.Indicator>
					{checked === "indeterminate" && <DividerHorizontalIcon />}
					{checked === true && <CheckIcon />}
				</Checkbox.Indicator>
			</StyledCheckbox>

			<button
				type="button"
				onClick={() =>
					setChecked((prevIsChecked) =>
						prevIsChecked === "indeterminate" ? false : "indeterminate",
					)
				}
			>
				Toggle indeterminate
			</button>
		</>
	);
};
```

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

### Basic Scroll Area Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/scroll-area.mdx

A basic example of a Scroll Area with vertical scrollbars, demonstrating its use with content that exceeds the container height. Use this for standard scrollable content.

```jsx
<ScrollArea type="always" scrollbars="vertical" style={{ height: 180 }}>
	<Box p="2" pr="8">
		<Heading size="4" mb="2" trim="start">
			Principles of the typographic craft
		</Heading>
		<Flex direction="column" gap="4">
			<Text as="p">
				Three fundamental aspects of typography are legibility, readability, and
			aesthetics. Although in a non-technical sense “legible” and “readable”
			are often used synonymously, typographically they are separate but
			related concepts.
			</Text>

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

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

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

### Basic Radio Group Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/radio-group.mdx

A basic example of a Radio Group with three selectable items. Use this to create a standard radio button selection interface where only one option can be chosen.

```jsx
<RadioGroup.Root defaultValue="1" name="example">
	<RadioGroup.Item value="1">Default</RadioGroup.Item>
	<RadioGroup.Item value="2">Comfortable</RadioGroup.Item>
	<RadioGroup.Item value="3">Compact</RadioGroup.Item>
</RadioGroup.Root>
```

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

### Basic Container Usage

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/container.mdx

Demonstrates how to use the Container component with a specific size. This example shows a Container with size '1' wrapped in a Box for styling.

```jsx
<Box style={{ background: "var(--gray-a2)", borderRadius: "var(--radius-3)" }}>
	<Container size="1">
		<DecorativeBox>
			<Box py="9" />
		</DecorativeBox>
	</Container>
</Box>
```

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

### Applying Color Scale Steps to Text

Source: https://github.com/radix-ui/website/blob/main/data/colors/docs/palette-composition/understanding-the-scale.mdx

Demonstrates how to use color scale steps 11 and 12 for text elements. Step 11 is for low-contrast text, and step 12 is for high-contrast text.

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

function App() {
  return (
    <Flex gap="2" direction="column" my="5">
      <Text size="3" style={{ color: "var(--pink-11)" }}>
        This text is Pink 11
      </Text>
      <Text size="3" style={{ color: "var(--slate-11)" }}>
        This text is Slate 11
      </Text>
      <Text size="3" style={{ color: "var(--gray-11)" }}>
        This text is Gray 11
      </Text>
      <Text size="3" weight="bold" style={{ color: "var(--pink-12)" }}>
        This text is Pink 12
      </Text>
      <Text size="3" weight="bold" style={{ color: "var(--slate-12)" }}>
        This text is Slate 12
      </Text>
      <Text size="3" weight="bold" style={{ color: "var(--gray-12)" }}>
        This text is Gray 12
      </Text>
    </Flex>
  );
}
```

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

### Heading Text Trimming (Start) with Text Trimming (End)

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/heading.mdx

Applies 'trim="start"' to the heading and 'trim="end"' to a Text component to demonstrate trimming leading space for better vertical spacing in boxed layouts.

```jsx
<Flex direction="column" gap="3">
	<Box
		style={{
			background: "var(--gray-a2)",
			border: "1px dashed var(--gray-a7)",
		}}
		p="4"
	>
		<Heading mb="1" size="3">
			Without trim
		</Heading>
		<Text>
			The goal of typography is to relate font size, line height, and line width
			in a proportional way that maximizes beauty and makes reading easier and
			more pleasant.
		</Text>
	</Box>

	<Box
		p="4"
		style={{
			background: "var(--gray-a2)",
			border: "1px dashed var(--gray-a7)",
		}}
	>
		<Heading mb="1" size="3" trim="start">
			With trim
		</Heading>
		<Text trim="end">
			The goal of typography is to relate font size, line height, and line width
			in a proportional way that maximizes beauty and makes reading easier and
			more pleasant.
		</Text>
	</Box>
</Flex>
```

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

### Basic Context Menu Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/context-menu.mdx

Demonstrates a basic context menu with various item types including submenus and separators. This is typically triggered by a right-click or long press on the trigger element.

```jsx
<ContextMenu.Root>
	<ContextMenu.Trigger>
		<RightClickZone style={{ height: 150 }} />
	</ContextMenu.Trigger>
	<ContextMenu.Content>
		<ContextMenu.Item shortcut="⌘ E">Edit</ContextMenu.Item>
		<ContextMenu.Item shortcut="⌘ D">Duplicate</ContextMenu.Item>
		<ContextMenu.Separator />
		<ContextMenu.Item shortcut="⌘ N">Archive</ContextMenu.Item>

		<ContextMenu.Sub>
			<ContextMenu.SubTrigger>More</ContextMenu.SubTrigger>
			<ContextMenu.SubContent>
				<ContextMenu.Item>Move to project…</ContextMenu.Item>
				<ContextMenu.Item>Move to folder…</ContextMenu.Item>
				<ContextMenu.Separator />
				<ContextMenu.Item>Advanced options…</ContextMenu.Item>
			</ContextMenu.SubContent>
		</ContextMenu.Sub>

		<ContextMenu.Separator />
		<ContextMenu.Item>Share</ContextMenu.Item>
		<ContextMenu.Item>Add to favorites</ContextMenu.Item>
		<ContextMenu.Separator />
		<ContextMenu.Item shortcut="⌘ ⌫" color="red">
			Delete
		</ContextMenu.Item>
	</ContextMenu.Content>
</ContextMenu.Root>
```

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

### Basic Link

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/link.mdx

A basic example of a Link component used for navigation.

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

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

### Blockquote Basic Usage

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/blockquote.mdx

A basic example of the Blockquote component displaying a quotation.

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

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

### Basic Dropdown Menu Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/dropdown-menu.mdx

Demonstrates a standard dropdown menu with various item types, including submenus and separators. Use this for common action menus triggered by a button.

```jsx
<DropdownMenu.Root>
	<DropdownMenu.Trigger>
		<Button variant="soft">
			Options
			<DropdownMenu.TriggerIcon />
		</Button>
	</DropdownMenu.Trigger>
	<DropdownMenu.Content>
		<DropdownMenu.Item shortcut="⌘ E">Edit</DropdownMenu.Item>
		<DropdownMenu.Item shortcut="⌘ D">Duplicate</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ N">Archive</DropdownMenu.Item>

		<DropdownMenu.Sub>
			<DropdownMenu.SubTrigger>More</DropdownMenu.SubTrigger>
			<DropdownMenu.SubContent>
				<DropdownMenu.Item>Move to project…</DropdownMenu.Item>
				<DropdownMenu.Item>Move to folder…</DropdownMenu.Item>

				<DropdownMenu.Separator />
				<DropdownMenu.Item>Advanced options…</DropdownMenu.Item>
			</DropdownMenu.SubContent>
		</DropdownMenu.Sub>

		<DropdownMenu.Separator />
		<DropdownMenu.Item>Share</DropdownMenu.Item>
		<DropdownMenu.Item>Add to favorites</DropdownMenu.Item>
		<DropdownMenu.Separator />
		<DropdownMenu.Item shortcut="⌘ ⌫" color="red">
			Delete
		</DropdownMenu.Item>
	</DropdownMenu.Content>
</DropdownMenu.Root>
```

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

### Basic Dialog Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/dialog.mdx

Demonstrates a typical dialog with a trigger button, title, description, form fields, and action buttons. Use this for standard modal interactions.

```jsx
<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">
			Make changes to your profile.
		</Dialog.Description>

		<Flex direction="column" gap="3">
			<label>
				<Text as="div" size="2" mb="1" weight="bold">
					Name
				</Text>
				<TextField.Root
					defaultValue="Freja Johnsen"
					placeholder="Enter your full name"
				/>
			</label>
			<label>
				<Text as="div" size="2" mb="1" weight="bold">
					Email
				</Text>
				<TextField.Root
					defaultValue="freja@example.com"
					placeholder="Enter your email"
				/>
			</label>
		</Flex>

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

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

### Create Custom Toast API (Usage)

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/toast.mdx

Demonstrates how to use a custom Toast component by abstracting primitive parts. Ensure the custom Toast component is correctly imported.

```jsx
import { Toast } from "./your-toast";

export default () => (
	<Toast title="Upgrade available" content="We've just released Radix 3.0!">
		<button onClick={handleUpgrade}>Upgrade</button>
	</Toast>
);
```

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

### Basic Checkbox Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/checkbox.mdx

A simple checkbox integrated with text, demonstrating its basic usage.

```jsx
<Text as="label" size="2">
	<Flex gap="2">
		<Checkbox defaultChecked />
		Agree to Terms and Conditions
	</Flex>
</Text>
```

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

### Import and Basic Structure

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/toolbar.mdx

Import the Toolbar component and demonstrate its basic structure with various child elements like buttons, separators, links, and toggle groups.

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

export default () => (
	<Toolbar.Root>
		<Toolbar.Button />
		<Toolbar.Separator />
		<Toolbar.Link />
		<Toolbar.ToggleGroup>
			<Toolbar.ToggleItem />
		</Toolbar.ToggleGroup>
	</Toolbar.Root>
);
```

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

### Toast with Alternative Action for Screen Readers

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/toast.mdx

Shows how to use the `altText` prop on `Toast.Action` to provide screen reader-specific instructions for an action. Includes examples for both background and foreground toasts with custom durations.

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

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

### Slider Color Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

Illustrates applying different colors to the Slider using the `color` prop.

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

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

### Slider Variant Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/slider.mdx

Shows different visual styles for the Slider using the `variant` prop.

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

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

### Responsive Flex Layout with Object Syntax

Source: https://github.com/radix-ui/website/blob/main/data/blog/themes-3.mdx

Illustrates using responsive object syntax to define different widths for a Flex layout at various breakpoints (initial, sm, md).

```jsx
<Flex width={{ initial: "100%", sm: "300px", md: "500px" }} />
```

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

### Basic Aspect Ratio Usage

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/aspect-ratio.mdx

Use the AspectRatio component to wrap your content and specify the desired ratio. This example demonstrates a 16:8 ratio with an image.

```jsx
<AspectRatio ratio={16 / 8}>
	<img
		src="https://images.unsplash.com/photo-1479030160180-b1860951d696?&auto=format&fit=crop&w=1200&q=80"
		alt="A house in a forest"
		style={{
			objectFit: "cover",
			width: "100%",
			height: "100%",
			borderRadius: "var(--radius-2)",
		}}
	/>
</AspectRatio>
```

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

### Menubar with Checkbox Items

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/components/menubar.mdx

Demonstrates how to implement checkbox items in a Menubar using `Menubar.CheckboxItem` and managing their checked state.

```jsx
import * as React from "react";
import { CheckIcon } from "@radix-ui/react-icons";
import { Menubar } from "radix-ui";

export default () => {
	const [checked, setChecked] = React.useState(true);

	return (
		<Menubar.Root>
			<Menubar.Menu>
				<Menubar.Trigger>…</Menubar.Trigger>
				<Menubar.Portal>
					<Menubar.Content>
						<Menubar.Item>…</Menubar.Item>
						<Menubar.Item>…</Menubar.Item>
						<Menubar.Separator />
						<Menubar.CheckboxItem
							checked={checked}
						onCheckedChange={setChecked}
						>
							<Menubar.ItemIndicator>
								<CheckIcon />
							</Menubar.ItemIndicator>
							Checkbox item
						</Menubar.CheckboxItem>
					</Menubar.Content>
				</Menubar.Portal>
			</Menubar.Menu>
		</Menubar.Root>
	);
};
```

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

### Basic Progress Bar

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/progress.mdx

A simple Progress component displayed within a Box. This is a basic usage example.

```jsx
<Box maxWidth="300px">
	<Progress />
</Box>
```

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

### Import Slot Component

Source: https://github.com/radix-ui/website/blob/main/data/primitives/docs/utilities/slot.mdx

Import the Slot component from the radix-ui library. This is the initial setup for using Slot.

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

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

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

### RadioGroup High Contrast Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/radio-group.mdx

Increase color contrast with the background by using the `highContrast` prop. This is useful for accessibility.

```jsx
<Grid rows="2" gap="2" display="inline-grid" flow="column">
	<RadioGroup.Root color="indigo" defaultValue="1">
		<RadioGroup.Item value="1" />
	</RadioGroup.Root>

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

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

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

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

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

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

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

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

	<RadioGroup.Root color="gray" defaultValue="1" highContrast>
		<RadioGroup.Item value="1" />
	</RadioGroup.Root>
</Grid>
```

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

### Default Cursors Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/theme/cursors.mdx

Demonstrates the default cursor appearances for various interactive elements like buttons, links, checkboxes, and switches, including disabled states.

```jsx
<Flex align="center" gap="4" wrap="wrap">
	<Flex align="center" gap="3" wrap="wrap">
		<Button>Button</Button>
		<Button asChild>
			<a href="#">Link</a>
		</Button>
		<Button disabled>Disabled</Button>
	</Flex>
	<Button variant="ghost">Ghost button</Button>
	<Link href="#" size="2">
		Link
	</Link>
	<Checkbox defaultChecked />
	<Switch defaultChecked />
	<Switch defaultChecked disabled />
</Flex>
```

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

### RadioGroup Size Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/radio-group.mdx

Control the size of the radio buttons using the `size` prop. Multiple sizes are available.

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

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

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

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

### Basic Kbd Usage

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/kbd.mdx

Renders a basic keyboard input element.

```jsx
<Kbd>Shift + Tab</Kbd>
```

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

### Truncate Link Text

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/link.mdx

Example of truncating link text with an ellipsis when it overflows its container, using the `truncate` prop.

```jsx
<Flex maxWidth="150px">
	<Link href="#" truncate>
		Sign up to the newsletter
	</Link>
</Flex>
```

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

### Card Variant Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/card.mdx

Shows the different visual styles available for the Card component using the `variant` prop.

```jsx
<Flex direction="column" gap="3" maxWidth="350px">
	<Card variant="surface">
		<Text as="div" size="2" weight="bold">
			Quick start
		</Text>
		<Text as="div" color="gray" size="2">
			Start building your next project in minutes
		</Text>
	</Card>

	<Card variant="classic">
		<Text as="div" size="2" weight="bold">
			Quick start
		</Text>
		<Text as="div" color="gray" size="2">
			Start building your next project in minutes
		</Text>
	</Card>
</Flex>
```

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

### Using Radix Colors with vanilla-extract

Source: https://github.com/radix-ui/website/blob/main/data/colors/docs/overview/usage.mdx

Import color scales and use vanilla-extract's createTheme to define themes. Colors are then accessed via variables within styles.

```javascript
import {
	gray,
	blue,
	red,
	green,
	grayDark,
	blueDark,
	redDark,
	greenDark,
} from "@radix-ui/colors";
import { createTheme } from "@vanilla-extract/css";

export const [theme, vars] = createTheme({
	colors: {
		...gray,
		...blue,
		...red,
		...green,
	},
});

export const darkTheme = createTheme(vars, {
	colors: {
		...grayDark,
		...blueDark,
		...redDark,
		...greenDark,
	},
});

// Use the colors in your styles
export const styles = {
	button: style({
		backgroundColor: vars.colors.blue4,
		color: vars.colors.blue11,
		borderColor: vars.colors.blue7,
		":hover": {
			backgroundColor: vars.colors.blue5,
			borderColor: vars.colors.blue8,
		},
	}),
};

// Apply your theme to it
export default function App() {
	return (
		<body className={theme}>
			<button className={styles.button}>Radix Colors</button>
		</body>
	);
}
```

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

### Basic Data List Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/data-list.mdx

Demonstrates a typical usage of the DataList component to display various types of information like status, ID, name, email, and company. Includes interactive elements like a copy button and links.

```jsx
<DataList.Root>
	<DataList.Item align="center">
		<DataList.Label minWidth="88px">Status</DataList.Label>
		<DataList.Value>
			<Badge color="jade" variant="soft" radius="full">
				Authorized
			</Badge>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">ID</DataList.Label>
		<DataList.Value>
			<Flex align="center" gap="2">
				<Code variant="ghost">u_2J89JSA4GJ</Code>
				<IconButton
					size="1"
					aria-label="Copy value"
					color="gray"
					variant="ghost"
				>
					<CopyIcon />
				</IconButton>
			</Flex>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">Name</DataList.Label>
		<DataList.Value>Vlad Moroz</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">Email</DataList.Label>
		<DataList.Value>
			<Link href="mailto:vlad@workos.com">vlad@workos.com</Link>
		</DataList.Value>
	</DataList.Item>
	<DataList.Item>
		<DataList.Label minWidth="88px">Company</DataList.Label>
		<DataList.Value>
			<Link target="_blank" href="https://workos.com">
				WorkOS
			</Link>
		</DataList.Value>
	</DataList.Item>
</DataList.Root>
```

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

### RadioGroup Color Examples

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/radio-group.mdx

Apply a specific color to the radio buttons using the `color` prop. A variety of colors are supported.

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

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

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

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

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

### Basic Popover Example

Source: https://github.com/radix-ui/website/blob/main/data/themes/docs/components/popover.mdx

A standard popover with a button trigger and content including a text area and comment button. This demonstrates the core structure of a popover.

```jsx
<Popover.Root>
	<Popover.Trigger>
		<Button variant="soft">
			<ChatBubbleIcon width="16" height="16" />
			Comment
		</Button>
	</Popover.Trigger>
	<Popover.Content width="360px">
		<Flex gap="3">
			<Avatar
				size="2"
				src="https://images.unsplash.com/photo-1607346256330-dee7af15f7c5?&w=64&h=64&dpr=2&q=70&crop=focalpoint&fp-x=0.67&fp-y=0.5&fp-z=1.4&fit=crop"
				fallback="A"
				radius="full"
			/>
			<Box flexGrow="1">
				<TextArea placeholder="Write a comment…" style={{ height: 80 }} />
				<Flex gap="3" mt="3" justify="between">
					<Flex align="center" gap="2" asChild>
						<Text as="label" size="2">
							<Checkbox />
							<Text>Send to group</Text>
						</Text>
					</Flex>

					<Popover.Close>
						<Button size="1">Comment</Button>
					</Popover.Close>
				</Flex>
			</Box>
		</Flex>
	</Popover.Content>
</Popover.Root>
```