Radix UI

https://www.radix-ui.com/docs
Admin
Radix UI is an open-source library of unstyled, accessible React primitives for building...
Tokens:2,294
Snippets:42
Trust Score:9.8
Update:1 week ago
Show doc for...
Tokens:
Raw
### Complete MyComponent.jsx showing consistent primitives API

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

Combines styled components and custom Tooltip, Popover, and Dialog implementations demonstrating consistent API patterns across primitives.

```jsx
// Add styles with your preferred CSS technology

const TooltipContent = styled(Tooltip.Content, {

	backgroundColor: "black",

	borderRadius: "3px",

	padding: "5px"

});



const PopoverContent = styled(Popover.Content, {

	backgroundColor: "white",

	boxShadow: "0 2px 10px -3px rgb(0 0 0 / 20%)",

	borderRadius: "3px",

});



const DialogContent = styled(Dialog.Content, {

	backgroundColor: "white",

	boxShadow: "0 3px 15px -4px rgb(0 0 0 / 30%)",

	borderRadius: "5px",

});



// Compose a custom Tooltip component

export const StatusTooltip = ({ state, label }) => {

	return (

		<Tooltip.Root>

			<Tooltip.Trigger asChild>

				<Text>

					<Status variant={state} />

				</Text>

			</Tooltip.Trigger>

			<Tooltip.Portal>

				<TooltipContent>

					<Tooltip.Arrow />

					{label}

				</TooltipContent>

			</Tooltip.Portal>

		</Tooltip.Root>

	);

};   // Compose a Popover with custom focus and positioning

export const StatusPopover = ({ children }) => {

	const popoverCloseButton = React.useRef(null);

	return (

		<Popover.Root>

			<Popover.Trigger>View status</Popover.Trigger>

			<Popover.Portal>

				<PopoverContent
					align="start"
					collisionPadding={10}
					onOpenAutoFocus={(event) => {
						// Focus the close button when popover opens
						popoverCloseButton.current?.focus();
						event.preventDefault();
					}}
				>

					{children}

					<Popover.Close ref={popoverCloseButton}>

						Close

					</Popover.Close>

				</PopoverContent>

			</Popover.Portal>

		</Popover.Root>

	);

};   // Compose a Dialog with custom focus management

export const InfoDialog = ({ children }) => {

	const dialogCloseButton = React.useRef(null);

	return (

		<Dialog.Root>

			<Dialog.Trigger>View details</Dialog.Trigger>

			<Dialog.Overlay />

			<Dialog.Portal>

				<DialogContent
					onOpenAutoFocus={(event) => {
						// Focus the close button when dialog opens
						dialogCloseButton.current?.focus();
						event.preventDefault();
					}}
				>

					{children}

					<Dialog.Close ref={dialogCloseButton}>

						Close

					</Dialog.Close>

				</DialogContent>

			</Dialog.Portal>

		</Dialog.Root>

	);

};
```

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

### Style Radix component parts with CSS-in-JS

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

Demonstrates styling Tooltip.Content, Popover.Content, and Dialog.Content components using a styled utility.

```jsx
// Add styles with your preferred CSS technology

const TooltipContent = styled(Tooltip.Content, {

	backgroundColor: "black",

	borderRadius: "3px",

	padding: "5px"

});



const PopoverContent = styled(Popover.Content, {

	backgroundColor: "white",

	boxShadow: "0 2px 10px -3px rgb(0 0 0 / 20%)",

	borderRadius: "3px",

});



const DialogContent = styled(Dialog.Content, {

	backgroundColor: "white",

	boxShadow: "0 3px 15px -4px rgb(0 0 0 / 30%)",

	borderRadius: "5px",

});
```

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

### Compose a custom StatusTooltip component

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

Composes an unstyled Tooltip with custom triggers, portals, and arrows without specificity conflicts.

```jsx




// Compose a custom Tooltip component

export const StatusTooltip = ({ state, label }) => {

	return (

		<Tooltip.Root>

			<Tooltip.Trigger asChild>

				<Text>

					<Status variant={state} />

				</Text>

			</Tooltip.Trigger>

			<Tooltip.Portal>

				<TooltipContent>

					<Tooltip.Arrow />

					{label}

				</TooltipContent>

			</Tooltip.Portal>

		</Tooltip.Root>

	);

};
```

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

### Compose a Popover with custom focus and positioning

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

Leverages Popover primitive parts to customize positioning attributes and manage focus via onOpenAutoFocus.

```jsx
// Compose a Popover with custom focus and positioning

export const StatusPopover = ({ children }) => {

	const popoverCloseButton = React.useRef(null);

	return (

		<Popover.Root>

			<Popover.Trigger>View status</Popover.Trigger>

			<Popover.Portal>

				<PopoverContent
					align="start"
					collisionPadding={10}
					onOpenAutoFocus={(event) => {
						// Focus the close button when popover opens
						popoverCloseButton.current?.focus();
						event.preventDefault();
					}}
				>

					{children}

					<Popover.Close ref={popoverCloseButton}>

						Close

					</Popover.Close>

				</PopoverContent>

			</Popover.Portal>

		</Popover.Root>

	);

};
```

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

### Compose a Dialog with custom focus management

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

Configures a Dialog component with custom overlay, portal, and automatic focus control on the close button.

```jsx
// Compose a Dialog with custom focus management

export const InfoDialog = ({ children }) => {

	const dialogCloseButton = React.useRef(null);

	return (

		<Dialog.Root>

			<Dialog.Trigger>View details</Dialog.Trigger>

			<Dialog.Overlay />

			<Dialog.Portal>

				<DialogContent
					onOpenAutoFocus={(event) => {
						// Focus the close button when dialog opens
						dialogCloseButton.current?.focus();
						event.preventDefault();
					}}
				>

					{children}

					<Dialog.Close ref={dialogCloseButton}>

						Close

					</Dialog.Close>

				</DialogContent>

			</Dialog.Portal>

		</Dialog.Root>

	);

};
```
Tokens:
Raw