# Introduction (/docs)





Qeetrix is the design system behind the Qeet Group suite. Every Qeet front end — Qeet ID, Qeet Pay,
Qeet Notify and the rest — is built from it, so a button in one product looks and behaves like a
button in every other.

<div className="not-prose flex flex-wrap items-center gap-3 rounded-xl border p-6">
  <Button>
    Primary
  </Button>

  <Button variant="secondary">
    Secondary
  </Button>

  <Button variant="outline">
    Outline
  </Button>

  <Button variant="ghost">
    Ghost
  </Button>

  <Badge variant="success">
    Live
  </Badge>
</div>

## Packages [#packages]

| Package          | What it contains                                                                   |
| ---------------- | ---------------------------------------------------------------------------------- |
| `@qeetrix/ui`    | 145 React UI modules built on Base UI, plus the design tokens, Qeet fonts and logo |
| `@qeetrix/icons` | 1,863 icons in round and sharp shapes, plus the Qeet logo and wordmark             |

## Principles [#principles]

* **Token-driven.** Colour, spacing, radius and elevation come from design tokens, authored in
  OKLCH. Components never hard-code a value, so re-theming happens in one place.
* **Accessible by construction.** Components are built on Base UI, which implements WAI-ARIA
  behaviour, and every one is tested with axe. Text and surface pairs meet WCAG AA contrast.
* **Light and dark.** Every component is themed through semantic tokens, and the theme follows a
  `.dark` class on the page.

## Next steps [#next-steps]

<Cards>
  <Card title="Installation" href="/docs/installation" description="Add Qeetrix to a React 19 + Tailwind CSS v4 app." />

  <Card title="Guides" href="/docs/guides" description="Theming, Next.js and TanStack Start setup, and accessibility." />

  <Card title="Foundations" href="/docs/foundations" description="Colour, type, space, elevation and motion, from the design tokens." />

  <Card title="Icons" href="/docs/foundations/icons" description="Use icons and the Qeet logos from @qeetrix/icons." />

  <Card title="Components" href="/docs/components" description="Every component, with its import, variants, states and accessibility." />
</Cards>


# Installation (/docs/installation)



## Install the packages [#install-the-packages]

```bash
bun add @qeetrix/ui @qeetrix/icons
```

`@qeetrix/ui` needs React and React DOM 19 or later and Tailwind CSS 4 or later. Install them too if
your app doesn't have them yet.

## Import the stylesheet [#import-the-stylesheet]

In your global stylesheet, import Qeetrix in place of Tailwind:

```css title="globals.css"
@import "@qeetrix/ui/styles.css";
```

This brings in Tailwind itself, the Qeetrix tokens and theme mapping, and the Qeet fonts. It also
tells Tailwind to scan the Qeetrix package, so component classes are generated without an extra
`@source` line.

<Callout type="warn">
  Don't also add `@import "tailwindcss"` — Qeetrix already includes it, and importing it twice
  duplicates Tailwind's base styles.
</Callout>

## Use a component [#use-a-component]

```tsx
import { Button } from "@qeetrix/ui";

export function Continue() {
  return <Button variant="outline">Continue</Button>;
}
```

## Dark mode [#dark-mode]

The light and dark themes switch on a `.dark` class. Wrap your app in `ThemeProvider` to manage it:

```tsx
import { ThemeProvider } from "@qeetrix/ui";

export function App({ children }: { children: React.ReactNode }) {
  return <ThemeProvider defaultTheme="system">{children}</ThemeProvider>;
}
```

Its keyboard shortcut is off by default. Pass `enableKeyboardShortcut` to toggle the theme with
<kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd>.

If your app already toggles a `.dark` class — for example with `next-themes` — leave
`ThemeProvider` out. The tokens follow the class either way, and two theme managers would fight
over it.

For the full setup in your framework, including a script that avoids a flash of the wrong theme on
load, see [Next.js](/docs/guides/nextjs) or [TanStack Start](/docs/guides/tanstack-start).

## Raw tokens [#raw-tokens]

For values outside components, such as charts or emails:

* `@qeetrix/ui/tokens.css` — every token as a `--qx-*` CSS variable, including the primitive ramps
* `@qeetrix/ui/tokens.json` — the same tokens, resolved for each theme


# Access Review (/docs/components/access-review)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { AccessReview } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/access-review`.

### States [#states]

`hover` · `active` · `disabled` · `loading` · `checked` · `indeterminate` · `selected` · `busy` · `empty`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `table` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Accordion (/docs/components/accordion)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Accordion } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/accordion`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`focus-visible` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `accordion` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Action Bar (/docs/components/action-bar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { ActionBar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/action-bar`.

### States [#states]

`hover` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `toolbar` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Alert Dialog (/docs/components/alert-dialog)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Destructive [#destructive]

The action names what it does. Focus starts on Cancel, the safe choice.

<ComponentPreview name="alert-dialog/1-destructive" />

## Usage [#usage]

### Import [#import]

```tsx
import { AlertDialog } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/alert-dialog`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `alertdialog` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Shift+tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

### Known limitations [#known-limitations]

* **Focus:** Same `inert` limitation as Dialog.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Alert (/docs/components/alert)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Alert } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/alert`.

### Variant props [#variant-props]

| Prop      | Values                                                                |
| --------- | --------------------------------------------------------------------- |
| `variant` | `default` · `info` · `success` · `warning` · `destructive` · `danger` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `alert` pattern. Not yet audited.

### Announcements [#announcements]

Announced assertively: screen readers interrupt to read it.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Angle Slider (/docs/components/angle-slider)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { AngleSlider } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/angle-slider`.

### States [#states]

`focus-visible` · `disabled` · `read-only`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `slider` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# App Shell (/docs/components/app-shell)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { AppShell } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/app-shell`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `landmarks` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Aspect Ratio (/docs/components/aspect-ratio)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { AspectRatio } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/aspect-ratio`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Audit Event (/docs/components/audit-event)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { AuditEvent } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/audit-event`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Not applicable |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Autocomplete (/docs/components/autocomplete)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Autocomplete } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/autocomplete`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `loading` · `invalid` · `required` · `open` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `combobox` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

Focus stays on the input; arrow keys move the active option (`aria-activedescendant`).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Availability Grid (/docs/components/availability-grid)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { AvailabilityGrid } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/availability-grid`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `grid` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Avatar (/docs/components/avatar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Avatar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/avatar`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Not applicable |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Badge (/docs/components/badge)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Variants [#variants]

Neutral, brand and status tones for labels, counts and states.

<ComponentPreview name="badge/1-variants" />

### With icon [#with-icon]

A leading icon sizes itself to the badge.

<ComponentPreview name="badge/2-with-icon" />

## Usage [#usage]

### Import [#import]

```tsx
import { Badge } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/badge`.

### Variant props [#variant-props]

| Prop      | Values                                                                                                   |
| --------- | -------------------------------------------------------------------------------------------------------- |
| `variant` | `default` · `secondary` · `outline` · `brand` · `info` · `success` · `warning` · `destructive` · `muted` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Banner (/docs/components/banner)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Banner } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/banner`.

### Variant props [#variant-props]

| Prop      | Values                                                                |
| --------- | --------------------------------------------------------------------- |
| `variant` | `default` · `info` · `success` · `warning` · `destructive` · `danger` |

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Blockquote (/docs/components/blockquote)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Blockquote } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/blockquote`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Breadcrumb (/docs/components/breadcrumb)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Breadcrumb } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/breadcrumb`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `breadcrumb` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Button Group (/docs/components/button-group)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ButtonGroup } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/button-group`.

### States [#states]

`focus-visible`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Button (/docs/components/button)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Variants [#variants]

One primary action per view; secondary and outline beside it, ghost in toolbars, and destructive for actions that can't be undone.

<ComponentPreview name="button/1-variants" />

### Sizes [#sizes]

Four text sizes, and icon-only sizes that need an `aria-label`.

<ComponentPreview name="button/2-sizes" />

### Loading [#loading]

`loading` shows a spinner, sets `aria-busy` and ignores clicks while keeping focus. `loadingLabel` replaces the label for the duration and holds the button's width.

<ComponentPreview name="button/3-loading" />

## Usage [#usage]

### Import [#import]

```tsx
import { Button } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/button`.

### Variant props [#variant-props]

| Prop      | Values                                                                      |
| --------- | --------------------------------------------------------------------------- |
| `variant` | `default` · `outline` · `secondary` · `ghost` · `destructive` · `link`      |
| `size`    | `default` · `xs` · `sm` · `lg` · `icon` · `icon-xs` · `icon-sm` · `icon-lg` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `loading` · `invalid` · `busy`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

Follows the WAI-ARIA `button` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Calendar (/docs/components/calendar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Calendar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/calendar`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `grid` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Callout (/docs/components/callout)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Callout } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/callout`.

### Variant props [#variant-props]

| Prop      | Values                                                             |
| --------- | ------------------------------------------------------------------ |
| `variant` | `info` · `success` · `warning` · `destructive` · `error` · `muted` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Card (/docs/components/card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

Header with an action slot, content, and a footer for the card's own actions.

<ComponentPreview name="card/1-default" />

## Usage [#usage]

### Import [#import]

```tsx
import { Card } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/card`.

### Variant props [#variant-props]

| Prop      | Values                             |
| --------- | ---------------------------------- |
| `variant` | `default` · `outline` · `elevated` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `selected`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Carousel (/docs/components/carousel)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Carousel } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/carousel`.

### States [#states]

`focus-visible` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `carousel` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Chart Presets (/docs/components/chart-presets)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ChartPresets } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/chart-presets`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Chart (/docs/components/chart)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Chart } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/chart`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Checkbox Card (/docs/components/checkbox-card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { CheckboxCard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/checkbox-card`.

### States [#states]

`hover` · `disabled` · `read-only` · `invalid` · `required` · `checked`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `checkbox` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Checkbox (/docs/components/checkbox)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

Wrap the checkbox in a `Label` to name it.

<ComponentPreview name="checkbox/1-default" />

### With description [#with-description]

A horizontal `Field` adds a description and wires it to the checkbox.

<ComponentPreview name="checkbox/2-with-description" />

## Usage [#usage]

### Import [#import]

```tsx
import { Checkbox } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/checkbox`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value     | Default          | Change            |
| --------- | ---------------- | ----------------- |
| `checked` | `defaultChecked` | `onCheckedChange` |

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `checked` · `indeterminate`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not declared     |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `checkbox` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Space
</kbd>

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Chip (/docs/components/chip)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Chip } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/chip`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `checked` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Clipboard (/docs/components/clipboard)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Clipboard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/clipboard`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `button` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Close Button (/docs/components/close-button)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { CloseButton } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/close-button`.

### States [#states]

`hover` · `focus-visible` · `active`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `button` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Code Block (/docs/components/code-block)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CodeBlock } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/code-block`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Collapsible (/docs/components/collapsible)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Collapsible } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/collapsible`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Not applicable   |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `disclosure` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Color Picker (/docs/components/color-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ColorPicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/color-picker`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `required` · `empty`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Color Swatch (/docs/components/color-swatch)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ColorSwatch } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/color-swatch`.

### Variant props [#variant-props]

| Prop   | Values                    |
| ------ | ------------------------- |
| `size` | `xs` · `sm` · `md` · `lg` |

### States [#states]

`hover` · `focus-visible` · `disabled` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Combobox (/docs/components/combobox)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Combobox } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/combobox`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `loading` · `invalid` · `required` · `selected` · `open` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `combobox` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Command Palette (/docs/components/command-palette)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CommandPalette } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/command-palette`.

### States [#states]

`selected` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `combobox` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Comment Thread (/docs/components/comment-thread)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CommentThread } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/comment-thread`.

