# Radix UI Components

> See [Radix in Webstudio](https://webstudio.is/radix) 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](https://www.radix-ui.com/primitives/docs/overview/introduction)

> 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*

{% embed url="<https://www.youtube.com/watch?v=E3mZ6daJMjg>" %}

## 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.webstudio.is/university/radix.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.