Components
104 components and counting. Each renders live and ships as copy-paste source.
Actions
Button
Clickable button built on react-aria-components, styled with the quebi design system. Six intents and a full size scale.
ViewButton Group
Joins a row or column of buttons and inputs into one connected, segmented control by collapsing shared borders and squaring inner radii.
ViewLink Button
A semantic anchor built on react-aria-components, styled like a Button via shared quebi button styles. Inherits the full intent and size scale.
ViewToggle
A two-state pressable button built on react-aria-components, styled with the quebi design system. The selected state lights up with brand teal.
ViewToggle Group
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.
ViewToolbar
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.
ViewCharts
Area Chart
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.
ViewBar Chart
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.
ViewBar List
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.
ViewChart
Themeable recharts wrapper with styled axes, grid, tooltip, and an interactive legend, using a teal-led quebi color palette. Requires the recharts package.
ViewLine Chart
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.
ViewPie Chart
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.
ViewTracker
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.
ViewDisplay
Avatar
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.
ViewBadge
Pill-shaped status indicator styled with the quebi design system. Nine intents plus an optional state dot for live labels.
ViewCarousel
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.
ViewDescription List
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.
ViewDisclosure Group
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.
ViewEnergy Class Badge
EU energy-efficiency class chip (A–G) on the official green→red label scale, with a neutral quebi fallback for unknown or legacy values.
ViewFormatted Date
Locale-aware date and time formatter that renders a semantic <time> element, with absolute and relative styles powered by the Intl APIs.
ViewFormatted Number
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.
ViewFormatted Storage
Renders a storage capacity given in GB as a compact label, rolling values of 1024GB and above up to TB.
ViewGallery
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.
ViewGrid List
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.
ViewHeading
Semantic h1–h4 heading with a quebi-tuned type scale. White, font-semibold with tight tracking.
ViewKeyboard
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.
ViewLeaderboard
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.
ViewShow More
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.
ViewSnippet
A single-line inline code surface for shell commands, with a copy-to-clipboard button. Dark surface styled with the quebi design system.
ViewTable
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.
ViewTag Group
Accessible group of tag pills built on react-aria-components, styled with the quebi design system. Supports selection, removable tags, links, and disabled state.
ViewText
Typographic primitives for body copy: a muted paragraph, an inline text link, emphasized strong text, and inline code. Styled with the quebi design system.
ViewTree
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.
ViewFeedback
Loader
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.
ViewMeter
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.
ViewNote
Inline callout for contextual feedback, styled with the quebi design system. Five intents with optional status icon and heading.
ViewProgress Bar
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.
ViewProgress Circle
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.
ViewSkeleton
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.
ViewToast
Transient, non-blocking feedback messages, styled with the quebi design system. Self-contained queue with a portalled, aria-live stack and five status intents.
ViewForms
Calendar
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.
ViewCheckbox
Accessible checkbox built on react-aria-components, styled with the quebi design system. Supports selected, indeterminate, invalid, and disabled states, plus grouping.
ViewChoice Box
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.
ViewColor Area
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.
ViewColor Field
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.
ViewColor Picker
Accessible color picker wrapper built on react-aria-components, styled with the quebi design system. Includes an EyeDropper helper for sampling colors.
ViewColor Slider
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.
ViewColor Swatch
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.
ViewColor Swatch Picker
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.
ViewColor Thumb
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.
ViewColor Wheel
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.
ViewCombo Box
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.
ViewDate Field
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.
ViewDate Picker
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.
ViewDate Range Picker
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.
ViewDrop Zone
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.
ViewField
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.
ViewFile Trigger
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.
ViewInput
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.
ViewInput OTP
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.
ViewList Box
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.
ViewMultiple Select
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.
ViewNumber Field
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.
ViewRadio
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.
ViewRange Calendar
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.
ViewSearch Field
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.
ViewSelect
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.
ViewSlider
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.
ViewSwitch
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.
ViewTag Field
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.
ViewText Field
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.
ViewTextarea
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.
ViewTime Field
A segmented time input (hour, minute, second, AM/PM) with keyboard-friendly editing, built on react-aria-components.
ViewLayout
Card
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.
ViewContainer
Centered, max-width layout wrapper with responsive horizontal padding. Exposes its breakpoint and gutter as CSS variables for inline overrides.
ViewScroll Area
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.
ViewSeparator
A thin divider line built on react-aria-components, styled with the quebi design system. Splits content horizontally or vertically.
ViewNavigation
Breadcrumbs
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.
ViewLink
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.
ViewLink Toggle Group
A segmented control rendered as anchor links inside a tablist, for view switches that are real navigations. Styled with the quebi design system.
ViewNavbar
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.
ViewPagination
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.
ViewSidebar
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.
ViewStepper
Horizontal progress indicator for multi-step flows, with active and completed steps highlighted in quebi brand teal. Admin (labelled) and kiosk (bullet-only) variants.
ViewTabs
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.
ViewOverlays
Command Menu
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.
ViewContext Menu
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.
ViewDialog
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.
ViewDrawer
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.
ViewDropdown
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.
ViewMenu
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.
ViewModal
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.
ViewPopover
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.
ViewSheet
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.
ViewTooltip
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.
ViewConform
Conform Checkbox
The quebi Checkbox wired to Conform. Binds a boolean field's name, required, default, and validity from field metadata and renders inline errors.
ViewConform Color Picker
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.
ViewConform Color Swatch Picker
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.
ViewConform Date Field
The quebi DateField wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors.
ViewConform Date Picker
The quebi DatePicker wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors.
ViewConform Field
A text field bound to a Conform field — derives name, default, required, and validation errors from the field metadata.
ViewConform Number Field
Number field wired to a Conform field — binds name, default, required, and errors from field metadata and renders inline validation.
ViewConform Select
The quebi Select wired to Conform. Binds a single-value field's name, default selection, and validity from field metadata and renders inline errors.
ViewConform Storage Picker
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.
View