### States [#states]

`hover` · `focus-visible` · `read-only` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Container (/docs/components/container)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Container } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/container`.

### Variant props [#variant-props]

| Prop   | Values                                |
| ------ | ------------------------------------- |
| `size` | `prose` · `content` · `wide` · `full` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Context Menu (/docs/components/context-menu)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { ContextMenu } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/context-menu`.

### States [#states]

`focus-visible` · `disabled` · `checked` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `menu` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Copyable Secret (/docs/components/copyable-secret)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CopyableSecret } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/copyable-secret`.

### States [#states]

`focus-visible` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Country Picker (/docs/components/country-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CountryPicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/country-picker`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change     |
| ------- | -------------- | ---------- |
| `value` | `defaultValue` | `onChange` |

### States [#states]

`disabled` · `invalid` · `required`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction, visual and hydration tests.

{/* qeetrix:generated:end */}


# Currency Input (/docs/components/currency-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { CurrencyInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/currency-input`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Data State (/docs/components/data-state)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { DataState } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/data-state`.

### States [#states]

`loading` · `busy`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `alert` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Data Table (/docs/components/data-table)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Examples [#examples]

### Default [#default]

Sorting, search, row selection and pagination out of the box.

<ComponentPreview name="data-table/1-default" />

## Usage [#usage]

### Import [#import]

```tsx
import { DataTable } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/data-table`.

### States [#states]

`hover` · `focus-visible` · `loading` · `indeterminate` · `expanded` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `table` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction, visual and hydration tests.

{/* qeetrix:generated:end */}


# Date Picker (/docs/components/date-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { DatePicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/date-picker`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `empty`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Date Time Picker (/docs/components/date-time-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { DateTimePicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/date-time-picker`.

### States [#states]

`disabled` · `invalid` · `empty`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Description List (/docs/components/description-list)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { DescriptionList } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/description-list`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Dialog (/docs/components/dialog)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

A trigger, a titled panel, and a footer whose actions close it. Escape closes it too.

<ComponentPreview name="dialog/1-default" />

## Usage [#usage]

### Import [#import]

```tsx
import { Dialog } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/dialog`.

### Variant props [#variant-props]

| Prop   | Values                                  |
| ------ | --------------------------------------- |
| `size` | `sm` · `default` · `lg` · `xl` · `full` |

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `dialog` pattern. Partly audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Partial        |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Shift+tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

### Known limitations [#known-limitations]

* **Focus:** Focus containment is enforced with `inert`, which jsdom does not implement, so the tests assert the mechanism is installed rather than observing containment. Browser-level verification is on the manual checklist.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Diff Viewer (/docs/components/diff-viewer)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { DiffViewer } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/diff-viewer`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Drawer (/docs/components/drawer)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Drawer } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/drawer`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `dialog` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Shift+tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

### Known limitations [#known-limitations]

* **Focus:** Focus containment is enforced with `inert`, which jsdom does not implement, so the tests assert the mechanism is installed rather than observing containment. Browser-level verification is on the manual checklist.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Dropdown Menu (/docs/components/dropdown-menu)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { DropdownMenu } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/dropdown-menu`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`focus-visible` · `disabled` · `checked` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `menu-button` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Editable (/docs/components/editable)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Editable } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/editable`.

### States [#states]

`hover` · `focus-visible` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Empty State (/docs/components/empty-state)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { EmptyState } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/empty-state`.

### Variant props [#variant-props]

| Prop      | Values                                                             |
| --------- | ------------------------------------------------------------------ |
| `variant` | `default` · `first-use` · `no-results` · `no-permission` · `error` |
| `size`    | `sm` · `default` · `lg`                                            |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Feed (/docs/components/feed)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Feed } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/feed`.

### States [#states]

`hover` · `focus-visible` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `feed` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Field (/docs/components/field)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Field } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/field`.

### States [#states]

`hover` · `disabled` · `invalid` · `checked`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# File Card (/docs/components/file-card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { FileCard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/file-card`.

### States [#states]

`hover` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# File Type Icon (/docs/components/file-type-icon)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { FileTypeIcon } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/file-type-icon`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# File Upload (/docs/components/file-upload)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { FileUpload } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/file-upload`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Filter Bar (/docs/components/filter-bar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { FilterBar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/filter-bar`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Floating Window (/docs/components/floating-window)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { FloatingWindow } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/floating-window`.

### States [#states]

`hover` · `active`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `dialog` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Focus Trap (/docs/components/focus-trap)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { FocusTrap } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/focus-trap`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Not applicable   |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Form (/docs/components/form)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Form } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/form`.

### States [#states]

`hover` · `focus-visible` · `invalid`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Highlight (/docs/components/highlight)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Highlight } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/highlight`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Hover Card (/docs/components/hover-card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { HoverCard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/hover-card`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Icon Button (/docs/components/icon-button)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { IconButton } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/icon-button`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `button` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Icon (/docs/components/icon)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Icon } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/icon`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Components (/docs/components)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

`@qeetrix/ui` 2.1.2 has 145 components: 68 beta, 76 stable and 1 deprecated. Each page lists its import, variants, states, support and accessibility, generated from the package's component manifest.

