All icons are available as individual React components. Install Radix Icons from npm:

Components, icons, and colors for building high‑quality, accessible UI. Free and open-source.

Radix Homepage. Made by WorkOS. Themes Themes Primitives Primitives Icons Icons Colors Colors. Documentation Custom palette Blog. A gorgeous, accessible color system for user interfaces. Comprehensive color system for designing beautiful, accessible websites and apps. Go to docs Custom palette.

Ghost. Use the ghost variant to display a button without chrome. Ghost buttons behave like text in layout, as they use a negative margin to optically align themselves against their siblings while maintaining the padding in active and hover states.

Radix documentation contains real-world examples, extensive API references, accessibility details, and full TypeScript support. All components share a similar API, creating a consistent developer experience. You will love working with Radix Primitives.

Radix Primitives were designed to encapsulate accessibility concerns and other complex functionalities, while ensuring you retain complete control over styling. For convenience, stateful components include a data-state attribute.

Mar 23, 2024 · Radix Themes 3.0 introduces a number of new components for building dashboards and data-heavy interfaces. They are built and designed with the level of rigor and care that you’ve come to expect from Radix, and as usual, they are accessible to keyboard and screen reader users. Here’s a quick overview of the main highlights. Spinner

If you have an icon inside the button, you can use the button’s disabled state and wrap the icon in a standalone <Spinner> to achieve a more sophisticated design.

Quickly make any icon accessible by wrapping it and providing a meaningful label.

We expose --radix-navigation-menu-viewport-[width|height] and data-motion['from-start'|'to-start'|'from-end'|'to-end'] attributes to allow you to animate Viewport size and Content position based on the enter/exit direction. Combining these with position: absolute; allows you to create smooth overlapping animation effects when moving between items.