ui-components

To build accessible UI primitives with Radix and Tailwind, you create components using Radix for ARIA semantics and CVA paired with Tailwind v4 tokens for consistent theming and responsive design.

The standard way to add a Storybook story for a design system component is to include it alongside the primitive under packages/ui/src/components, ensuring the component's behavior and accessibility are documented and verified.

CVA works with Tailwind v4 tokens to provide consistent theming and responsive design across UI primitives, allowing you to apply structured variant styles directly within your component logic.

You test accessibility for Radix UI components by integrating accessibility checks directly into the component workflow, ensuring keyboard interactions and ARIA semantics pass before finalizing the primitive.

You can use custom scripts and references when standardizing UI components by including optional scripts, references, or assets directories alongside the required YAML frontmatter that documents usage conventions.

Shared UI components have inconsistent styling across the library when they lack a standardized contract for styling and behavior, which this approach solves by enforcing CVA, Tailwind tokens, and Radix-based primitives.