| Component                                                                         | Status     | Accessibility   |
| --------------------------------------------------------------------------------- | ---------- | --------------- |
| [Access Review](/docs/components/access-review)                                   | Beta       | Not yet audited |
| [Accordion](/docs/components/accordion)                                           | Stable     | Not yet audited |
| [Action Bar](/docs/components/action-bar)                                         | Stable     | Audited         |
| [Alert](/docs/components/alert)                                                   | Stable     | Not yet audited |
| [Alert Dialog](/docs/components/alert-dialog)                                     | Stable     | Not yet audited |
| [Angle Slider](/docs/components/angle-slider)                                     | Beta       | Not yet audited |
| [App Shell](/docs/components/app-shell)                                           | Beta       | Not yet audited |
| [Aspect Ratio](/docs/components/aspect-ratio)                                     | Stable     | Not yet audited |
| [Audit Event](/docs/components/audit-event)                                       | Stable     | Audited         |
| [Autocomplete](/docs/components/autocomplete)                                     | Stable     | Not yet audited |
| [Availability Grid](/docs/components/availability-grid)                           | Beta       | Not yet audited |
| [Avatar](/docs/components/avatar)                                                 | Stable     | Audited         |
| [Badge](/docs/components/badge)                                                   | Stable     | Audited         |
| [Banner](/docs/components/banner)                                                 | Beta       | Not yet audited |
| [Blockquote](/docs/components/blockquote)                                         | Stable     | Not yet audited |
| [Breadcrumb](/docs/components/breadcrumb)                                         | Stable     | Not yet audited |
| [Button](/docs/components/button)                                                 | Stable     | Audited         |
| [Button Group](/docs/components/button-group)                                     | Beta       | Not yet audited |
| [Calendar](/docs/components/calendar)                                             | Beta       | Not yet audited |
| [Callout](/docs/components/callout)                                               | Stable     | Not yet audited |
| [Card](/docs/components/card)                                                     | Stable     | Not yet audited |
| [Carousel](/docs/components/carousel)                                             | Stable     | Not yet audited |
| [Chart](/docs/components/chart)                                                   | Beta       | Not yet audited |
| [Chart Presets](/docs/components/chart-presets)                                   | Beta       | Not yet audited |
| [Checkbox](/docs/components/checkbox)                                             | Stable     | Not yet audited |
| [Checkbox Card](/docs/components/checkbox-card)                                   | Stable     | Not yet audited |
| [Chip](/docs/components/chip)                                                     | Beta       | Not yet audited |
| [Clipboard](/docs/components/clipboard)                                           | Stable     | Not yet audited |
| [Close Button](/docs/components/close-button)                                     | Stable     | Not yet audited |
| [Code Block](/docs/components/code-block)                                         | Beta       | Not yet audited |
| [Collapsible](/docs/components/collapsible)                                       | Stable     | Not yet audited |
| [Color Picker](/docs/components/color-picker)                                     | Beta       | Not yet audited |
| [Color Swatch](/docs/components/color-swatch)                                     | Beta       | Not yet audited |
| [Combobox](/docs/components/combobox)                                             | Beta       | Not yet audited |
| [Command Palette](/docs/components/command-palette)                               | Beta       | Not yet audited |
| [Comment Thread](/docs/components/comment-thread)                                 | Beta       | Not yet audited |
| [Container](/docs/components/container)                                           | Stable     | Not yet audited |
| [Context Menu](/docs/components/context-menu)                                     | Stable     | Not yet audited |
| [Copyable Secret](/docs/components/copyable-secret)                               | Beta       | Not yet audited |
| [Country Picker](/docs/components/country-picker)                                 | Beta       | Not yet audited |
| [Currency Input](/docs/components/currency-input)                                 | Beta       | Not yet audited |
| [Data State](/docs/components/data-state)                                         | Stable     | Not yet audited |
| [Data Table](/docs/components/data-table)                                         | Beta       | Not yet audited |
| [Date Picker](/docs/components/date-picker)                                       | Beta       | Not yet audited |
| [Date Time Picker](/docs/components/date-time-picker)                             | Beta       | Not yet audited |
| [Description List](/docs/components/description-list)                             | Stable     | Not yet audited |
| [Dialog](/docs/components/dialog)                                                 | Stable     | Partly audited  |
| [Diff Viewer](/docs/components/diff-viewer)                                       | Beta       | Not yet audited |
| [Drawer](/docs/components/drawer)                                                 | Beta       | Not yet audited |
| [Dropdown Menu](/docs/components/dropdown-menu)                                   | Stable     | Audited         |
| [Editable](/docs/components/editable)                                             | Beta       | Not yet audited |
| [Empty State](/docs/components/empty-state)                                       | Stable     | Not yet audited |
| [Feed](/docs/components/feed)                                                     | Beta       | Not yet audited |
| [Field](/docs/components/field)                                                   | Stable     | Audited         |
| [File Card](/docs/components/file-card)                                           | Stable     | Not yet audited |
| [File Type Icon](/docs/components/file-type-icon)                                 | Stable     | Not yet audited |
| [File Upload](/docs/components/file-upload)                                       | Beta       | Not yet audited |
| [Filter Bar](/docs/components/filter-bar)                                         | Beta       | Not yet audited |
| [Floating Window](/docs/components/floating-window)                               | Beta       | Not yet audited |
| [Focus Trap](/docs/components/focus-trap)                                         | Beta       | Not yet audited |
| [Form](/docs/components/form)                                                     | Beta       | Not yet audited |
| [Highlight](/docs/components/highlight)                                           | Stable     | Not yet audited |
| [Hover Card](/docs/components/hover-card)                                         | Stable     | Not yet audited |
| [Icon](/docs/components/icon)                                                     | Beta       | Not yet audited |
| [Icon Button](/docs/components/icon-button)                                       | Stable     | Not yet audited |
| [Input](/docs/components/input)                                                   | Stable     | Audited         |
| [Input Group](/docs/components/input-group)                                       | Stable     | Not yet audited |
| [JSON Tree](/docs/components/json-tree)                                           | Beta       | Not yet audited |
| [Kbd](/docs/components/kbd)                                                       | Stable     | Not yet audited |
| [Label](/docs/components/label)                                                   | Stable     | Not yet audited |
| [Link](/docs/components/link)                                                     | Stable     | Not yet audited |
| [Listbox](/docs/components/listbox)                                               | Stable     | Audited         |
| [Logo Uploader](/docs/components/logo-uploader)                                   | Beta       | Not yet audited |
| [Marquee](/docs/components/marquee)                                               | Beta       | Not yet audited |
| [Mask Input](/docs/components/mask-input)                                         | Beta       | Not yet audited |
| [Master Detail](/docs/components/master-detail)                                   | Beta       | Not yet audited |
| [Mention Input](/docs/components/mention-input)                                   | Beta       | Not yet audited |
| [Menubar](/docs/components/menubar)                                               | Stable     | Not yet audited |
| [Meter](/docs/components/meter)                                                   | Stable     | Audited         |
| [Native Select](/docs/components/native-select)                                   | Stable     | Not yet audited |
| [Navigation Menu](/docs/components/navigation-menu)                               | Beta       | Not yet audited |
| [Notification](/docs/components/notification)                                     | Beta       | Not yet audited |
| [Notification Center](/docs/components/notification-center)                       | Beta       | Not yet audited |
| [Notification Preference Matrix](/docs/components/notification-preference-matrix) | Beta       | Not yet audited |
| [Number Field](/docs/components/number-field)                                     | Stable     | Not yet audited |
| [Number Formatter](/docs/components/number-formatter)                             | Stable     | Not yet audited |
| [Org Chart](/docs/components/org-chart)                                           | Beta       | Not yet audited |
| [OTP Input](/docs/components/otp-input)                                           | Stable     | Not yet audited |
| [Overflow List](/docs/components/overflow-list)                                   | Beta       | Not yet audited |
| [Page Header](/docs/components/page-header)                                       | Stable     | Not yet audited |
| [Pagination](/docs/components/pagination)                                         | Stable     | Not yet audited |
| [Pagination Bar](/docs/components/pagination-bar)                                 | Deprecated | Not yet audited |
| [Password Input](/docs/components/password-input)                                 | Stable     | Not yet audited |
| [Password Strength Meter](/docs/components/password-strength-meter)               | Beta       | Not yet audited |
| [Popover](/docs/components/popover)                                               | Stable     | Audited         |
| [Portal](/docs/components/portal)                                                 | Beta       | Not yet audited |
| [Presence Indicator](/docs/components/presence-indicator)                         | Stable     | Not yet audited |
| [Preview Card](/docs/components/preview-card)                                     | Beta       | Not yet audited |
| [Progress](/docs/components/progress)                                             | Stable     | Audited         |
| [Progress Circle](/docs/components/progress-circle)                               | Stable     | Audited         |
| [QR Code](/docs/components/qr-code)                                               | Beta       | Not yet audited |
| [Radio Card](/docs/components/radio-card)                                         | Stable     | Not yet audited |
| [Radio Group](/docs/components/radio-group)                                       | Stable     | Audited         |
| [Rating](/docs/components/rating)                                                 | Stable     | Not yet audited |
| [Reaction Bar](/docs/components/reaction-bar)                                     | Beta       | Not yet audited |
| [Resizable](/docs/components/resizable)                                           | Beta       | Not yet audited |
| [Rich Text Editor](/docs/components/rich-text-editor)                             | Beta       | Not yet audited |
| [Rolling Number](/docs/components/rolling-number)                                 | Beta       | Not yet audited |
| [Schedule Calendar](/docs/components/schedule-calendar)                           | Beta       | Not yet audited |
| [Scroll Area](/docs/components/scroll-area)                                       | Beta       | Not yet audited |
| [Security Item](/docs/components/security-item)                                   | Stable     | Not yet audited |
| [Segmented Control](/docs/components/segmented-control)                           | Stable     | Not yet audited |
| [Select](/docs/components/select)                                                 | Stable     | Audited         |
| [Separator](/docs/components/separator)                                           | Stable     | Not yet audited |
| [Sheet](/docs/components/sheet)                                                   | Beta       | Not yet audited |
| [Sidebar](/docs/components/sidebar)                                               | Beta       | Not yet audited |
| [Skeleton](/docs/components/skeleton)                                             | Stable     | Not yet audited |
| [Skip Nav](/docs/components/skip-nav)                                             | Stable     | Not yet audited |
| [Slider](/docs/components/slider)                                                 | Stable     | Not yet audited |
| [Spinner](/docs/components/spinner)                                               | Stable     | Audited         |
| [Spoiler](/docs/components/spoiler)                                               | Stable     | Audited         |
| [Stat](/docs/components/stat)                                                     | Stable     | Not yet audited |
| [Status Pill](/docs/components/status-pill)                                       | Stable     | Not yet audited |
| [Stepper](/docs/components/stepper)                                               | Stable     | Not yet audited |
| [Switch](/docs/components/switch)                                                 | Stable     | Not yet audited |
| [Table](/docs/components/table)                                                   | Beta       | Not yet audited |
| [Table of Contents](/docs/components/table-of-contents)                           | Beta       | Not yet audited |
| [Tabs](/docs/components/tabs)                                                     | Stable     | Audited         |
| [Tag Input](/docs/components/tag-input)                                           | Beta       | Not yet audited |
| [Textarea](/docs/components/textarea)                                             | Stable     | Not yet audited |
| [Timeline](/docs/components/timeline)                                             | Beta       | Not yet audited |
| [Time Picker](/docs/components/time-picker)                                       | Beta       | Not yet audited |
| [Timer](/docs/components/timer)                                                   | Beta       | Not yet audited |
| [Time Range Picker](/docs/components/time-range-picker)                           | Beta       | Not yet audited |
| [Time Since](/docs/components/time-since)                                         | Beta       | Not yet audited |
| [Timezone Picker](/docs/components/timezone-picker)                               | Beta       | Not yet audited |
| [Toast](/docs/components/toast)                                                   | Beta       | Not yet audited |
| [Toggle](/docs/components/toggle)                                                 | Stable     | Not yet audited |
| [Toggle Tip](/docs/components/toggle-tip)                                         | Beta       | Not yet audited |
| [Toolbar](/docs/components/toolbar)                                               | Stable     | Not yet audited |
| [Tooltip](/docs/components/tooltip)                                               | Stable     | Not yet audited |
| [Tour](/docs/components/tour)                                                     | Beta       | Not yet audited |
| [Tree View](/docs/components/tree-view)                                           | Stable     | Audited         |
| [Typography](/docs/components/typography)                                         | Stable     | Not yet audited |
| [Visually Hidden](/docs/components/visually-hidden)                               | Stable     | Not yet audited |

