# Components

Every documented Udixio UI component (33 total). React is always available; Angular only where listed.

For any component below, fetch its own document:

- `https://ui.udixio.fr/components/<slug>.md` — guide and API together
- `https://ui.udixio.fr/components/<slug>/overview.md` — usage and code examples only
- `https://ui.udixio.fr/components/<slug>/api.md` — props, inputs and outputs only

Insert `.react` or `.angular` before `.md` to narrow any of those to one framework, e.g. `switch/api.angular.md`.

## Action

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **Button** | `button` | stable | react, angular | Buttons prompt most actions in a UI |
| **Chip** | `chip` | beta | react, angular | Chips prompt most actions in a UI |
| **Fab** | `fab` | stable | react, angular | Floating action buttons expose the primary action on a screen. |
| **FabMenu** | `fab-menu` | stable | react, angular | FabMenu exposes related primary actions from one toggleable FAB. |
| **IconButton** | `icon-button` | stable | react, angular | Icon buttons expose a frequent action through one unambiguous icon. |

## Input

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **Chips** | `chips` | beta | react, angular | Chips group for input or selection lists |
| **Slider** | `slider` | beta | react, angular | Sliders let users make selections from a range of values. |
| **Switch** | `switch` | beta | react, angular | Switches toggle the selection of a single item on or off. |
| **TextField** | `text-field` | beta | react, angular | Text fields let users enter text into a UI. |

## Selection

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **Checkbox** | `checkbox` | beta | react, angular | Checkboxes let people select one or more independent options. |
| **ContextMenu** (part of `menu`) | `context-menu` | beta | react, angular | Opens a Menu at the pointer or keyboard context-menu position. |
| **DatePicker** | `date-picker` | beta | react, angular | DatePickers let users select a date, or a range of dates. |
| **Menu** | `menu` | beta | react, angular | Menu displays a list of choices on a temporary surface. |
| **MenuGroup** (part of `menu`) | `menu-group` | beta | react, angular | MenuGroup renders a group of menu items with persistent styling. |
| **MenuHeadline** (part of `menu`) | `menu-headline` | beta | react, angular | A non-interactive visual heading inside a Menu. |
| **MenuItem** (part of `menu`) | `menu-item` | beta | react, angular | An action or selectable choice within a Menu. |

## Navigation

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **NavigationRail** | `navigation-rail` | beta | react, angular | Navigation rails let people switch between UI views on mid-sized devices |
| **TabGroup** (part of `Tabs`) | `tab-group` | beta | react, angular | TabGroup shares selection state between a `Tabs` tablist and a `TabPanels` placed anywhere in its subtree. |
| **TabPanel** (part of `Tabs`) | `tab-panel` | beta | react, angular | TabPanel holds the content for a single tab. |
| **TabPanels** (part of `Tabs`) | `tab-panels` | beta | react, angular | TabPanels renders the panel for the selected tab, sliding it in from the direction the selection moved. |
| **Tabs** | `tabs` | beta | react, angular | Tabs organize content across different screens and views |

## Communication

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **AnchorPositioner** | `anchor-positioner` | beta | react, angular | Floats `children` next to an anchor element using native CSS Anchor Positioning where supported, falling back to a `position: fixed` element tracked against the anchor's rect. |
| **ProgressIndicator** | `progress-indicator` | beta | react, angular | Progress indicators express an unspecified wait time or display the length of a process. |
| **Snackbar** | `snackbar` | beta | react, angular | Snackbars show a brief, non-blocking status message about an app process. |
| **Tooltip** | `tooltip` | beta | react, angular | Tooltips display brief labels or messages |

## Layout

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **Card** | `card` | stable | react, angular | Cards display content and actions about a single subject |
| **Carousel** | `carousel` | beta | react, angular | Carousels show a collection of items that can be scrolled on and off the screen |
| **Divider** | `divider` | beta | react, angular | Dividers are thin lines that group content in lists or other containers |
| **SideSheet** | `side-sheet` | beta | react, angular | Side sheets show secondary content anchored to the side of the screen. |

## Other

| Component | Slug | Status | Frameworks | Description |
|-----------|------|--------|------------|-------------|
| **CarouselItem** (part of `Carousel`) | `carousel-item` | beta | react, angular | A single slide inside a `Carousel`. |
| **NavigationRailItem** (part of `NavigationRail`) | `navigation-rail-item` | beta | react, angular | A single destination inside a `NavigationRail`; renders as a link when `href` is provided, otherwise as a button. |
| **NavigationRailSection** (part of `NavigationRail`) | `navigation-rail-section` | beta | react, angular | A non-interactive label that groups the `NavigationRailItem`s following it. |
| **Tab** (part of `Tabs`) | `tab` | beta | react, angular | A single tab inside a `Tabs` tablist; renders as a link when `href` is provided, otherwise as a button. |