▫️Radix UI Components

See Radix in Webstudio for an overview of how Radix components work in Webstudio.

An open source component library optimized for fast development, easy maintenance, and accessibility built directly into Webstudio.

Radix Documentation

An open-source UI component library for building high-quality, accessible design systems and web apps. Radix Primitives is a low-level UI component library with a focus on accessibility, customization and developer experience. You can use these components either as the base layer of your design system, or adopt them incrementally.

-- Radix UI

Why Radix?

Radix was chosen because it prioritizes accessibility while giving full CSS control. All Radix components are WAI-ARIA compliant, ensuring proper keyboard navigation and screen reader support.

Available Components

Radix enables you to create complex interactive elements without writing code:

• Navigation Menu – Horizontal navigation with dropdown support (mega menus)

• Sheet – Slide-out panels, perfect for mobile navigation

• Dialog – Modal windows and popups

• Tooltip – Hover hints and contextual information

• Popover – Click-triggered floating content

• Accordion – Expandable/collapsible content sections

• Collapsible – Simple show/hide functionality

• Tabs – Tabbed content interfaces

• Select – Customizable dropdown selects

• Switch – Toggle switches

• Checkbox – Fully customizable checkboxes

• Radio Group – Styled radio button groups

• Label – Accessible form labels

Each component can be fully styled using Webstudio's Style Panel while maintaining all accessibility features.