{/* qeetrix:generated:end */}


# Input Group (/docs/components/input-group)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { InputGroup } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/input-group`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Input (/docs/components/input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Field [#field]

`FieldControl` wires the label and description to the input for assistive technology.

<ComponentPreview name="input/1-field" />

### Invalid [#invalid]

A `FieldError` with content marks the field invalid and sets `aria-invalid` on the input.

<ComponentPreview name="input/2-invalid" />

### Warning and success [#warning-and-success]

Non-blocking feedback: a warning that still lets the form submit, and a confirmation.

<ComponentPreview name="input/3-warning-and-success" />

## Usage [#usage]

### Import [#import]

```tsx
import { Input } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/input`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# JSON Tree (/docs/components/json-tree)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { JSONTree } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/json-tree`.

### States [#states]

`hover` · `focus-visible` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `treeview` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Kbd (/docs/components/kbd)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Kbd } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/kbd`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Label (/docs/components/label)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Label } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/label`.

### States [#states]

`disabled` · `required`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Link (/docs/components/link)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Link } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/link`.

### Variant props [#variant-props]

| Prop      | Values                              |
| --------- | ----------------------------------- |
| `variant` | `default` · `muted` · `destructive` |
| `size`    | `sm` · `md` · `lg`                  |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `link` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Listbox (/docs/components/listbox)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Listbox } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/listbox`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `read-only` · `invalid` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `listbox` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  TypeAhead
</kbd>

### Focus [#focus]

Focus stays on the input; arrow keys move the active option (`aria-activedescendant`).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Logo Uploader (/docs/components/logo-uploader)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { LogoUploader } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/logo-uploader`.

### States [#states]

`disabled` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Marquee (/docs/components/marquee)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Marquee } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/marquee`.

### States [#states]

`hover`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Not applicable   |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Mask Input (/docs/components/mask-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { MaskInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/mask-input`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Not applicable   |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Master Detail (/docs/components/master-detail)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { MasterDetail } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/master-detail`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value        | Default             | Change               |
| ------------ | ------------------- | -------------------- |
| `detailOpen` | `defaultDetailOpen` | `onDetailOpenChange` |

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Mention Input (/docs/components/mention-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { MentionInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/mention-input`.

### States [#states]

`hover` · `selected`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Menubar (/docs/components/menubar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Menubar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/menubar`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `checked` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `menubar` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

### Known limitations [#known-limitations]

* **Semantics:** Base UI renders an aria-owns bridge span as a direct child of the role=menubar element while a menu is open, so the menubar owns a generic child and axe's aria-required-children fails. No supported workaround in @base-ui/react 1.7.0: Menu.Positioner throws without Menu.Portal, the bridge is only emitted for non-modal focus managers and Menu.Popup hard-codes modal: isContextMenu, and a role="none" wrapper does not help because axe recurses through presentational wrappers. Asserted in composites.test.tsx and subtracted from a whole-widget axe run in menubar.test.tsx, so a Base UI fix surfaces as a failure.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Meter (/docs/components/meter)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Meter } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/meter`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `meter` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Native Select (/docs/components/native-select)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

The browser's own picker: best on mobile and for long, simple lists.

<ComponentPreview name="native-select/1-default" />

## Usage [#usage]

### Import [#import]

```tsx
import { NativeSelect } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/native-select`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

<kbd>
  TypeAhead
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Navigation Menu (/docs/components/navigation-menu)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { NavigationMenu } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/navigation-menu`.

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `disclosure` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Notification Center (/docs/components/notification-center)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { NotificationCenter } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/notification-center`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Notification Preference Matrix (/docs/components/notification-preference-matrix)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { NotificationPreferenceMatrix } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/notification-preference-matrix`.

### States [#states]

`disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

Follows the WAI-ARIA `table` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Notification (/docs/components/notification)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Notification } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/notification`.

### Variant props [#variant-props]

| Prop      | Values                                                   |
| --------- | -------------------------------------------------------- |
| `variant` | `info` · `success` · `warning` · `destructive` · `error` |
| `size`    | `default` · `sm`                                         |

### States [#states]

`hover` · `focus-visible` · `loading` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Number Field (/docs/components/number-field)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { NumberField } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/number-field`.

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `spinbutton` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

### Known limitations [#known-limitations]

* **Semantics:** Base UI renders a text input with aria-roledescription ("Number field") rather than role=spinbutton; the spinbutton keyboard contract (ArrowUp/ArrowDown step) holds. The role description comes from the catalogue (numberField.roleDescription).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Number Formatter (/docs/components/number-formatter)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { NumberFormatter } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/number-formatter`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Org Chart (/docs/components/org-chart)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { OrgChart } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/org-chart`.

### States [#states]

`hover` · `focus-visible` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# OTP Input (/docs/components/otp-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { OTPInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/otp-input`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `required`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Backspace
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Overflow List (/docs/components/overflow-list)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { OverflowList } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/overflow-list`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Page Header (/docs/components/page-header)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { PageHeader } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/page-header`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Pagination Bar (/docs/components/pagination-bar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout type="warn" title="Deprecated since 1.0.0">
  Renamed to Pagination when the pagination API was consolidated in 1.0.0. Use [Pagination](/docs/components/pagination) instead. Import \{ Pagination } from "@qeetrix/ui" and rename PaginationBarProps to PaginationProps.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { PaginationBar } from "@qeetrix/ui/components/pagination-bar";
```

It can also be imported on its own from `@qeetrix/ui/components/pagination-bar`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Pagination (/docs/components/pagination)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Pagination } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/pagination`.

### States [#states]

`loading` · `busy`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe) and interaction tests.

{/* qeetrix:generated:end */}


# Password Input (/docs/components/password-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { PasswordInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/password-input`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Password Strength Meter (/docs/components/password-strength-meter)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { PasswordStrengthMeter } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/password-strength-meter`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Popover (/docs/components/popover)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Popover } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/popover`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Portal (/docs/components/portal)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Portal } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/portal`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Not applicable   |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Presence Indicator (/docs/components/presence-indicator)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { PresenceIndicator } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/presence-indicator`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Preview Card (/docs/components/preview-card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { PreviewCard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/preview-card`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Progress Circle (/docs/components/progress-circle)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { ProgressCircle } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/progress-circle`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Progress (/docs/components/progress)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Progress } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/progress`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

### States [#states]

`indeterminate`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# QR Code (/docs/components/qr-code)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { QRCode } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/qr-code`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Radio Card (/docs/components/radio-card)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { RadioCard } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/radio-card`.

### States [#states]

`hover` · `disabled` · `invalid` · `required` · `checked`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `radio-group` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Radio Group (/docs/components/radio-group)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { RadioGroup } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/radio-group`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `checked`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not declared     |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `radio-group` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Rating (/docs/components/rating)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Rating } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/rating`.

### States [#states]

`focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not declared     |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

Follows the WAI-ARIA `slider` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Reaction Bar (/docs/components/reaction-bar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ReactionBar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/reaction-bar`.

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `read-only` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Resizable (/docs/components/resizable)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Resizable } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/resizable`.

### States [#states]

`focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `window-splitter` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Rich Text Editor (/docs/components/rich-text-editor)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { RichTextEditor } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/rich-text-editor`.

### States [#states]

`hover` · `active` · `disabled` · `read-only` · `invalid` · `required` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `toolbar` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Rolling Number (/docs/components/rolling-number)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { RollingNumber } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/rolling-number`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Not applicable   |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Schedule Calendar (/docs/components/schedule-calendar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ScheduleCalendar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/schedule-calendar`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `table` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Scroll Area (/docs/components/scroll-area)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ScrollArea } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/scroll-area`.

### States [#states]

`hover` · `focus-visible` · `active`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Security Item (/docs/components/security-item)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { SecurityItem } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/security-item`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Segmented Control (/docs/components/segmented-control)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { SegmentedControl } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/segmented-control`.

### Variant props [#variant-props]

| Prop   | Values             |
| ------ | ------------------ |
| `size` | `sm` · `md` · `lg` |

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`hover` · `active` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `radio-group` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Select (/docs/components/select)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

Inside a `Field`, the trigger takes the label and description.

<ComponentPreview name="select/1-default" />

## Usage [#usage]

### Import [#import]

```tsx
import { Select } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/select`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `selected` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `combobox` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

<kbd>
  TypeAhead
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop). While open, focus is contained and focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Separator (/docs/components/separator)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Separator } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/separator`.

### Variant props [#variant-props]

| Prop      | Values              |
| --------- | ------------------- |
| `variant` | `default` · `muted` |

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Sheet (/docs/components/sheet)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Sheet } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/sheet`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `dialog` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Shift+tab
</kbd>

<kbd>
  Escape
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

### Known limitations [#known-limitations]

* **Focus:** Focus containment is enforced with `inert`, which jsdom does not implement, so the tests assert the mechanism is installed rather than observing containment. Browser-level verification is on the manual checklist.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Sidebar (/docs/components/sidebar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Sidebar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/sidebar`.

### Variant props [#variant-props]

| Prop      | Values                  |
| --------- | ----------------------- |
| `variant` | `default` · `outline`   |
| `size`    | `default` · `sm` · `lg` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `expanded` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction, visual and hydration tests.

{/* qeetrix:generated:end */}


# Skeleton (/docs/components/skeleton)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Skeleton } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/skeleton`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Skip Nav (/docs/components/skip-nav)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { SkipNav } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/skip-nav`.

### States [#states]

`focus` · `focus-visible`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Slider (/docs/components/slider)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Slider } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/slider`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `dragging`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

Follows the WAI-ARIA `slider` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Known limitations [#known-limitations]

* **Focus:** Base UI hides the thumb until it has measured the track; jsdom has no layout, so the thumb's range input stays out of the computed accessibility tree and focus cannot be observed. Verified structurally instead; browser-level check is on the manual checklist.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Spinner (/docs/components/spinner)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Spinner } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/spinner`.

### Variant props [#variant-props]

| Prop   | Values                         |
| ------ | ------------------------------ |
| `size` | `sm` · `default` · `lg` · `xl` |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Not applicable |
| Focus           | Not applicable |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Pass           |
| Forced colours  | Pass           |
| Contrast        | Pass           |

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Spoiler (/docs/components/spoiler)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Spoiler } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/spoiler`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value      | Default           | Change             |
| ---------- | ----------------- | ------------------ |
| `expanded` | `defaultExpanded` | `onExpandedChange` |

### States [#states]

`hover` · `focus-visible` · `expanded`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `disclosure` pattern. Audited.

| Check           | Result         |
| --------------- | -------------- |
| Semantics       | Pass           |
| Accessible name | Pass           |
| Keyboard        | Pass           |
| Focus           | Pass           |
| Screen reader   | Pass           |
| Right-to-left   | Not applicable |
| Reduced motion  | Not applicable |
| Forced colours  | Pass           |
| Contrast        | Pass           |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Stat (/docs/components/stat)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Stat } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/stat`.

### Variant props [#variant-props]

| Prop   | Values                  |
| ------ | ----------------------- |
| `size` | `sm` · `default` · `lg` |

### States [#states]

`loading` · `busy`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Status Pill (/docs/components/status-pill)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { StatusPill } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/status-pill`.

### States [#states]

`active` · `disabled`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Stepper (/docs/components/stepper)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Stepper } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/stepper`.

### States [#states]

`active` · `invalid`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not supported         |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Switch (/docs/components/switch)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Switch } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/switch`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid` · `checked`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not declared     |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `switch` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Space
</kbd>

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Table of Contents (/docs/components/table-of-contents)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TableOfContents } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/table-of-contents`.

### States [#states]

`hover` · `focus-visible` · `active`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Table (/docs/components/table)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Table } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/table`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

