Primitives

A UI primitive is a reusable component or set of component parts with a focused role, such as a button, checkbox, or dialog. It provides a building block that you can configure and combine with others.

Radix UI and Base UI provide unstyled components that handle interaction behavior while leaving styling to the application. Catalyst's primitives include PMI styling and variants, using native elements and supporting libraries such as Radix where appropriate. Check each primitive's documentation for its specific API.

Start with a primitive

• Button — Trigger an action.
• Text Field — Collect text input.
• Card — Group related content.
• Dialog — Present a focused interaction in an overlay.

Browse the sidebar for the full reference. When assembling primitives, provide meaningful labels and verify keyboard and focus behavior in the finished interface. See Compositions for guidance on combining them.