### Styling and Composing Radix Primitives in React

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

This snippet demonstrates how to apply styles to Radix UI components using a CSS-in-JS approach and then compose them into custom React components. It showcases the consistent API for `Tooltip`, `Popover`, and `Dialog` primitives, including portal usage and focus management.

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

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

### Compose a custom Tooltip component

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

Create a reusable Tooltip wrapper with custom styling and portal rendering. Use asChild prop to compose the trigger with existing elements.

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

Build a Popover component with custom focus management and collision handling. Use onOpenAutoFocus to control which element receives focus when the popover opens.

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

Create a Dialog component with custom focus behavior on open. Use onOpenAutoFocus to programmatically focus the close button when the dialog appears.

```JavaScript
// 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 components with CSS-in-JS

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

Use styled components to add custom styling to Tooltip, Popover, and Dialog content. Each component accepts standard CSS properties for appearance customization.

```JavaScript
// 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",
});
```

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