Follows the WAI-ARIA `table` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Tabs (/docs/components/tabs)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Examples [#examples]

### Default [#default]

The contained style, for tabs inside a card or a panel.

<ComponentPreview name="tabs/1-default" />

### Line [#line]

`variant="line"` on `TabsList` puts the tabs on a track with an underline for the selected one, for page- and section-level navigation.

<ComponentPreview name="tabs/2-line" />

## Usage [#usage]

### Import [#import]

```tsx
import { Tabs } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/tabs`.

### Variant props [#variant-props]

| Prop      | Values             |
| --------- | ------------------ |
| `variant` | `default` · `line` |

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change          |
| ------- | -------------- | --------------- |
| `value` | `defaultValue` | `onValueChange` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `tabs` pattern. Audited.

| Check           | Result |
| --------------- | ------ |
| Semantics       | Pass   |
| Accessible name | Pass   |
| Keyboard        | Pass   |
| Focus           | Pass   |
| Screen reader   | Pass   |
| Right-to-left   | Pass   |
| Reduced motion  | Pass   |
| Forced colours  | Pass   |
| Contrast        | Pass   |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Tag Input (/docs/components/tag-input)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TagInput } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/tag-input`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Backspace
</kbd>

<kbd>
  Delete
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

<kbd>
  Escape
</kbd>

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Textarea (/docs/components/textarea)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Textarea } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/textarea`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `read-only` · `invalid`

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Supported             |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Time Picker (/docs/components/time-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TimePicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/time-picker`.

### States [#states]

`disabled` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Time Range Picker (/docs/components/time-range-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TimeRangePicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/time-range-picker`.

### States [#states]

`hover` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Time Since (/docs/components/time-since)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TimeSince } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/time-since`.

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not applicable   |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), visual and hydration tests.

{/* qeetrix:generated:end */}


# Timeline (/docs/components/timeline)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Timeline } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/timeline`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Supported             |
| Density          | Supported             |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Timer (/docs/components/timer)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Timer } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/timer`.

### States [#states]

`disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

### Announcements [#announcements]

Announced politely: screen readers read it when the user is idle.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Timezone Picker (/docs/components/timezone-picker)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { TimezonePicker } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/timezone-picker`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value   | Default        | Change     |
| ------- | -------------- | ---------- |
| `value` | `defaultValue` | `onChange` |

### States [#states]

`disabled` · `invalid` · `required`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction, visual and hydration tests.

{/* qeetrix:generated:end */}


# Toast (/docs/components/toast)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Examples [#examples]

### Types [#types]

Each type sets the icon and accent. Toasts stack, pause on hover and announce politely.

<ComponentPreview name="toast/1-types" />

### With action [#with-action]

`actionProps` adds one button, typically Undo for a reversible action.

<ComponentPreview name="toast/2-with-action" />

## Usage [#usage]

### Import [#import]

```tsx
import { Toast } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/toast`.

### States [#states]

`hover` · `focus-visible`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `alert` pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Toggle Tip (/docs/components/toggle-tip)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { ToggleTip } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/toggle-tip`.

### States [#states]

`hover`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Toggle (/docs/components/toggle)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Toggle } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/toggle`.

### Variant props [#variant-props]

| Prop      | Values                  |
| --------- | ----------------------- |
| `variant` | `default` · `outline`   |
| `size`    | `default` · `sm` · `lg` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled` · `invalid`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `button` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  Space
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Toolbar (/docs/components/toolbar)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Toolbar } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/toolbar`.

### Variant props [#variant-props]

| Prop      | Values              |
| --------- | ------------------- |
| `variant` | `default` · `ghost` |

### States [#states]

`hover` · `focus-visible` · `active` · `disabled`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Not applicable   |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Not applicable   |

## Accessibility [#accessibility]

Follows the WAI-ARIA `toolbar` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Tooltip (/docs/components/tooltip)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Tooltip } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/tooltip`.

### States [#states]

`open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `tooltip` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Escape
</kbd>

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Tour (/docs/components/tour)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

<Callout title="Beta">
  Ready to use, but its API may still change before it is marked stable.
</Callout>

## Usage [#usage]

### Import [#import]

```tsx
import { Tour } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/tour`.

### Controlled and uncontrolled [#controlled-and-uncontrolled]

Pass the value prop to control it, or the default prop to let the component own it.

| Value  | Default       | Change         |
| ------ | ------------- | -------------- |
| `open` | `defaultOpen` | `onOpenChange` |

### States [#states]

`hover` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Not supported    |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `dialog` pattern. Not yet audited.

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Shift+tab
</kbd>

<kbd>
  Escape
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

### Focus [#focus]

Each control is a Tab stop, in order. While open, focus is contained and focus returns on close.

## Tests [#tests]

Covered by unit, accessibility (axe), interaction, visual and hydration tests.

{/* qeetrix:generated:end */}


# Tree View (/docs/components/tree-view)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { TreeView } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/tree-view`.

### States [#states]

`hover` · `focus-visible` · `disabled` · `selected` · `expanded` · `open`

## Support [#support]

| Feature          | Status           |
| ---------------- | ---------------- |
| Right-to-left    | Supported        |
| Dark mode        | Supported        |
| Density          | Supported        |
| Server rendering | Client component |
| Reduced motion   | Supported        |

## Accessibility [#accessibility]

Follows the WAI-ARIA `treeview` pattern. Audited.

| Check           | Result |
| --------------- | ------ |
| Semantics       | Pass   |
| Accessible name | Pass   |
| Keyboard        | Pass   |
| Focus           | Pass   |
| Screen reader   | Pass   |
| Right-to-left   | Pass   |
| Reduced motion  | Pass   |
| Forced colours  | Pass   |
| Contrast        | Pass   |

### Keyboard [#keyboard]

<kbd>
  Tab
</kbd>

<kbd>
  Enter
</kbd>

<kbd>
  ArrowUp
</kbd>

<kbd>
  ArrowDown
</kbd>

<kbd>
  ArrowLeft
</kbd>

<kbd>
  ArrowRight
</kbd>

<kbd>
  Home
</kbd>

<kbd>
  End
</kbd>

<kbd>
  Asterisk
</kbd>

<kbd>
  TypeAhead
</kbd>

### Focus [#focus]

One Tab stop for the group; arrow keys move between items (roving tab stop).

## Tests [#tests]

Covered by unit, accessibility (axe), interaction and visual tests.

{/* qeetrix:generated:end */}


# Typography (/docs/components/typography)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { Typography } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/typography`.

### Variant props [#variant-props]

| Prop      | Values                                                                                                        |
| --------- | ------------------------------------------------------------------------------------------------------------- |
| `variant` | `h1` · `h2` · `h3` · `h4` · `p` · `blockquote` · `lead` · `large` · `small` · `muted` · `inlineCode` · `list` |
| `size`    | `md` · `sm`                                                                                                   |

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Supported             |
| Dark mode        | Supported             |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Visually Hidden (/docs/components/visually-hidden)



