Radix UI Primitives

Radix UI Dialog provides a high-level, accessible dialog component (often called a modal) that handles focus management, screen reader announcements, and keyboard interactions (like closing on Esc).

For full documentation, including component API, installation, and usage examples, visit the official Radix UI documentation site.

The @radix-ui/react-announce primitive is a utility designed to announce messages to assistive technologies (like screen readers) using an ARIA live region. This is useful for communicating state changes or updates that are not immediately obvious to users relying on non-visual interfaces.

For detailed API documentation and usage patterns, visit the official Radix UI documentation: https://radix-ui.com/primitives/docs/utilities/announce.

The @radix-ui/react-aspect-ratio utility allows you to render content within a specific aspect ratio container. This is useful for maintaining consistent proportions for images, videos, or other media elements across different screen sizes.

For detailed documentation and usage examples, visit the official Radix UI documentation: https://radix-ui.com/primitives/docs/utilities/aspect-ratio.

Radix UI Alert Dialog is a primitive for building accessible alert dialogs. It is used to interrupt the user with important information that requires immediate attention, such as a confirmation for a destructive action.

For detailed documentation, component API, and usage examples, visit the official Radix UI documentation: https://radix-ui.com/primitives/docs/components/alert-dialog.

Radix Primitives are unstyled by default, meaning they ship with zero opinionated presentational styles. This allows you to build your own design system without fighting against pre-existing CSS.

Styling approach:

• Zero Default Styles: You are not required to override complex CSS rules; you start from a clean slate.
• Minimal Resets: Components may include minimal CSS-in-JS style objects intended only to reset user-agent styles and provide a baseline for your own styling.
• Tool Agnostic: You can use any styling methodology (CSS Modules, Tailwind, Styled Components, etc.). The library does not enforce a specific tool.

Radix Primitives use a finite state machine model for component states. Instead of using arbitrary boolean flags, states are predetermined during design and expressed as enumerated strings. This makes state transitions explicit and deterministic.

To interact with a component's state in your styling or logic, use the data-state attribute, which is exposed directly on the component's DOM element.

Key patterns:

• Controlled vs Uncontrolled: Components with internal state can be used in an uncontrolled manner (managed by the primitive) or a controlled manner (managed by you via props, similar to standard React form elements).
• State Representation: Prefer enumerated strings over booleans for stateful data to ensure clarity.

Radix Primitives follow a 1-to-1 strategy: a single component typically renders only a single DOM element. This design choice provides several benefits for consumers:

1. Direct DOM Access: The API provides direct access to the underlying DOM node.
2. Predictable Refs: You can forward user-provided DOM refs to the component, and they will attach to the underlying DOM node exactly as expected.
3. Event Handler Composition: Just like native DOM nodes, you can pass your own event handlers directly to a component. You can also stop internal handlers from firing if necessary.
4. Styling Flexibility: Because components render minimal DOM structures, they can be composed or styled similarly to standard JSX elements.

The @repo/ssr-testing package is a testing playground used to verify Server-Side Rendering (SSR) support for Radix Primitives within a Next.js environment. To start the development server for this playground, run the following command from the repository root.

pnpm dev:ssr

Radix Primitives requires pnpm as a package manager. To install the library, first install pnpm globally, then run pnpm install in the project directory to install the dependencies.

npm install -g pnpm
pnpm install

To use the react-password-toggle-field component, install the radix-ui package using your preferred package manager.

$ yarn add radix-ui
# or
$ npm install radix-ui

Full documentation for all components, including API references, usage guides, and accessibility details, is available at the official Radix website.

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