Radix UI Documentation

The Menubar is a visually persistent menu common in desktop applications, providing quick access to a consistent set of commands.

Key features include:

• Controlled or uncontrolled state management.
• Support for submenus with configurable reading direction.
• Support for items, labels, and groups of items.
• Support for checkable items (single or multiple selection).
• Customizable side, alignment, offsets, and collision handling.
• Optional pointing arrow rendering.
• Fully managed focus and full keyboard navigation, including typeahead support.

The Select component displays a list of options for a user to pick from, which is triggered by a button. It is designed to be highly flexible and accessible, following the WAI-ARIA listbox pattern.

Key features include:

• Supports both controlled and uncontrolled states.
• Offers two positioning modes.
• Supports items, labels, and groups of items.
• Fully managed focus and full keyboard navigation.
• Supports custom placeholders and typeahead.
• Supports Right to Left (RTL) direction.

Radix Primitives are unstyled components, meaning they do not come with any default visual presentation. They are designed to be compatible with any styling solution (CSS, CSS-in-JS, etc.), giving you complete control over the visual layer while Radix handles accessibility and functionality.

Key styling mechanisms include:

• className prop: All components and their parts accept a className prop which is passed directly to the underlying DOM element.
• data-state attribute: Stateful components expose their current state via a data-state attribute (e.g., data-state="open" or data-state="closed"), allowing you to style different states easily.

The Progress component displays a progress bar related to a task. It inherits props from the Progress primitive and supports common margin props for layout.

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

Liveblocks uses Radix Primitives, Tailwind CSS, and React to build their design system across their marketing site, documentation, and product dashboard.

Key benefits noted by Liveblocks:

• Native-like behavior: Radix handles complex interactions (like nested menu items, screen real-estate management, and keyboard navigation) that are difficult to build from scratch.
• Unstyled components: The unstyled nature of Radix allows for complete design freedom and easy integration with Tailwind CSS.
• Granular installation: Developers can install only the specific components needed, allowing for incremental adoption.

Components currently used by Liveblocks:

• Dialog
• AlertDialog
• Menu
• ContextMenu
• ScrollArea
• Tooltip
• NavigationMenu (used for main navigation to improve accessibility)

To show a new toast every time a user performs an action (like clicking a button), you have two main options:

1. Declarative State: Use React state to maintain a count of active toasts and map over that count to render multiple Toast.Root instances.
2. Imperative API: Create a custom wrapper component using useImperativeHandle to expose a publish() method that increments a local state count.

export default () => {
  const [savedCount, setSavedCount] = React.useState(0);

  return (
    <div>
      <form onSubmit={() => setSavedCount((count) => count + 1)}>
        <button>save</button>
      </form>

      {Array.from({ length: savedCount }).map((_, index) => (
        <Toast.Root key={index}>
          <Toast.Description>Saved!</Toast.Description>
        </Toast.Root>
      ))}
    </div>
  );
};

The Label component is built on the native label element. It automatically applies correct labeling when:

1. Wrapping a control element.
2. Using the htmlFor attribute to point to a control's id.

To ensure custom controls work correctly with Label, ensure they use native elements like button or input as their base.