{/* qeetrix:generated:start — rewritten from @qeetrix/ui's component manifest by `bun run generate:components`. Write your own sections below the end marker. */}

## Usage [#usage]

### Import [#import]

```tsx
import { VisuallyHidden } from "@qeetrix/ui";
```

It can also be imported on its own from `@qeetrix/ui/components/visually-hidden`.

## Support [#support]

| Feature          | Status                |
| ---------------- | --------------------- |
| Right-to-left    | Not applicable        |
| Dark mode        | Not applicable        |
| Density          | Not applicable        |
| Server rendering | Renders on the server |
| Reduced motion   | Not applicable        |

## Accessibility [#accessibility]

No ARIA widget pattern. Not yet audited.

## Tests [#tests]

Covered by unit, accessibility (axe) and visual tests.

{/* qeetrix:generated:end */}


# Colour (/docs/foundations/colors)



Build with the semantic roles. Each one has a meaning and a value for each theme, and every text
and surface pair the roles are designed for meets WCAG AA contrast. Colour is authored in OKLCH.

The **Tailwind** column gives each colour's utility with `bg-`; the same name works with `text-`,
`border-` and the other colour utilities. Roles without a utility of their own are used through the
variable.

## Text [#text]

<ColorTokens group="text" />

## Surface [#surface]

<ColorTokens group="surface" />

## Border [#border]

<ColorTokens group="border" />

## Action [#action]

<ColorTokens group="action" />

## Feedback [#feedback]

<ColorTokens group="feedback" />

## Focus, selection and overlay [#focus-selection-and-overlay]

<ColorTokens group="focus" />

<ColorTokens group="selection" />

<ColorTokens group="overlay" />

## Palette [#palette]

The primitive ramps the roles are built from. They're published in `@qeetrix/ui/tokens.css` for
design tooling, but not in `styles.css`: build with the roles above. Hover a step for its variable
and value.

<Palette ramps="[&#x22;qeet&#x22;, &#x22;graphite&#x22;, &#x22;neutral&#x22;, &#x22;danger&#x22;, &#x22;success&#x22;, &#x22;warning&#x22;, &#x22;info&#x22;]" />


# Elevation (/docs/foundations/elevation)



