# ui-lib

> quebi React component library: 104 components built on react-aria-components and Tailwind, styled with the quebi design system. Copy-paste source, no package install required. Every component is self-contained.

This file tells AI coding agents how to find and pull components programmatically.

## Stack

- React 19 + TypeScript, `react-aria-components` (accessibility), `tailwind-variants`, Tailwind CSS v4.
- Components import a shared `cn` helper from `@/lib/utils` and may import sibling components from `@/components/<name>`. Both are listed in each component's `registryDependencies` and must be pulled too.

## Discovery endpoints

- [https://ui-lib.quebi.de/api/index.json](https://ui-lib.quebi.de/api/index.json) — full catalog: every component with name, description, category, tags, npm `dependencies`, `registryDependencies`, and file URLs. Fetch this first.
- https://ui-lib.quebi.de/api/components/<name>.json — one component: the above plus inlined raw `source` and syntax-highlighted `highlighted` HTML.
- https://ui-lib.quebi.de/api/components/<name>.tsx — raw, copy-paste-ready source.
- [https://ui-lib.quebi.de/api/registry.json](https://ui-lib.quebi.de/api/registry.json) — shadcn-compatible registry index.
- https://ui-lib.quebi.de/r/<name>.json — shadcn registry item (source + resolved dependency URLs).

## How an agent uses this

Recommended (shadcn CLI — resolves all dependencies automatically):

```sh
npx shadcn@latest add https://ui-lib.quebi.de/r/<name>.json
```

Manual (any agent, any toolchain):

1. `GET https://ui-lib.quebi.de/api/index.json` and pick a component by matching the user's need against `name`/`description`/`tags` (do the matching yourself — there is no search endpoint; the catalog is small enough to reason over directly).
2. `GET /api/components/<name>.json` for that component.
3. Write its `source` to your project (e.g. `components/ui/<name>.tsx`).
4. Recursively resolve `registryDependencies` — each is another ui-lib component slug or a shared lib (e.g. `lib-utils` → `lib/utils.ts`). Fetch and add each the same way.
5. Install the npm packages listed in `dependencies`.

Notes for agents:
- `@/` is an alias for the project `src/` root; rewrite it to match the target project's import alias if different.
- Conform-bound form variants are the `conform-*` components; they wrap a base component and bind it to the Conform form library.
- Prefer fetching `.json` over scraping the HTML pages at `/components/<name>`.

## Components
- [Area Chart](https://ui-lib.quebi.de/api/components/area-chart.json): Filled area chart built on the quebi chart wrapper, with an interactive legend, themed tooltip, stacked/percent stacking, and gradient or solid fills. Requires the recharts package.
- [Avatar](https://ui-lib.quebi.de/api/components/avatar.json): Displays a user image with a graceful initials fallback, styled with the quebi design system. Circular or rounded-square, with a full xs–9xl size scale.
- [Badge](https://ui-lib.quebi.de/api/components/badge.json): Pill-shaped status indicator styled with the quebi design system. Nine intents plus an optional state dot for live labels.
- [Bar Chart](https://ui-lib.quebi.de/api/components/bar-chart.json): High-level bar chart wrapper over the Chart primitive supporting grouped, stacked, and percent layouts with a teal-led quebi palette and an interactive legend. Requires the recharts package.
- [Bar List](https://ui-lib.quebi.de/api/components/bar-list.json): A horizontal bar chart for ranked categorical data — each row's translucent brand-teal bar encodes its value relative to the largest entry, styled with the quebi design system.
- [Breadcrumbs](https://ui-lib.quebi.de/api/components/breadcrumbs.json): Compact navigation trail built on react-aria-components. Intermediate crumbs are muted brand-teal links; the current page is white and semibold, with a chevron or slash separator.
- [Button](https://ui-lib.quebi.de/api/components/button.json): Clickable button built on react-aria-components, styled with the quebi design system. Six intents and a full size scale.
- [Button Group](https://ui-lib.quebi.de/api/components/button-group.json): Joins a row or column of buttons and inputs into one connected, segmented control by collapsing shared borders and squaring inner radii.
- [Calendar](https://ui-lib.quebi.de/api/components/calendar.json): An accessible month calendar with month and year selects in the header, built on react-aria-components and @internationalized/date. The selected day fills with brand teal and today is ringed — foundational for Range Calendar and Date Picker.
- [Card](https://ui-lib.quebi.de/api/components/card.json): A surface for grouping related content, styled with the quebi design system. Composes a header, content, and footer, with default and feature variants plus an optional hover glow.
- [Carousel](https://ui-lib.quebi.de/api/components/carousel.json): A slide-able content region powered by embla-carousel, styled with the quebi design system. Composes a track of items with prev/next controls built on the quebi Button, supporting horizontal or vertical orientation and arrow-key navigation.
- [Chart](https://ui-lib.quebi.de/api/components/chart.json): Themeable recharts wrapper with styled axes, grid, tooltip, and an interactive legend, using a teal-led quebi color palette. Requires the recharts package.
- [Checkbox](https://ui-lib.quebi.de/api/components/checkbox.json): Accessible checkbox built on react-aria-components, styled with the quebi design system. Supports selected, indeterminate, invalid, and disabled states, plus grouping.
- [Choice Box](https://ui-lib.quebi.de/api/components/choice-box.json): Selectable cards built on react-aria-components, styled with the quebi design system. Supports single or multiple selection, 1–6 column layouts, label/description slots, and readonly, invalid, and disabled states.
- [Color Area](https://ui-lib.quebi.de/api/components/color-area.json): Two-dimensional color picking surface built on react-aria-components, styled with the quebi design system. Drag the thumb across the gradient to pick two color channels at once.
- [Color Field](https://ui-lib.quebi.de/api/components/color-field.json): Accessible text input for editing a color as a hex value, built on react-aria-components and styled with the quebi design system. Parses and validates color input and threads value, validation, and disabled state to its field primitives.
- [Color Picker](https://ui-lib.quebi.de/api/components/color-picker.json): Accessible color picker wrapper built on react-aria-components, styled with the quebi design system. Includes an EyeDropper helper for sampling colors.
- [Color Slider](https://ui-lib.quebi.de/api/components/color-slider.json): Single-channel color slider built on react-aria-components, styled with the quebi design system. Adjusts one channel (hue, saturation, lightness, or alpha) along a live gradient track with a draggable thumb and optional value output.
- [Color Swatch](https://ui-lib.quebi.de/api/components/color-swatch.json): Accessible color swatch built on react-aria-components, styled with the quebi design system. Renders a fixed-size square filled with a color value, with a subtle cyan inset ring.
- [Color Swatch Picker](https://ui-lib.quebi.de/api/components/color-swatch-picker.json): Accessible color picker built on react-aria-components, styled with the quebi design system. A wrapping grid of selectable swatches with a brand-teal selection ring and focus state.
- [Color Thumb](https://ui-lib.quebi.de/api/components/color-thumb.json): The draggable handle for color pickers (color area, wheel, and slider), built on react-aria-components and styled with the quebi design system. Shows the picked color as its fill with a quebi teal focus ring.
- [Color Wheel](https://ui-lib.quebi.de/api/components/color-wheel.json): Circular hue picker built on react-aria-components and styled with the quebi design system. Drag the thumb around the ring to choose a hue; pairs with a color area for full color selection.
- [Combo Box](https://ui-lib.quebi.de/api/components/combo-box.json): Autocomplete combo box built on react-aria-components, styled with the quebi design system. Pairs a text input with a filterable dropdown of options, with brand-teal selection and sections.
- [Command Menu](https://ui-lib.quebi.de/api/components/command-menu.json): A ⌘K command palette built on react-aria-components' Autocomplete and Modal, styled with the quebi design system. Renders a dark surface inside a dimmed overlay with a quebi search field, sectioned results, keyboard shortcut hints, and a footer. Composes the menu and dropdown item styling for brand-teal selection.
- [Conform Checkbox](https://ui-lib.quebi.de/api/components/conform-checkbox.json): The quebi Checkbox wired to Conform. Binds a boolean field's name, required, default, and validity from field metadata and renders inline errors.
- [Conform Color Picker](https://ui-lib.quebi.de/api/components/conform-color-picker.json): The quebi Color Picker wired to Conform. Binds a hex-string field's name, default, required, and validity from field metadata, mirrors the chosen color into a hidden input, and renders inline errors.
- [Conform Color Swatch Picker](https://ui-lib.quebi.de/api/components/conform-color-swatch-picker.json): The quebi ColorSwatchPicker wired to Conform for multi-select. Mirrors swatch selection into a list-data binding and a hidden input, deriving the field name and validity from field metadata with inline errors.
- [Conform Date Field](https://ui-lib.quebi.de/api/components/conform-date-field.json): The quebi DateField wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors.
- [Conform Date Picker](https://ui-lib.quebi.de/api/components/conform-date-picker.json): The quebi DatePicker wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors.
- [Conform Field](https://ui-lib.quebi.de/api/components/conform-field.json): A text field bound to a Conform field — derives name, default, required, and validation errors from the field metadata.
- [Conform Number Field](https://ui-lib.quebi.de/api/components/conform-number-field.json): Number field wired to a Conform field — binds name, default, required, and errors from field metadata and renders inline validation.
- [Conform Select](https://ui-lib.quebi.de/api/components/conform-select.json): The quebi Select wired to Conform. Binds a single-value field's name, default selection, and validity from field metadata and renders inline errors.
- [Conform Storage Picker](https://ui-lib.quebi.de/api/components/conform-storage-picker.json): A multi-select chip group of device storage sizes wired to Conform. Selected sizes are tracked in a react-stately list and mirrored into a hidden input for submission, with validity derived from the field metadata.
- [Container](https://ui-lib.quebi.de/api/components/container.json): Centered, max-width layout wrapper with responsive horizontal padding. Exposes its breakpoint and gutter as CSS variables for inline overrides.
- [Context Menu](https://ui-lib.quebi.de/api/components/context-menu.json): Right-click context menu built on the shared Menu overlay and styled with the quebi design system. Captures the pointer position to anchor the popover, reusing the dark surface, cyan hairlines, and dropdown item styling with sections, separators, shortcuts, and intents.
- [Date Field](https://ui-lib.quebi.de/api/components/date-field.json): Accessible segmented date entry built on react-aria-components, styled with the quebi design system. Each date part is individually editable; the focused segment lights up with a brand-teal wash.
- [Date Picker](https://ui-lib.quebi.de/api/components/date-picker.json): A segmented date input paired with a calendar overlay, built on react-aria-components and styled with the quebi design system. The trigger uses the quebi input chrome with a calendar-icon button; a popover (or modal on mobile) holds the calendar.
- [Date Range Picker](https://ui-lib.quebi.de/api/components/date-range-picker.json): Two segmented date inputs (start → end) paired with a range-calendar overlay, built on react-aria-components and styled with the quebi design system. The trigger uses the quebi input chrome with a calendar-icon button; a popover (or modal on mobile) holds the range calendar.
- [Description List](https://ui-lib.quebi.de/api/components/description-list.json): A responsive term/description grid built on a semantic <dl>, styled with the quebi design system. Stacks on mobile and splits into two columns on larger screens.
- [Dialog](https://ui-lib.quebi.de/api/components/dialog.json): Accessible dialog surface built on react-aria-components, styled with the quebi design system. The foundation for modal, popover, sheet, and drawer — compose it inside an overlay.
- [Disclosure Group](https://ui-lib.quebi.de/api/components/disclosure-group.json): Accordion-style group of expandable sections built on react-aria-components, styled with the quebi design system. Each item has a cyan-tinted border and white header; expanding lifts the active section with a teal-tinted surface and glow.
- [Drawer](https://ui-lib.quebi.de/api/components/drawer.json): A draggable sliding panel that enters from any edge, built on react-aria-components and motion with drag-to-dismiss. Styled with the quebi design system.
- [Drop Zone](https://ui-lib.quebi.de/api/components/drop-zone.json): Accessible drag-and-drop target built on react-aria-components, styled with the quebi design system. A dashed cyan surface that highlights with brand teal and a glow while an item is dragged over it.
- [Dropdown](https://ui-lib.quebi.de/api/components/dropdown.json): Foundational dropdown building blocks (items, sections, labels, descriptions, separators, and keyboard hints) shared by Menu, Select, Combo Box, and List Box. Built on react-aria-components and styled with the quebi dark surface and brand-teal selection.
- [Energy Class Badge](https://ui-lib.quebi.de/api/components/energy-class-badge.json): EU energy-efficiency class chip (A–G) on the official green→red label scale, with a neutral quebi fallback for unknown or legacy values.
- [Field](https://ui-lib.quebi.de/api/components/field.json): Accessible form field primitives built on react-aria-components, styled with the quebi design system. Includes Label, Description, FieldError, plus Field, Fieldset, FieldGroup, and Legend wrappers for composing the label → control → hint stack.
- [File Trigger](https://ui-lib.quebi.de/api/components/file-trigger.json): A button that opens the native file picker, built on react-aria-components and styled with the quebi design system. Supports multiple files, directories, camera capture, and a pending state.
- [Formatted Date](https://ui-lib.quebi.de/api/components/formatted-date.json): Locale-aware date and time formatter that renders a semantic <time> element, with absolute and relative styles powered by the Intl APIs.
- [Formatted Number](https://ui-lib.quebi.de/api/components/formatted-number.json): Locale-aware number, currency, and percentage formatting via Intl.NumberFormat. Reads the active locale from react-aria's I18nProvider, with formatter helpers for string contexts.
- [Formatted Storage](https://ui-lib.quebi.de/api/components/formatted-storage.json): Renders a storage capacity given in GB as a compact label, rolling values of 1024GB and above up to TB.
- [Gallery](https://ui-lib.quebi.de/api/components/gallery.json): A presentational image gallery with a large hero image, a thumbnail strip for switching between images, and a click-to-zoom lightbox built on Modal. Styled with the quebi design system.
- [Grid List](https://ui-lib.quebi.de/api/components/grid-list.json): Keyboard-navigable, selectable list built on react-aria-components and styled with the quebi design system. Supports single and multiple selection with row checkboxes, drag handles, sections, and labels/descriptions.
- [Heading](https://ui-lib.quebi.de/api/components/heading.json): Semantic h1–h4 heading with a quebi-tuned type scale. White, font-semibold with tight tracking.
- [Input](https://ui-lib.quebi.de/api/components/input.json): Accessible text input built on react-aria-components, styled with the quebi design system. Supports hover, focus, invalid, and disabled states, plus an InputGroup wrapper for icon, text, and button adornments.
- [Input OTP](https://ui-lib.quebi.de/api/components/input-otp.json): One-time-password / verification-code input built on the input-otp package, styled with the quebi design system. Individual slots use the quebi input style and the active slot lifts to brand teal; supports separators, invalid, and disabled states.
- [Keyboard](https://ui-lib.quebi.de/api/components/keyboard.json): Keyboard shortcut hint built on react-aria-components, styled with the quebi design system. Renders muted key glyphs next to menu items, buttons, and tooltips.
- [Leaderboard](https://ui-lib.quebi.de/api/components/leaderboard.json): A ranked list where each row is a react-aria ProgressBar whose brand-teal fill encodes its value relative to the leader, styled with the quebi design system.
- [Line Chart](https://ui-lib.quebi.de/api/components/line-chart.json): A config-driven line chart on the quebi Chart wrapper, rendering one teal-led series per config key with styled axes, grid, tooltip, and an interactive legend. Requires the recharts package.
- [Link](https://ui-lib.quebi.de/api/components/link.json): Brand-teal text link built on react-aria-components, styled with the quebi design system. No underline by default; external hrefs render as a plain anchor.
- [Link Button](https://ui-lib.quebi.de/api/components/link-button.json): A semantic anchor built on react-aria-components, styled like a Button via shared quebi button styles. Inherits the full intent and size scale.
- [Link Toggle Group](https://ui-lib.quebi.de/api/components/link-toggle-group.json): A segmented control rendered as anchor links inside a tablist, for view switches that are real navigations. Styled with the quebi design system.
- [List Box](https://ui-lib.quebi.de/api/components/list-box.json): A selectable list with single or multiple selection, sections, descriptions, and drag handles. Built on react-aria-components, reuses the shared dropdown item styling, and is styled with the quebi dark surface and brand-teal selection.
- [Loader](https://ui-lib.quebi.de/api/components/loader.json): Indeterminate spinner built on react-aria-components' ProgressBar, styled with the quebi design system. Ring and segmented spin glyphs that inherit the brand teal accent.
- [Menu](https://ui-lib.quebi.de/api/components/menu.json): Trigger-anchored action menu built on react-aria-components and styled with the quebi design system. Composes the popover overlay and the shared dropdown item styling, with sections, separators, keyboard shortcuts, intents, and nested submenus. Foundational for command-menu and context-menu.
- [Meter](https://ui-lib.quebi.de/api/components/meter.json): Accessible meter built on react-aria-components, styled with the quebi design system. Shows a value within a known range with a brand-teal fill that shifts to amber and red past warning and danger thresholds.
- [Modal](https://ui-lib.quebi.de/api/components/modal.json): A modal dialog that presents the Dialog surface inside a dark, blurred overlay, with size variants and an optional close button. Built on react-aria-components and styled with the quebi design system.
- [Multiple Select](https://ui-lib.quebi.de/api/components/multiple-select.json): A multi-value picker that renders chosen options as removable tags and opens a searchable list-box popover to add more. Composes Tag Group, Popover, Search Field, and List Box, styled with the quebi dark surface and brand-teal selection.
- [Navbar](https://ui-lib.quebi.de/api/components/navbar.json): A responsive top or bottom navigation bar that collapses into a Sheet drawer on mobile, with a brand-teal active-link indicator. Composes Button, Separator, and Sheet.
- [Note](https://ui-lib.quebi.de/api/components/note.json): Inline callout for contextual feedback, styled with the quebi design system. Five intents with optional status icon and heading.
- [Number Field](https://ui-lib.quebi.de/api/components/number-field.json): Accessible numeric input built on react-aria-components, styled with the quebi design system. Parses, steps, and formats numbers with increment/decrement steppers and optional prefix/suffix addons.
- [Pagination](https://ui-lib.quebi.de/api/components/pagination.json): Compact row of navigation targets for paging through results, with first/prev/next/last controls and an active page styled in the quebi brand teal.
- [Pie Chart](https://ui-lib.quebi.de/api/components/pie-chart.json): Pie and donut chart built on the quebi chart wrapper and recharts, with teal-led quebi segment colors and an optional centered total label. Requires the recharts package.
- [Popover](https://ui-lib.quebi.de/api/components/popover.json): Floating overlay anchored to a trigger, built on react-aria-components and styled with the quebi design system. Reuses the dialog surface slots and is the foundation for menu, select, combo-box, and multiple-select.
- [Progress Bar](https://ui-lib.quebi.de/api/components/progress-bar.json): Accessible progress bar built on react-aria-components, styled with the quebi design system. A brand-teal fill over a cyan-tinted track, with optional header and value text, and a determinate or indeterminate state.
- [Progress Circle](https://ui-lib.quebi.de/api/components/progress-circle.json): Circular progress indicator built on react-aria-components, styled with the quebi design system. Shows determinate value as a brand-teal ring over a faint cyan track, or spins continuously when indeterminate.
- [Radio](https://ui-lib.quebi.de/api/components/radio.json): Accessible radio and radio group built on react-aria-components, styled with the quebi design system. Selected state fills with brand teal; supports invalid and disabled states, descriptions, and grouping.
- [Range Calendar](https://ui-lib.quebi.de/api/components/range-calendar.json): An accessible date-range calendar built on react-aria-components and @internationalized/date. The range endpoints fill with brand teal and the days in-between get a faint brand wash — foundational for Date Picker and Date Range Picker.
- [Scroll Area](https://ui-lib.quebi.de/api/components/scroll-area.json): Scrollable viewport with a slim, cyan-tinted scrollbar, styled with the quebi design system. Supports vertical, horizontal, or both axes, optional edge fading, and a reserved scrollbar gutter.
- [Search Field](https://ui-lib.quebi.de/api/components/search-field.json): Search input built on react-aria-components and the quebi Input, with a leading magnifying-glass icon and a clear button that appears while typing. Escape or the clear button empties the field.
- [Select](https://ui-lib.quebi.de/api/components/select.json): An accessible single or multiple select with a quebi input-style trigger and a dropdown surface for options. Built on react-aria-components — foundational for Calendar and Conform Select.
- [Separator](https://ui-lib.quebi.de/api/components/separator.json): A thin divider line built on react-aria-components, styled with the quebi design system. Splits content horizontally or vertically.
- [Sheet](https://ui-lib.quebi.de/api/components/sheet.json): A side panel that slides in from any edge of the viewport, built on react-aria-components and the Dialog surface. Use for filters, detail editing, and navigation drawers.
- [Show More](https://ui-lib.quebi.de/api/components/show-more.json): A hairline divider carrying an inline toggle pill (or plain label) to reveal collapsed content. Built on react-aria-components and styled with the quebi design system.
- [Sidebar](https://ui-lib.quebi.de/api/components/sidebar.json): Full-featured, collapsible navigation surface built on react-aria-components and styled with the quebi design system. Supports docked/hidden collapse, float and inset intents, sections, disclosure groups, badges, tooltips, a mobile sheet, and a keyboard shortcut to toggle.
- [Skeleton](https://ui-lib.quebi.de/api/components/skeleton.json): A pulsing placeholder for content that is still loading, styled with the quebi design system. Compose several to mirror the shape of the eventual content.
- [Slider](https://ui-lib.quebi.de/api/components/slider.json): Accessible slider built on react-aria-components, styled with the quebi design system. Supports single and range values, horizontal and vertical orientations, a value output, and disabled state, with a brand-teal track fill and thumb.
- [Snippet](https://ui-lib.quebi.de/api/components/snippet.json): A single-line inline code surface for shell commands, with a copy-to-clipboard button. Dark surface styled with the quebi design system.
- [Stepper](https://ui-lib.quebi.de/api/components/stepper.json): Horizontal progress indicator for multi-step flows, with active and completed steps highlighted in quebi brand teal. Admin (labelled) and kiosk (bullet-only) variants.
- [Switch](https://ui-lib.quebi.de/api/components/switch.json): Accessible toggle switch built on react-aria-components, styled with the quebi design system. The on state fills the track with brand teal while a white thumb slides across; supports labels, controlled state, and disabled.
- [Table](https://ui-lib.quebi.de/api/components/table.json): Accessible data table built on react-aria-components, styled with the quebi design system. Supports row selection, sorting, drag-and-drop, resizable columns, striping, and grid lines.
- [Tabs](https://ui-lib.quebi.de/api/components/tabs.json): Accessible tabs built on react-aria-components, styled with the quebi design system. Quiet inactive tabs with a brand-teal active tab and underline indicator; supports horizontal and vertical orientation.
- [Tag Field](https://ui-lib.quebi.de/api/components/tag-field.json): Text field that commits typed entries into removable hairline chips on Enter, comma, or semicolon. Built on react-aria-components and styled with the quebi design system; supports controlled and uncontrolled values, case-insensitive de-duplication, required validation, and a hidden mirror input for native form submission.
- [Tag Group](https://ui-lib.quebi.de/api/components/tag-group.json): Accessible group of tag pills built on react-aria-components, styled with the quebi design system. Supports selection, removable tags, links, and disabled state.
- [Text](https://ui-lib.quebi.de/api/components/text.json): Typographic primitives for body copy: a muted paragraph, an inline text link, emphasized strong text, and inline code. Styled with the quebi design system.
- [Text Field](https://ui-lib.quebi.de/api/components/text-field.json): Accessible text field wrapper built on react-aria-components, styled with the quebi design system. Lays out the label → control → hint stack and composes with Label, Description, FieldError, and Input primitives, threading value, validation, and disabled state to the control.
- [Textarea](https://ui-lib.quebi.de/api/components/textarea.json): Multi-line text input built on react-aria-components, styled with the quebi design system. Auto-grows with its content and supports placeholder, invalid, and disabled states.
- [Time Field](https://ui-lib.quebi.de/api/components/time-field.json): A segmented time input (hour, minute, second, AM/PM) with keyboard-friendly editing, built on react-aria-components.
- [Toast](https://ui-lib.quebi.de/api/components/toast.json): Transient, non-blocking feedback messages, styled with the quebi design system. Self-contained queue with a portalled, aria-live stack and five status intents.
- [Toggle](https://ui-lib.quebi.de/api/components/toggle.json): A two-state pressable button built on react-aria-components, styled with the quebi design system. The selected state lights up with brand teal.
- [Toggle Group](https://ui-lib.quebi.de/api/components/toggle-group.json): A set of pressable toggles that act as one control, built on react-aria-components and styled with the quebi design system. Supports single or multiple selection, horizontal or vertical layout.
- [Toolbar](https://ui-lib.quebi.de/api/components/toolbar.json): Horizontal or vertical container that groups toggle actions and separators into a single keyboard-navigable surface, built on react-aria-components and styled with the quebi design system.
- [Tooltip](https://ui-lib.quebi.de/api/components/tooltip.json): Floating label built on react-aria-components, styled with the quebi design system. A dark surface with a cyan hairline, an optional arrow, and placement-aware enter/exit motion.
- [Tracker](https://ui-lib.quebi.de/api/components/tracker.json): A strip of thin cells for visualizing a series of states over time — uptime, incident history, or activity. Status cells keep semantic colors and each cell can carry a tooltip.
- [Tree](https://ui-lib.quebi.de/api/components/tree.json): Collapsible tree view built on react-aria-components, styled with the quebi design system. Supports nesting, expand/collapse chevrons, and single or multi (checkbox) selection.