Elevation is the role a surface plays, and the shadow is the value it renders with: a component
picks `raised`, `overlay` or `modal`, never a shadow number, so the whole ladder can be retuned in
one place. In the dark theme the shadows are deeper, and surfaces also step up in lightness as they
rise (see the surface roles in [Colour](/docs/foundations/colors#surface)).

Each role is shown on a light and on a dark surface.

<ElevationTokens />

Tailwind's own shadow scale, `shadow-2xs` to `shadow-xl`, is remapped onto the same ladder, so a
generic `shadow-md` in product code is a Qeetrix shadow too.


# Icons (/docs/foundations/icons)





`@qeetrix/icons` has 1,863 icons, each drawn in a round and a sharp shape, plus Qeet's own logo and
wordmark.

## Import an icon [#import-an-icon]

Import icons from the package root:

```tsx
import { StarIcon, TrashIcon } from "@qeetrix/icons";

export function Favourite() {
  return <StarIcon />;
}
```

### In a library [#in-a-library]

Bundlers keep only the icons you import. Code that runs without a bundler — a test runner or a
script — loads every icon from the root, about 1.6 s once per process in plain Node. A library
that apps test against, like `@qeetrix/ui`, imports each icon from its own path instead, so its
consumers never pay that:

```tsx
import { StarIcon } from "@qeetrix/icons/icons/star";
```

## Shape, variant and size [#shape-variant-and-size]

<div className="not-prose flex flex-wrap items-center gap-6 rounded-xl border p-6">
  <StarIcon />

  <StarIcon variant="filled" />

  <StarIcon shape="sharp" />

  <StarIcon shape="sharp" variant="filled" />

  <StarIcon size="32" />
</div>

```tsx
<StarIcon />
<StarIcon variant="filled" />
<StarIcon shape="sharp" />
<StarIcon shape="sharp" variant="filled" />
<StarIcon size={32} />
```

| Prop      | Values                    | Default     |
| --------- | ------------------------- | ----------- |
| `shape`   | `"round"` · `"sharp"`     | `"round"`   |
| `variant` | `"outline"` · `"filled"`  | `"outline"` |
| `size`    | pixels, or any CSS length | —           |

Every icon has both shapes. `variant` is typed per icon, so asking for a drawing that an icon doesn't
have is a type error. Icons also accept any `<svg>` prop, such as `className` or `aria-label`.

## Qeet logos [#qeet-logos]

`QeetLogo` is the "q" mark and `QeetWordmarkLogo` is **Qeet.** in a tile. Each renders its SVG file,
unmodified, as an `<img>`, so the page can't recolour it. Logos are only exported from the package
root.

<div className="not-prose flex flex-wrap items-center gap-6 rounded-xl border p-6">
  <QeetLogo height="32" className="inline-block dark:hidden" />

  <QeetLogo height="32" variant="dark" className="hidden dark:inline-block" />

  <QeetWordmarkLogo height="32" className="inline-block dark:hidden" />

  <QeetWordmarkLogo height="32" variant="dark" className="hidden dark:inline-block" />

  <QeetWordmarkLogo height="24" variant="plain" className="inline-block dark:hidden" />

  <QeetWordmarkLogo height="24" variant="plain-dark" className="hidden dark:inline-block" />
</div>

### Variants [#variants]

| Logo               | Variants                                                                    |
| ------------------ | --------------------------------------------------------------------------- |
| `QeetLogo`         | `"default"` (light surfaces) · `"dark"` (dark surfaces)                     |
| `QeetWordmarkLogo` | `"default"` · `"dark"` (in a tile), `"plain"` · `"plain-dark"` (without it) |

### Light and dark [#light-and-dark]

An image can't see your app's theme, so render both files and let your theme show one. With
Qeetrix's `.dark` class, that's the `dark:` variant:

```tsx
import { QeetLogo } from "@qeetrix/icons";

export function Brand() {
  return (
    <>
      <QeetLogo aria-label="Qeet" className="inline-block dark:hidden" />
      <QeetLogo aria-label="Qeet" variant="dark" className="hidden dark:inline-block" />
    </>
  );
}
```

### Size and labels [#size-and-labels]

Logos are decorative by default. Pass `aria-label` or `alt` to name one, and `height` (default 24)
to size it; the width follows the logo's own aspect ratio.

### Third-party logos [#third-party-logos]

<Callout>
  Third-party brand logos (GitHub, Google, Slack, …) aren't part of `@qeetrix/icons`; versions up
  to 1.0.10 bundled 7,429 of them. Use [theSVG](https://thesvg.org) directly, for example
  `@thesvg/react`, importing one logo at a time.
</Callout>


# Foundations (/docs/foundations)



Qeetrix is token-driven. Colour, type, corners, elevation and motion are design tokens, and
components read the tokens instead of hard-coding values, so a change to a token reaches every
component that uses it.

## Where tokens live [#where-tokens-live]

| File                      | What it has                                                             | Use it for                              |
| ------------------------- | ----------------------------------------------------------------------- | --------------------------------------- |
| `@qeetrix/ui/styles.css`  | The semantic tokens as `--qx-*` variables, mapped to Tailwind utilities | Apps: the one stylesheet you import     |
| `@qeetrix/ui/qeetrix.css` | The same semantic variables, without Tailwind                           | Theming against the variables directly  |
| `@qeetrix/ui/tokens.css`  | Every token, including the primitive palette and scales                 | Design tooling that needs the raw ramps |
| `@qeetrix/ui/tokens.json` | Every token, resolved for each theme                                    | Anything that isn't CSS                 |

## Semantic and primitive tokens [#semantic-and-primitive-tokens]

Components read only **semantic** tokens: roles with a meaning, such as `surface.canvas` or
`text.secondary`. The **primitive** tokens behind them, the raw palette and scales, are not in
`styles.css`, so a component can't come to depend on a palette value by accident.

## Names [#names]

A variable follows its token's path: `color.surface.canvas` is `--qx-color-surface-canvas`. Many
tokens also have a Tailwind utility, such as `bg-canvas`, `shadow-hover` or `duration-fast`; the
tables on each page list them.

## Light and dark [#light-and-dark]

Every semantic token has a light and a dark value, switched by the `.dark` class. The tables show
both, whichever theme you're reading in.

<Cards>
  <Card title="Colour" href="/docs/foundations/colors" description="Text, surface, border, action and feedback roles, and the palette." />

  <Card title="Typography" href="/docs/foundations/typography" description="Type roles, font families and the scale." />

  <Card title="Spacing and Corners" href="/docs/foundations/spacing" description="Corner roles and the spacing scale." />

  <Card title="Elevation" href="/docs/foundations/elevation" description="Shadow roles for every surface." />

  <Card title="Motion" href="/docs/foundations/motion" description="Durations, easings and reduced motion." />

  <Card title="Icons" href="/docs/foundations/icons" description="Icons and the Qeet logos from @qeetrix/icons." />
</Cards>


# Motion (/docs/foundations/motion)



Motion has two layers: a primitive scale of durations and easings, and the semantic roles that
components use. A role names its purpose, `normal` rather than `200ms` or `enter` rather than a
curve, and the roles are Tailwind utilities too.

## Durations [#durations]

<MotionTokens kind="duration" />

## Easings [#easings]

<MotionTokens kind="easing" />

## Reduced motion [#reduced-motion]

When the user asks for reduced motion, `styles.css` collapses every transition and animation in
one place, to `--qx-motion-reduced-duration`. Transitions keep a duration just above zero so
`transitionend` still fires for components that wait on it. A component only needs its own
handling when it drives motion from JavaScript.


# Spacing and Corners (/docs/foundations/spacing)



## Corners [#corners]

Components round their corners through roles, so a control, a field and a surface each keep their
own shape. The swatches below are drawn with the live variables.

<CornerTokens />

The control, field, chip, surface and overlay roles come from Tailwind's radius scale, which is
built on one variable, `--radius`: `rounded-lg` equals it, and the scale runs from `rounded-sm`
(0.6×) to `rounded-4xl` (2.6×). Changing `--radius` retunes them all; `pill`, `circle` and `none`
stay fixed.

## Spacing [#spacing]

Components space themselves with Tailwind's spacing utilities, such as `gap-2` and `px-4`. The
named steps below are the primitive spacing scale, published in `@qeetrix/ui/tokens.css` for design
tooling.

<SpaceScale />


# Typography (/docs/foundations/typography)



## Roles [#roles]

Each role sets a family, size, line height, weight and tracking together. A role's `text-*`
utility sets its size and line height; the `--qx-typography-<role>-*` variables carry all five.

<TypeRoles />

## Font families [#font-families]

Qeet Display sets headings, Qeet Text sets body copy, Qeet UI sets controls, and Fira Code sets
code. The Indic stack covers Indian scripts with Noto Sans. The Qeet fonts and Fira Code ship with
`@qeetrix/ui` and load through `styles.css`, so they render the same without being installed.

<FontFamilies />


# Accessibility (/docs/guides/accessibility)



Qeetrix targets **WCAG 2.2 AA**. A component library can make the right thing the easy thing, but
an accessible screen still depends on how you use it: the names you give controls, the order of
your content, the words you choose.

## What Qeetrix guarantees [#what-qeetrix-guarantees]

* **Proven patterns.** Composite widgets, such as menus, listboxes, comboboxes, dialogs, tabs and
  trees, are built on Base UI, which implements the WAI-ARIA patterns, including their keyboard
  model and focus management.
* **Contrast.** Every text and surface pair the colour roles are designed for meets AA contrast, in
  both themes.
* **Reduced motion.** When the user asks for less motion, one rule in `styles.css` collapses every
  transition and animation. See [Motion](/docs/foundations/motion#reduced-motion).
* **Forced colours.** In Windows high-contrast modes, the colours map to system colours, shadows
  drop away, and focus falls back to a system highlight outline.
* **Visible focus.** Keyboard focus draws a consistent ring that stays visible against every
  surface.

Each component page lists its ARIA pattern, keyboard support, focus behaviour and audit results;
see the [Components](/docs/components) overview for every component's audit state.

## What your app owns [#what-your-app-owns]

### Name every control [#name-every-control]

Use the most robust name available, in this order:

| Source          | Example                                  |
| --------------- | ---------------------------------------- |
| Visible text    | `<Button>Save</Button>`                  |
| A field label   | `<FieldLabel>` with `<FieldControl>`     |
| A titled region | A `Dialog` is named by its `DialogTitle` |
| `aria-label`    | Icon-only controls, as a last resort     |

Prefer a visible label: an `aria-label` can't be seen, isn't translated by page translation tools,
and silently goes stale when the visible text changes. `IconButton` requires an `aria-label`, so an
icon-only button can't be written without one.

### Hide decorative icons [#hide-decorative-icons]

An icon beside text is decoration: mark it `aria-hidden`, as the examples in these docs do. Icons
from `@qeetrix/icons` are decorative by default; give one an `aria-label` only when it stands alone
and carries meaning.

### Right-to-left [#right-to-left]

Set `dir="rtl"` on `<html>` to mirror the layout. For keyboard behaviour to follow, such as which
arrow key expands a tree, wrap the app in `DirectionProvider` too:

```tsx
import { DirectionProvider } from "@qeetrix/ui";

<DirectionProvider locale="ar-EG">{children}</DirectionProvider>;
```

### Charts [#charts]

Colour alone can't carry a chart's data for everyone. Pair each chart with `ChartDataTable`, the
non-colour alternative.

### Test your screens [#test-your-screens]

Automated checks such as axe catch part of the problem. Also try each flow with only a keyboard,
with a screen reader, at 200% zoom, and with reduced motion and high contrast turned on.


# Guides (/docs/guides)



<Cards>
  <Card title="Theming" href="/docs/guides/theming" description="Light and dark, and overriding corners, colours and single components." />

  <Card title="Next.js" href="/docs/guides/nextjs" description="Set up Qeetrix in a Next.js App Router app." />

  <Card title="TanStack Start" href="/docs/guides/tanstack-start" description="Set up Qeetrix in a TanStack Start app, as the Qeet consoles do." />

  <Card title="Accessibility" href="/docs/guides/accessibility" description="What Qeetrix guarantees, and what your app still owns." />
</Cards>


# Next.js (/docs/guides/nextjs)



## Install [#install]

```bash
bun add @qeetrix/ui @qeetrix/icons
bun add -d tailwindcss @tailwindcss/postcss
```

`@qeetrix/ui` needs React 19 or later and Tailwind CSS 4 or later.

## Configure PostCSS [#configure-postcss]

`@qeetrix/ui/styles.css` is Tailwind source, so Next.js compiles it through Tailwind's PostCSS
plugin:

```js title="postcss.config.mjs"
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;
```

## Import the stylesheet [#import-the-stylesheet]

```css title="app/globals.css"
@import "@qeetrix/ui/styles.css";

/* Your token overrides go after the import. */
```

It brings Tailwind, the tokens, and the Qeet fonts and Fira Code, so you don't need `next/font` for
them.

## Set up the root layout [#set-up-the-root-layout]

```tsx title="app/layout.tsx"
import { ThemeProvider, Toaster } from "@qeetrix/ui";
import type { ReactNode } from "react";
import "./globals.css";

// Applies the stored theme before the first paint. Keep the key in step with `storageKey`.
const themeScript = `try{var s=localStorage.getItem("theme");var d=s==="dark"||((!s||s==="system")&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.add(d?"dark":"light")}catch(_){}`;

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
      </head>
      <body>
        <ThemeProvider defaultTheme="system" storageKey="theme">
          {children}
          <Toaster />
        </ThemeProvider>
      </body>
    </html>
  );
}
```

* The script sets the theme class before React runs, so `<html>` differs from the server render;
  `suppressHydrationWarning` on `<html>` tells React that's expected.
* `<Toaster />` is mounted once so any component can call `toast()`.

See [Theming](/docs/guides/theming) for what `ThemeProvider` does and how to override tokens.

## Use components [#use-components]

```tsx title="app/page.tsx"
import { PlusIcon } from "@qeetrix/icons";
import { Button } from "@qeetrix/ui";

export default function Page() {
  return (
    <Button>
      <PlusIcon data-icon="inline-start" aria-hidden />
      Invite member
    </Button>
  );
}
```

Interactive components carry their own `"use client"` boundary, so a Server Component can render
them directly; each component page's **Support** table says whether it renders on the server or is
a client component. Your own components need `"use client"` when they use state, effects or event
handlers, for example a button that calls `toast()`.

Icons import from the package root; Next's bundler keeps only the ones you use.


# TanStack Start (/docs/guides/tanstack-start)



## Install [#install]

```bash
bun add @qeetrix/ui @qeetrix/icons
bun add -d tailwindcss @tailwindcss/vite
```

`@qeetrix/ui` needs React 19 or later and Tailwind CSS 4 or later.

## Configure Vite [#configure-vite]

`@qeetrix/ui/styles.css` is Tailwind source, so add Tailwind's Vite plugin next to TanStack Start's:

```ts title="vite.config.ts"
import tailwindcss from "@tailwindcss/vite";
import { tanstackStart } from "@tanstack/react-start/plugin/vite";
import viteReact from "@vitejs/plugin-react";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [tailwindcss(), tanstackStart(), viteReact()],
});
```

## Import the stylesheet [#import-the-stylesheet]

```css title="src/styles.css"
@import "@qeetrix/ui/styles.css";

/* Your token overrides go after the import. */
```

## Set up the root route [#set-up-the-root-route]

```tsx title="src/routes/__root.tsx"
import { ThemeProvider, Toaster } from "@qeetrix/ui";
import { createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
import type { ReactNode } from "react";
import appCss from "../styles.css?url";

// Applies the stored theme before the first paint. Keep the key in step with `storageKey`.
const themeScript = `try{var s=localStorage.getItem("theme");var d=s==="dark"||((!s||s==="system")&&matchMedia("(prefers-color-scheme: dark)").matches);document.documentElement.classList.add(d?"dark":"light")}catch(_){}`;

export const Route = createRootRoute({
  head: () => ({
    meta: [
      { charSet: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
    ],
    links: [{ rel: "stylesheet", href: appCss }],
  }),
  shellComponent: RootDocument,
});

function RootDocument({ children }: { children: ReactNode }) {
  return (
    <html lang="en" suppressHydrationWarning>
      <head>
        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
        <HeadContent />
      </head>
      <body>
        <ThemeProvider defaultTheme="system" storageKey="theme">
          {children}
          <Toaster />
        </ThemeProvider>
        <Scripts />
      </body>
    </html>
  );
}
```

* The `?url` import gives the compiled stylesheet's URL, which the route's `head` links.
* The script runs before the page paints, so a dark-mode user never sees a flash of light;
  `suppressHydrationWarning` on `<html>` tells React the class it adds is expected.
* `<Toaster />` is mounted once so any component can call `toast()`.

See [Theming](/docs/guides/theming) for what `ThemeProvider` does and how to override tokens.

## Use components [#use-components]

```tsx title="src/routes/index.tsx"
import { PlusIcon } from "@qeetrix/icons";
import { Button } from "@qeetrix/ui";
import { createFileRoute } from "@tanstack/react-router";

export const Route = createFileRoute("/")({ component: Home });

function Home() {
  return (
    <Button>
      <PlusIcon data-icon="inline-start" aria-hidden />
      Invite member
    </Button>
  );
}
```

Vite pre-bundles dependencies the first time the dev server starts after an install, which includes
`@qeetrix/icons`; later starts reuse that cache.


# Theming (/docs/guides/theming)



## How a theme resolves [#how-a-theme-resolves]

Components never hold colour values. They write a utility that reads a bridge variable, which reads
a semantic token, which each theme sets:

```text
color.surface.elevated        the role a component means
        ↓
--qx-color-surface-elevated   declared in :root, redeclared in .dark
        ↓
--popover                     the bridge variable, referencing the role
        ↓
bg-popover                    the utility a component writes
```

Switching theme replaces one set of CSS variables. No component re-renders, and nothing runs in
JavaScript.

## Light and dark [#light-and-dark]

The dark theme applies under a `.dark` class on `<html>`. `ThemeProvider` manages that class:

```tsx
import { ThemeProvider } from "@qeetrix/ui";

<ThemeProvider defaultTheme="system" storageKey="theme">
  {children}
</ThemeProvider>;
```

It lets the user choose `light`, `dark` or `system`, follows the operating system's preference
while set to `system`, remembers the choice in `localStorage` under `storageKey`, and toggles
`.dark` on `<html>`. Its keyboard shortcut (<kbd>Ctrl</kbd>/<kbd>⌘</kbd> + <kbd>Shift</kbd> +
<kbd>D</kbd>) is off unless you pass `enableKeyboardShortcut`.

If your app already toggles a `.dark` class, for example with `next-themes`, leave `ThemeProvider`
out: the tokens follow the class either way.

### A theme toggle [#a-theme-toggle]

`useTheme()` returns `{ theme, resolvedTheme, setTheme }`. On the server, `resolvedTheme` can't see
the stored choice, so don't branch markup on it; let CSS pick the icon and read the theme only when
the button is pressed:

```tsx
"use client";

import { MoonIcon, SunIcon } from "@qeetrix/icons";
import { Button, useTheme } from "@qeetrix/ui";

export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  return (
    <Button
      variant="ghost"
      size="icon"
      aria-label="Toggle theme"
      onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}
    >
      <SunIcon aria-hidden className="hidden dark:block" />
      <MoonIcon aria-hidden className="dark:hidden" />
    </Button>
  );
}
```

### No flash on load [#no-flash-on-load]

React runs after the page first paints, so on its own `ThemeProvider` applies the stored theme a
moment late, and a dark-mode user sees a flash of light. A small blocking script in `<head>` fixes
that by applying the class before the first paint. `ThemeProvider` is built to keep that script's
answer rather than replace it.

```js
try {
  var stored = localStorage.getItem("theme"); // the same key as `storageKey`
  var dark =
    stored === "dark" ||
    ((!stored || stored === "system") && matchMedia("(prefers-color-scheme: dark)").matches);
  document.documentElement.classList.add(dark ? "dark" : "light");
} catch (_) {}
```

The [Next.js](/docs/guides/nextjs) and [TanStack Start](/docs/guides/tanstack-start) guides show
where it goes.

## Overriding tokens [#overriding-tokens]

Override at the layer that matches what you mean, after the stylesheet import:

```css title="globals.css"
@import "@qeetrix/ui/styles.css";

/* One component's look: the narrowest change. */
:root {
  --qx-component-card-corner: var(--radius-2xl);
}

/* A meaning, everywhere it is used. */
:root {
  --qx-color-surface-rail: var(--qx-color-surface-sunken);
}

/* The shadcn contract, if your app already themes against it. */
:root {
  --primary: oklch(0.6 0.2 250);
}
```

A colour override needs a dark value too: redeclare it under `.dark`.

<Callout type="warn">
  Don't override a palette primitive, such as `--qx-color-qeet-500`, to change how something
  looks. The palette isn't in `styles.css`, so the override has nothing to replace. Change the
  semantic token that points at it.
</Callout>

## Corners [#corners]

Every component's corners come from one variable. The radius scale is derived from `--radius`,
and the corner roles read the scale, so this retunes the whole library:

```css
:root {
  --radius: 0.75rem;
}
```

## Brand colour [#brand-colour]

Qeet uses two oranges. `#F26D0E` is the brand colour, for identity: the logo, accents and brand
text on dark surfaces. It carries white text at only 3.0:1, so filled actions and checked controls
use Qeet Ember, `#D04800`, which carries a white label at 4.55:1 in both themes.

If your app re-points `--primary`, keep the same rule: choose a fill that carries its label at
4.5:1 or more, and set a `.dark` value as well. Re-branding the whole system, the brand ramp that
every semantic token follows, is done in `@qeetrix/ui`'s token source rather than in an app.


# Patterns (/docs/patterns)



`@qeetrix/ui` is a component library: reusable, product-neutral pieces that each solve one interface problem. **Blocks** and **patterns** are built from those components and live beside the library as source code you copy:

* A **block** is a ready-made section of a product screen, with a product idea baked in — an access review, an audit record, a notification inbox.
* A **pattern** is a proven arrangement of components for a recurring layout or flow, such as a list beside the selected item's detail.

Each one imports only the public `@qeetrix/ui` and `@qeetrix/icons` APIs, so a copied file works in any app that has the package. Strings travel with the file, with a `messages` prop to override them.

<Callout title="Moving in @qeetrix/ui 3.0">
  In the 2.x releases these modules are still exported by the package, and each has a component page. From 3.0 they leave the package for the `src/blocks/` and `src/patterns/` folders of the [qeetrix-ui repository](https://github.com/qeetgroup/qeetrix-ui/tree/develop/src), where they are today on the `develop` branch.
</Callout>

## Blocks [#blocks]

| Block                        | What it is                                                             | Source                                                                                                                                                                  |
| ---------------------------- | ---------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| AccessReview                 | Access assignment and certification table with a bulk-review bar       | [access-review.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/access-review/access-review.tsx)                                                    |
| AuditEvent                   | One audit record, and a feed of them (`AuditLog`)                      | [audit-event.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/audit-event/audit-event.tsx)                                                          |
| CommentThread                | Threaded comments with replies, reactions, edit and delete             | [comment-thread.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/comment-thread/comment-thread.tsx)                                                 |
| LogoUploader                 | Brand-logo picker: drop zone, preview and URL fallback                 | [logo-uploader.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/logo-uploader/logo-uploader.tsx)                                                    |
| NotificationCenter           | A bell with an unread count, opening a notification inbox              | [notification-center.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/notification-center/notification-center.tsx)                                  |
| NotificationPreferenceMatrix | Channel × category notification preferences                            | [notification-preference-matrix.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/notification-preference-matrix/notification-preference-matrix.tsx) |
| SecurityItem                 | One row of a security settings page: a session, device, passkey or key | [security-item.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/blocks/security-item/security-item.tsx)                                                    |

## Patterns [#patterns]

| Pattern      | What it is                                                                                                          | Source                                                                                                                 |
| ------------ | ------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
| MasterDetail | A list beside the selected item's detail: two resizable panes on wide screens, the detail in a sheet on narrow ones | [master-detail.tsx](https://github.com/qeetgroup/qeetrix-ui/blob/develop/src/patterns/master-detail/master-detail.tsx) |

## Using one [#using-one]

1. Copy the `.tsx` file into your app — for example `src/components/blocks/`.
2. Install `@qeetrix/ui` and `@qeetrix/icons` if you have not ([Installation](/docs/installation)).
3. Import it from where you put it, and adapt it: it is your code now.


# Resources (/docs/resources)



## Releases and changes [#releases-and-changes]

<Cards>
  <Card title="Releases" href="https://github.com/qeetgroup/qeetrix-ui/releases" description="Every published version of @qeetrix/ui, with its notes." />

  <Card title="Changelog" href="https://github.com/qeetgroup/qeetrix-ui/blob/main/CHANGELOG.md" description="What changed in each version, written for the person upgrading." />
</Cards>

## Packages [#packages]

<Cards>
  <Card title="@qeetrix/ui" href="https://www.npmjs.com/package/@qeetrix/ui" description="The components, tokens, providers and stylesheet." />

  <Card title="@qeetrix/icons" href="https://www.npmjs.com/package/@qeetrix/icons" description="The icon set, in outline and filled drawings, round and sharp shapes, and the Qeet logos." />
</Cards>

## Source [#source]

<Cards>
  <Card title="qeetrix-ui" href="https://github.com/qeetgroup/qeetrix-ui" description="The library, its blocks and patterns, and the playground." />

  <Card title="qeetrix-icons" href="https://github.com/qeetgroup/qeetrix-icons" description="The icon set and its generator." />

  <Card title="qeetrix-docs" href="https://github.com/qeetgroup/qeetrix-docs" description="This site." />

  <Card title="Contributing" href="https://github.com/qeetgroup/qeetrix-ui/blob/main/CONTRIBUTING.md" description="How a component is proposed, built, tested and shipped." />
</Cards>

## For tools [#for-tools]

* **The component manifest** — `@qeetrix/ui/manifest.json` describes every component: status, capabilities, states, API and accessibility. Import it from the package.
* **The design tokens** — `@qeetrix/ui/tokens.json` resolves every token for the light and dark themes.
* **These docs as text** — [/llms.txt](/llms.txt) indexes every page, and [/llms-full.txt](/llms-full.txt) is the whole site in one file.

The Storybook workshop (`qeetrix-story`) is internal and not publicly deployed.