ui-lib

catalog — 179 components

components

179 components and counting. Each renders live and ships as copy-paste source.

layout

05 entries
  1. 01CardA surface for a self-contained unit that sits beside a few others of a different kind. Composes a header, content, and footer, with default and feature variants plus an optional hover ground. Most things that look like they want a card want a heading, a list or a table instead — read its usage guidance first.
  2. 02ContainerCentered, max-width layout wrapper with responsive horizontal padding. Exposes its breakpoint and gutter as CSS variables for inline overrides.
  3. 03PanelA tinted band that sets a region of the page apart — a fill and padding, with no border, radius or shadow. Muted for grouping, brand for the one band that asks for something; bleed runs it through a Container's gutter to the edges.
  4. 04Scroll AreaScrollable viewport with the quebi native scrollbar — a 6px ink pill hugging the edge, no stepper arrows and no padding around it — styled with the quebi design system. On the rare rounded surface (a floating surface, a stage frame) the bar is clipped to the surface's own rounded rect, so its ends curve away with the corner instead of running out through the arc. Supports vertical, horizontal, or both axes, four scrollbar variants (`flush`, `floating`, `none`, and `arrows` — steppers for a square-cornered surface), optional edge fading, and a reserved scrollbar gutter. `className` lands on the scroll container itself, so padding on a ScrollArea insets the content while the scrollbar still hugs the container's edge.
  5. 05SeparatorA thin divider line built on react-aria-components, styled with the quebi design system. Splits content horizontally or vertically.

navigation

09 entries
  1. 01BreadcrumbsCompact navigation trail built on react-aria-components. Set in the nav role: intermediate crumbs are muted links that underline on hover, the current page is full ink, with a chevron or slash separator.
  2. 02LinkInk text link built on react-aria-components, styled with the quebi design system. Underlined at rest so it stays distinguishable from body copy; add no-underline for navigation. External hrefs render as a plain anchor.
  3. 03Link Toggle GroupA segmented control rendered as anchor links inside a tablist, for view switches that are real navigations. Styled with the quebi design system.
  4. 04NavbarA responsive top or bottom navigation bar that collapses into a Sheet drawer on mobile, with the current link underlined and a hairline under the bar (none with the plain intent). Composes Button, Separator, and Sheet.
  5. 05PaginationThe pager for a page of results, and the shape to reach for: PaginationStack centres the range summary above the row of page numbers, with an optional PaginationJump — a labelled "Go to page" field whose bound is a message under the input rather than an empty result. Targets are links by default — a URL per page, an anchor you can middle-click — and pressable without one, so the same row serves a page that is a query parameter with no address. That callback mode is what Table Controls' TablePager renders, so a table and a page of a document number their pages the same way. Sizes match Button: xs is 30px, sm 38px and the default.
  6. 06SidebarFull-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. The surface is positioned fixed to the viewport, next to an in-flow spacer that reserves its width — which is what a full-page app shell wants. To embed one in a sub-region of a page instead, give the wrapping element contain: layout (Tailwind's contain-layout) so it becomes the containing block for the fixed surface; otherwise the items paint at the left edge of the window rather than inside the region.
  7. 07StepperHorizontal progress indicator for multi-step flows, drawn in ink: the active step is the one solid bullet, done steps an ink ring, upcoming ones a hairline. Admin (labelled) and kiosk (bullet-only) variants.
  8. 08Table of ContentsThe "on this page" rail: a nav of links to the headings of the document beside it, nested by heading level, with the heading being read marked current by a scroll-spy that re-measures on scroll and on layout change. A click scrolls smoothly (or instantly under reduced motion), writes the #id into the URL and moves focus to the heading. The items are data, so a prerendered page ships the list in its HTML; useTableOfContents collects them from the DOM where that does not matter.
  9. 09TabsAccessible tabs built on react-aria-components, styled with the quebi design system. Underline tabs on a hairline: quiet inactive tabs, and the selected tab in ink with a 2px rule over the hairline — under it when horizontal, on the inline-start edge when vertical.

actions

06 entries
  1. 01ButtonClickable button built on react-aria-components, styled with the quebi design system. Five intents and a full size scale.
  2. 02Button GroupJoins a row or column of buttons and inputs into one connected, segmented control by collapsing shared borders and squaring inner radii.
  3. 03Link ButtonA semantic anchor built on react-aria-components, styled like a Button via shared quebi button styles. Inherits the full intent and size scale.
  4. 04ToggleA two-state pressable button built on react-aria-components, styled with the quebi design system. The selected state takes the selected tint with signal-coloured text.
  5. 05Toggle GroupA 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.
  6. 06ToolbarHorizontal or vertical container that groups actions, toggles and separators into a single keyboard-navigable surface, built on react-aria-components and styled with the quebi design system.

inputs

10 entries
  1. 01FieldAccessible form field primitives built on react-aria-components, styled with the quebi design system. Includes Label, Description, FieldError, plus Field, FieldRow, FieldGroup, Fieldset and Legend wrappers. Field owns the label → control → hint stack every field in the library uses; FieldRow puts fields side by side on one subgrid so their labels, controls and hints share three baselines and a field going invalid cannot push the page down; FieldGroup stacks fields and rows down a form.
  2. 02InputAccessible 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.
  3. 03Input OTPOne-time-password / verification-code input built on the input-otp package, styled with the quebi design system. Each slot is an underlined cell and the active slot's line thickens; supports separators, invalid, and disabled states. The whole control is one input rather than one per slot: click a slot you have already typed to put the caret on it, but a slot ahead of the code is not selectable — clicking there, like typing, moves to the first empty slot, because a half-entered code has no representation with a gap in the middle.
  4. 04Number FieldAccessible 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.
  5. 05Search FieldSearch 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.
  6. 06SliderAccessible 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 thin hairline track, a signal fill and a round signal thumb.
  7. 07Structured InputInput OTP, generalised to any fixed-shape code: an IBAN, a BIC, a nine-digit number, a routing number, a card number or expiry, a sort code, a MAC address, a licence key. The shape is data — groups of position tokens (digit, letter, letter-or-digit, hex, literal) — and the field draws one slot per position in the groups the code is printed in, refuses a character that does not fit its position, upper-cases letters, strips spaces and dashes from a paste, and turns red when a complete value fails its checksum (IBAN mod 97, Luhn, ABA). The value is always the raw characters; formatValue puts the separators back for display.
  8. 08Tag FieldText 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.
  9. 09Text FieldAccessible 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.
  10. 10TextareaMulti-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.

selection

10 entries
  1. 01Async Multiple SelectA tokenizer combobox whose options are loaded from a remote source: an inline search input opens the dropdown on focus or on a click anywhere in the box, typing re-queries the source live, and scrolling loads more. Selected options render as removable chips beside the input. Same control as Multiple Select — the only difference is who supplies the options: a remote load here, a local collection there. Underlined like every quebi field, with pill chips.
  2. 02Async SelectA single-value combobox whose options are loaded from a remote source: an inline search input opens the dropdown on focus, typing re-queries the source live, and scrolling loads more. Picking an option shows its label and closes the menu; a trailing ✕ clears it. Underlined like every quebi field; the list is the shared dropdown surface.
  3. 03CheckboxAccessible checkbox built on react-aria-components, styled with the quebi design system. Supports selected, indeterminate, invalid, and disabled states, plus grouping.
  4. 04Choice BoxSelectable 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.
  5. 05Combo BoxAutocomplete combo box built on react-aria-components, styled with the quebi design system. Pairs an underlined text input with a filterable dropdown of options, with sections. The list opens on focus rather than on the first keystroke; pass menuTrigger="input" or "manual" to opt out.
  6. 06List BoxA 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.
  7. 07Multiple SelectA multi-value picker over a local option list: chosen options are removable chips inline with a text input, typing filters the list, and the results open in a non-modal popover navigated with aria-activedescendant so focus never leaves the field. Clicking anywhere in the box opens it; Backspace on an empty input removes the last chip. Same control as Async Multiple Select — the only difference is who supplies the options. Underlined like every quebi field, with pill chips.
  8. 08RadioAccessible radio and radio group built on react-aria-components, styled with the quebi design system. A rule-edged circle with an ink dot when selected; supports invalid and disabled states, descriptions, and grouping.
  9. 09SelectAn 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.
  10. 10SwitchAccessible toggle switch built on react-aria-components, styled with the quebi design system. Off is a muted pill with a muted thumb; on fills the track with the signal colour and the thumb slides across in on-signal; supports labels, controlled state, and disabled.

date & time

20 entries
  1. 01CalendarAn accessible month calendar built on react-aria-components and @internationalized/date, with a choice of header: one control naming the visible month that opens the Month Picker grid (the default) or chevron steppers via the stepper variant. Rounded cells: the selected day fills with the signal colour and today is underlined — foundational for Range Calendar and Date Picker.
  2. 02Calendar ShellThe time grid every Outlook-style view is drawn from: hour axis and gridlines, an all-day band that folds into "+N more", a now-marker, and overlapping events packed into side-by-side columns. Day View, Week View and Month View are assemblies over it.
  3. 03Calendar TimelineSeveral calendars at once: one row per calendar, resource or room, with time running horizontally over one day or thirty. Overlapping events stack into lanes within a row, so a double-booked room grows rather than hides the clash, and the header drops from hour ticks to a day axis as the span widens.
  4. 04Calendar ToolbarThe chrome above a calendar view: today, a chevron each way, the range you are looking at, and the switch between views. Four slots for the rest — a leading control, chrome, a primary action and an overflow menu. Owns no state — every press is reported.
  5. 05Date FieldAccessible segmented date entry built on react-aria-components, styled with the quebi design system. Each date part is individually editable; the field is boxed and the focused segment fills with the signal colour. Segment padding follows the locale — pass shouldForceLeadingZeros for two-digit day and month (30.06.2026 rather than de-DE's 30.6.2026).
  6. 06Date PickerA 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. The trigger's segments format like DateField's — pass shouldForceLeadingZeros for two-digit day and month.
  7. 07Date Range PickerTwo 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. One shouldForceLeadingZeros pads the day and month of both inputs to two digits.
  8. 08Day ScheduleA 24-hour axis with named time spans in parallel lanes, running down the page or — with orientation="horizontal" — across it, one row per span. Drag a span to move it or either end to resize, snapping to a configurable step with a minimum duration, fully keyboard operable. The start and end times beside each span can be read-only text or typeable TimeFields, rotated into the lane or upright beside it via timeLabelOrientation.
  9. 09Day Schedule MinimapA 36px strip beside a zoomed Day Schedule that replaces its scrollbar: the whole 24-hour day at once, one fixed-thickness line per span, and a rectangle marking the slice on screen. Click or drag it to scroll there. When more lines than fit, the lane grid pans with the hours on screen so each line rides through the strip rather than every line going thinner.
  10. 10Day ViewOne day on a time axis, Outlook-style: hours down the side, an all-day band across the top, overlapping meetings packed side by side, and a marker on the current time. Events carry a ZonedDateTime, so the zone the grid is drawn in is never guessed.
  11. 11Mini MonthThe month at a glance for a dashboard card or a sidebar: a compact day grid with one dot per calendar that has something on a day, a tinted band behind runs of days such as absences, today ringed and the picked day filled. It reads the same CalendarEvent and CalendarSource as Month View, reports the picked day through onDayChange so the page can show that day's agenda wherever it likes, draws one or several months side by side, and describes every marked day to a screen reader in words. Calendar is the grid you pick a date with, Month View the one you read the events on; this one tells you which days have something.
  12. 12Month PickerA grid of one year's months with a year stepper in the header, plus the popover field that wraps it. Month names are locale-formatted through the shared Intl cache, and the value is a CalendarDate on the first of the month. Gregorian unless you pass a calendar, which is how Calendar's own header keeps a thirteen-month year thirteen months long.
  13. 13Month ViewThe month as whole weeks, with events as chips that run across the days they cover and fold into a "+N more" that opens the whole day in a popover. With isEventEditable and onEventChange a chip can be dragged — or arrow-keyed — onto another day, which moves the event by whole days and leaves the time of day alone; the view reports the drop and your state decides. range decides how much of the calendar is on show: one month, several side by side, those same months as a carousel whose neighbours peek in blurred and whose width the reader picks from the toolbar, or a rolling strip of whole weeks anchored on a week rather than on a month. Calendar is the month grid you pick a date with; this is the one you read what is on it.
  14. 14Range CalendarAn accessible date-range calendar built on react-aria-components and @internationalized/date, sharing the Calendar header — the month/year control that swaps the Month Picker into the calendar body by default, chevron steppers via the stepper variant. Rounded cells: the range endpoints fill with the signal colour and the days in-between take the selected tint — foundational for Date Picker and Date Range Picker.
  15. 15Time FieldA segmented time input (hour, minute, second, AM/PM) with keyboard-friendly editing, built on react-aria-components. shouldForceLeadingZeros pads the hour segment to two digits where the locale would not.
  16. 16TimelineWhat happened when, as an ordered list: a changelog, a company's history, a CV, an order's tracking events, a roadmap, an audit log. Vertical or horizontal (scrolling, snapping by proximity), with content on one side, alternating, or opposite its date — two-sided layouts collapse to one side under a container query. Markers are dots, rings, icons, avatars, numbers or any node, in neutral, brand, success, warning, danger and muted tones, and the current item pulses (not under reduced motion). Every date carries its own precision — "2019", "2021-Q3", "2022-03", "2023-W12", "2024-06-04", "2024-06-04T14:30" — so a mixed-precision history is just items with different strings, rendered in <time dateTime> at that precision; ranges read "Mar – Jun 2024" and open ones "2023 – present". A `now` prop (never the clock during render) places a Now marker, dashes the connector from the first span that reaches the future, and anchors relative labels. Sorting (newest first without re-sorting), sticky year/month/day group headers, "Show N more", linked and expandable items, compact density, an empty state, and proportional spacing: a real time axis with ticks, range bars in lanes, and long gaps compressed behind a break.
  17. 17Week PickerA month of days where the whole row is the target: hover lights the week, one click selects it, and the value is always a whole week. Weeks start where the locale says, and the gutter numbers them ISO-8601.
  18. 18Week ViewSeven days on one time axis — or five for the work week — with overlapping meetings packed into columns per day, an all-day band with "+N more" overflow, and the now-marker on today. The week starts where the locale says it does. With isEventEditable and onEventChange an event can be dragged — or arrow-keyed — to another time or another day, snapped to the slot grid; the view reports the drop and your state decides.
  19. 19Year PickerA decade grid for picking a year, plus the popover field that wraps it. Pages by decade with the boundary years dimmed in place, honours minValue/maxValue, and yields a CalendarDate on January 1 so it composes with the rest of Date & time.
  20. 20Year ViewA whole year as twelve month cards, in three variants: heatmap, where a day's fill steps with how much is on it against the year's busiest day (never less than four to a step, so a quiet year is not painted full) under a Fewer/More legend; count, a neutral cell with the exact number; and list, larger cells naming the day's first events in their calendar's colour and folding the rest into the same "+N more" panel Month View opens. It reads the same CalendarEvent and CalendarSource as every other view, or a plain { "YYYY-MM-DD": n } record when the year is an aggregate. Days with something on them and month headings link wherever dayHref / monthHref say, or call onDayAction / onMonthAction; empty days are inert. The year steps from a CalendarToolbar whose heading opens a Year Picker, and weekday initials, the first day of the week and every number follow the locale.

color

08 entries
  1. 01Color AreaTwo-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.
  2. 02Color FieldAccessible 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.
  3. 03Color PickerAccessible color picker wrapper built on react-aria-components, styled with the quebi design system. Includes a sizeable EyeDropper helper for sampling colors.
  4. 04Color SliderSingle-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.
  5. 05Color SwatchAccessible color swatch built on react-aria-components, styled with the quebi design system. Renders a square filled with a color value, with a subtle inset hairline; one size-* class from the caller overrides it at every breakpoint.
  6. 06Color Swatch PickerAccessible color picker built on react-aria-components, styled with the quebi design system. A wrapping grid of selectable swatches; selection is a neutral halo that reads over any swatch colour, focus the library focus ring.
  7. 07Color ThumbThe draggable handle inside a color area or color wheel, and the component you pass as ColorArea's children to replace the default one. Built on react-aria-components and styled with the quebi design system: the picked color is its fill, focus grows it and adds the focus ring.
  8. 08Color WheelCircular 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.

files

02 entries
  1. 01Drop ZoneAccessible drag-and-drop target built on react-aria-components, styled with the quebi design system. A dashed hairline surface whose edge turns a solid rule, on a raised ground, while an item is dragged over it.
  2. 02File TriggerA 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.

feedback

11 entries
  1. 01Activity PulseA rolling twenty-slot strip fed by work that actually happened, for the middle of the progress axis a spinner cannot cover: it looks different when the work stops. Pure component plus a useActivityPulse hook that turns any counter into the buffer, with bar, dot, wave and line shapes.
  2. 02LoaderIndeterminate spinner built on react-aria-components' ProgressBar, styled with the quebi design system. Ring and segmented spin glyphs that inherit the brand teal accent.
  3. 03MeterAccessible 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.
  4. 04NoteInline callout for contextual feedback, styled with the quebi design system. Five intents with optional status icon and heading.
  5. 05Progress BarAccessible 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.
  6. 06Progress CircleCircular 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.
  7. 07Signal BarsA discrete level on an absolute scale — connection quality, confidence, load — drawn in four or five steps with the unfilled ones left in place. Shares its geometry with Activity Pulse so the pair reads as the question that chooses between them: a level, or a rhythm?
  8. 08SkeletonA pulsing placeholder for content that is still loading, styled with the quebi design system. Compose several to mirror the shape of the eventual content.
  9. 09Status DotA state carried on something else — an avatar's corner, a table row, an environment name — in five tones with an optional expanding ring for a live connection. The meaning never lives in the colour: its text ships with it, visible or sr-only.
  10. 10ToastTransient, non-blocking feedback messages, styled with the quebi design system. Self-contained queue with a portalled, aria-live stack and five status intents.
  11. 11Typing IndicatorThree staggered dots that mean a reply is being composed — a narrower claim than "a process is running", and the one indicator in the family with no data feed behind it. Pure CSS, and three static dots under prefers-reduced-motion.

overlays

12 entries
  1. 01Alert DialogThe themed replacement for window.confirm(): a two-answer alertdialog surface, plus useConfirm() — a hook returning Promise<boolean>, so the line that asked the question still reads the answer.
  2. 02Command MenuA ⌘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.
  3. 03Context MenuRight-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.
  4. 04DialogAccessible 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.
  5. 05DrawerAn edge-anchored modal panel you can throw off the screen with a finger: it slides in from any side and drags back out again, built on react-aria's Modal with `motion` for the slide, the drag-to-dismiss gesture and the notch you grab it by, closing on a flick or a quarter-screen pull. It enters and leaves in 0.2s easeInOut, and the scrim's blur tweens with it rather than snapping. Sheet is the same panel without the gesture, and that gesture is the one question that chooses between the two: reach for Drawer where a thumb should be able to dismiss the panel — a bottom sheet on a phone — and for Sheet otherwise, which is the plainer of the two and has the fuller Dialog surface (a close X, `role="alertdialog"`, and Dialog's own header, body and footer).
  6. 06DropdownFoundational 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.
  7. 07MenuTrigger-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.
  8. 08ModalA 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.
  9. 09PopoverFloating 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.
  10. 10Quick ActionsEverything you can do from here, in one place: a trigger — a header Button or a floating round button in the bottom-right corner — opens a panel listing this screen's actions, grouped, and picking one runs it and closes the panel. The panel is a Drawer that comes up from the bottom on a narrow viewport and in from the right on a wide one, and the list is a react-aria Menu built from the library's menu items, with icons, descriptions, shortcut hints, danger intent and link actions. No search field: that is what tells it apart from Command Menu.
  11. 11SheetAn edge-anchored modal panel that slides in from any side of the viewport, built on react-aria's Modal over the Dialog surface — so it carries Dialog's header, body, footer and title, a close X by default, `role="alertdialog"` for a panel that asks rather than shows, and an `overlay` prop for the scrim. Two shapes, as with Modal: a `Sheet` wrapping a trigger and a `SheetContent`, or a `SheetContent` on its own with `isOpen`/`onOpenChange` when a route rather than a trigger decides it is open. It enters and leaves in 200ms ease-in-out, and not at all under prefers-reduced-motion. Drawer is the same panel with a drag-to-dismiss gesture, and that gesture is the one question that chooses between the two: if the user should be able to throw the panel off the screen with a finger — a bottom sheet on a phone — that is a Drawer. Otherwise it is a Sheet, which is the plainer of the two and has the fuller dialog surface.
  12. 12TooltipFloating 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.

display

36 entries
  1. 01AvatarDisplays a user image with a graceful initials fallback, styled with the quebi design system. Circular or square, with a full xs–9xl size scale.
  2. 02BadgeThe quebi tag: a lowercase pill on the raised ground. Nine intents — only success, warning and danger take a colour — plus an optional state dot for live labels.
  3. 03CarouselA 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.
  4. 04Commit GraphA git history list with the branch/merge lane graph drawn down its left edge — the `git log --graph` surface every git client has. One row per commit: the graph column, the short sha in a Snippet so it copies, the subject line, ref badges that tell a branch from a tag from a remote from HEAD, the author, and the date through FormattedDate (never a bare toLocaleString, because the site is prerendered). The lane assignment is a pure exported function, layoutCommitGraph(commits), so merges, branch points, reused lanes, octopus merges, root commits and parents outside the window are unit-testable without rendering anything. It renders the commits it is given and never fetches or re-orders them — git log is already topologically ordered and already paginated, so re-sorting here would scramble the one thing the layout depends on; the next page is asked for through onLoadMore, whose affordance sits under the list because this component is what draws the 'there is more' signal, the edges running off the bottom of the last row. Omit onLoadMore and no pagination chrome is rendered at all. The graph column's appearance is four independent options — lineWeight, nodeSize, nodeShape and laneWidth — so it can sit quiet behind a dense log or be the subject of the screen; a merge is always drawn as the inverse of an ordinary marker and a hair larger, which is the one thing they cannot switch off, because it is what tells a merge apart without relying on colour.
  5. 05Data TableA client-side data table over the TanStack row model: the consumer holds every row and the model does the work — sorting (three-state and multi-column), global and per-column filtering with faceted values, pagination, grouping with aggregates, row expansion and tree data, selection that survives paging, column resize, pinning, reordering and a saved layout, row virtualization, CSV export of what it actually holds, and editing bound through Conform and valibot — one cell at a time, in place and at the size of the row it is in, so opening a cell moves nothing and a number cell has no +/- pair to find room for, where the control is whichever conform-* variant the column names and the keyboard is a data table's (a click, Enter, F2 or typing opens a cell, a picked value commits on its own, Tab commits and moves to the next editable one, Escape restores it). Rows and chrome come from Table Shell and Table Controls; its server-driven twin, Server Table, is assembled from the same two. Which of the two you want is a question about where the rows come from, not how many there are.
  6. 06Description ListA 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.
  7. 07Disclosure GroupAccordion-style group of expandable sections built on react-aria-components, styled with the quebi design system. Each item is a row ruled off by hairlines, its title in the display face; hovered rows take the raised ground. Pass variant="plain" for bare chrome with an eyebrow header and no surface — the shape a collapsible nav group wants.
  8. 08Elapsed TimeHow long this has been going on: a semantic <time> element with a tick on top, formatted through Intl with a locale named in the code. Renders the zero duration until mount rather than reading the clock during render, so a prerendered page and its hydration agree.
  9. 09Energy Class BadgeEU energy-efficiency class chip (A–G) on the official green→red label scale, with a neutral quebi fallback for unknown or legacy values.
  10. 10EyebrowThe Label role outside a form: mono, uppercase, tracked, fg-subtle — kickers above a headline, scene labels, timecodes and counts. Written lowercase in the source; CSS sets the caps.
  11. 11Filter BarThe filter model with no table under it: one pill per field above a list, a gallery or a card grid, collapsing to a counted button and a sheet below md. An inactive pill is an outline chip naming its field; an active one fills and states its own value, so the row is both the control and the summary. Fields that do not fit wait behind a + Filter menu, and a Reset appears once anything is set. It ships the two parts the table family already had — FilterPanel, a Conform form over all five variants (text, number, date, boolean, enum) that commits either through a Clear/Apply pair or live on every change, and FilterChips, the removable active-filter strip — which table-controls re-exports as TableFilterPanel and TableFilterChips. Controlled: it takes the values and reports the next set, and filterRows and facetCounts in lib/data-table are the two lines that turn them into rows.
  12. 12Filter BuilderWhere [Field] [operator] [Value], one row per condition — the only filter surface that reads as a query rather than as a toolbar, and the only one that can express negation or two conditions on one field. A pill bar or a faceted rail draws one control per field, so a field-keyed map says everything they can; a condition list says the rest. Each row is a field Select, an operator Select scoped to that field's variant (enum: is / is not; text: contains / does not contain / is / starts with; number and date: between / not between), and a value button opening the same FilterPanel every other filter surface uses. A condition with no value yet is inert, and the row says so in words instead of looking applied. The rows share grid tracks so the columns line up as a property rather than by hardcoded widths, and each row becomes its own bordered card below 42rem of container width. Controlled, over FilterField and FilterCondition from lib/data-table — the same list ServerTable reports through onQueryChange and queryToSearchParams writes into a URL.
  13. 13Filter RailA persistent faceted sidebar for browse surfaces — a gallery, a catalogue, a search result — where the question is not "narrow this" but "what is in here, and what would each choice leave me". Every facet is on screen at once and every option carries its live count, so nothing has to be opened to be read: an enum is a counted checkbox column with the numbers right-aligned in a tabular-nums column, a bounded number is a two-thumb slider, a date is a From/To pair. It applies on change, with a Clear per group and one for the rail, and an option another filter has zeroed stays listed and disabled at 0 rather than vanishing. Ships FilterRailSummary (the active filters as chips beside the results) and FilterRailLayout, whose container queries are what keep a sidebar-width rail from turning a 700px page into four unreadable cards. Controlled, over the same FilterField / FilterValues model as FilterBar.
  14. 14Formatted DateLocale-aware date and time formatter that renders a semantic <time> element, with absolute and relative styles powered by the Intl APIs. Locale and time zone are pinned, and relative output takes an explicit `now`, so the same date renders the same string on the server and in the browser.
  15. 15Formatted NumberLocale-aware number, currency, and percentage formatting via Intl.NumberFormat. Reads the active locale from react-aria's I18nProvider — mount one, or pass `locale`, so the server and the browser format alike — with formatter helpers for string contexts.
  16. 16Formatted StorageRenders a storage capacity given in GB as a compact label, rolling values of 1024GB and above up to TB.
  17. 17GalleryA 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.
  18. 18Grid ListKeyboard-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.
  19. 19HeadingSemantic h1–h4 heading on the quebi display scale: Outfit at light weights, in ink. Write headlines lowercase.
  20. 20IconTileNon-interactive tinted box holding a single icon — the leading glyph of a feature row, empty state or stat card. Badge's intents on Button's square size scale, so a tile lines up with the icon button beside it.
  21. 21Index ListA numbered list ruled by hairlines under a strong top rule — mono number, Outfit title, caption meta — for work, articles or anything people pick from. Rows with an href shift right and lift to the raised ground on hover.
  22. 22ItemA static list row — leading media (Avatar or IconTile), a title with a secondary line, trailing meta and a trailing action — stacked by ItemGroup with a hairline between rows. The replacement for a card per list item; rows the user navigates or selects are a GridList or ListBox instead.
  23. 23KeyboardKeyboard shortcut hint built on react-aria-components, styled with the quebi design system. Renders muted key glyphs next to menu items, buttons, and tooltips.
  24. 24LeaderboardA ranked list where each row is a react-aria ProgressBar whose value relative to the leader is an ink rule along the row, styled with the quebi design system.
  25. 25ListA list of same-shaped things: Item rows (media, title, secondary line, meta, action) arranged divided or plain, comfortable or compact, flush with the page or inset to a Card's edges — plus ListLink for rows that navigate, ListSection for grouped lists and ListEmpty for the list with nothing in it. Selection, keyboard row navigation and tabular data are GridList, ListBox and DataTable.
  26. 26Meta RowThree or four small term/value pairs in one wrapping row, as in a gallery page's header. A <dl>: terms in fg-subtle, values in fg, caption size, all lowercase.
  27. 27Server TableA controlled, server-driven data table: every sort, filter, search and page change is reported as one DataTableQuery through a single onQueryChange callback, so exactly one round-trip runs per change. Offset, cursor and load-more pagination with an honest pager when the total is too expensive to count; filter popovers that load a column's distinct values from the source (searchable, paged on scroll); select-all-matching with an exclusion set; a deterministic sort tiebreaker so pagination cannot repeat or drop rows; and cell editing where a commit is a mutation — validated in the browser first, applied optimistically, rolled back if the server refuses. It is assembled from Table Shell and Table Controls — the same two halves Data Table is built from — and depends on neither Data Table nor the client row model it would never run.
  28. 28Show MoreA 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.
  29. 29SnippetA single-line inline code surface for shell commands, with a copy-to-clipboard button. Dark surface styled with the quebi design system.
  30. 30StatA metric or KPI without a card around it: label, value, and optionally a delta and a trend. StatGroup lays several in a row with hairlines between them and stacks them on small screens; StatDelta signs and formats the change, picks the arrow from its sign and colours it by whether that direction is good. Rendered as a description list, with numbers formatted through FormattedNumber.
  31. 31TableAccessible 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. Opens with a strong top rule on the page ground by default; the plain variant draws neither, for a table under a heading or inside a Card, and bleed lines its outer columns up with the text around it.
  32. 32Table ControlsEverything that sits around a table and is not the table: a toolbar, a debounced search field, a column chooser, a density menu, removable filter chips with saved presets, a per-column filter panel covering all five variants, a pager that is Pagination's centred column, a bulk-action bar that can mean "every row matching the query", an unsaved-changes bar, a cell editor, and the bulk editor that applies a few fields to several selected rows inside a Modal — both over one schema and any conform-* control. Each is controlled — a value and a callback, no query of its own — which is what lets Data Table and Server Table share them. The forms are real Conform forms over valibot schemas, so an inverted number range is a field error rather than a query that returns nothing — and the page jump, which is PaginationJump, says how many pages there are rather than showing you an empty table.
  33. 33Table ShellThe render half of the table family: hand it a TanStack table instance and the rows to draw, and it produces a quebi Table with multi-level header bands that span their columns as one header cell, per-column filter popovers, column menus for sort/group/pin/hide, selection that survives paging, detail panels as spanning rows, a cell editor in place at the column's own width and the row's own height — sized, aligned and stripped of its steppers by the cell rather than by the caller — with the press and keyboard model that makes it a data table rather than a page of inputs, drag-reorder, row virtualization, a footer of column aggregates, and told-apart loading, empty, no-results and error states. It touches the model not at all — Data Table hands it a computed row model, Server Table hands it the page a server returned — so it is also the way to compose a table of your own when neither mode fits.
  34. 34Tag GroupAccessible group of tags built on react-aria-components, drawn as the quebi tag. Supports selection, removable tags, links, and disabled state.
  35. 35TextTypographic primitives for body copy: a muted paragraph, an inline text link, emphasized strong text, and inline code. Styled with the quebi design system.
  36. 36TreeCollapsible tree view built on react-aria-components, styled with the quebi design system. Supports nesting, expand/collapse chevrons, and single or multi (checkbox) selection.

brand

03 entries
  1. 01LogoThe quebi wordmark or the round q, in the right ink for the theme — ink on Daylight, light on Cinematic — switched by CSS so a prerendered page never flashes the wrong one. Pass srcInk/srcLight to point at your own hosted copies.
  2. 02Low TitleThe headline set low in the frame, the signature of the system: an Outfit display title under a hairline, with one sentence and one action beside it (m) or in a footer row beneath it (xl). Sinks to the floor of a Stage with mt-auto.
  3. 03StageThe opening frame of a page: a tall band lit from the top right (cinematic) or plain paper (gallery), with the quebi mark as a giant decorative watermark and a LowTitle sitting on its floor.

charts

14 entries
  1. 01Area ChartFilled area chart built on the quebi chart wrapper, with an interactive legend, themed tooltip, stacked/percent stacking, and solid (default), gradient or no fills. Requires the recharts package.
  2. 02Bar ChartHigh-level bar chart wrapper over the Chart primitive supporting grouped, stacked, and percent layouts with an ink series palette and an interactive legend. Requires the recharts package.
  3. 03Bar ListA horizontal bar chart for ranked categorical data — each row's flat gray bar encodes its value relative to the largest entry, styled with the quebi design system.
  4. 04ChartThemeable recharts wrapper with styled axes, grid, tooltip, and an interactive legend, using an ink series palette (gray ramp, no hue). Requires the recharts package.
  5. 05Composed ChartBars, lines and areas on one pair of axes, driven by a series list over the quebi Chart wrapper, with an optional second Y axis that appears only when a series asks for it. Requires the recharts package.
  6. 06Line ChartA config-driven line chart on the quebi Chart wrapper, rendering one ink series per config key with styled axes, grid, tooltip, and an interactive legend. Requires the recharts package.
  7. 07Pie ChartPie and donut chart built on the quebi chart wrapper and recharts, with ink-ramp segment shades and an optional centered total label. Requires the recharts package.
  8. 08Radar ChartA polar radar (spider) chart on the quebi Chart wrapper, overlaying one themed polygon per config key across a shared set of axes. Requires the recharts package.
  9. 09Radial Bar ChartBars drawn around a circle on the quebi Chart wrapper — concentric rings, a stacked ring, or a gauge with a fixed angular scale and a value in the middle. Requires the recharts package.
  10. 10Scatter ChartAn X/Y scatter plot on the quebi Chart wrapper: one cloud of points or several named ones, with optional Z-axis bubble sizing and error bars. Requires the recharts package.
  11. 11SparklineAn inline, text-sized trend glyph in one SVG element — line, area or bars, with no axes, no tooltip and no recharts, because it goes in a table cell hundreds at a time. Absolute by default, so two rows can be compared.
  12. 12Sunburst ChartThe hierarchy a Treemap shows as rectangles, drawn as concentric rings on the quebi Chart wrapper, with themed labels and one palette step per branch. Requires the recharts package.
  13. 13TrackerA 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.
  14. 14TreemapHierarchical data as nested rectangles on the quebi Chart wrapper: every top-level branch takes one palette step and its descendants inherit it. Requires the recharts package.

conform

33 entries
  1. 01Conform Async Multiple SelectAsync Multiple Select wired to Conform: derives name and validity from field metadata, mirrors the remote-loaded selection into hidden inputs for submission, and renders inline errors.
  2. 02Conform Async SelectAsync Select wired to Conform: derives name and validity from field metadata, mirrors the remote-loaded selection into a hidden input for submission, and renders inline errors.
  3. 03Conform CalendarThe quebi Calendar wired to Conform. Binds a date field through a hidden input carrying an ISO YYYY-MM-DD string, for a calendar that stays on screen.
  4. 04Conform Calendar TimelineThe quebi Calendar Timeline wired to Conform. Bars are dragged to another time, dropped on another row or pulled by either end, and the whole plan submits as JSON through a hidden input.
  5. 05Conform CheckboxThe quebi Checkbox wired to Conform. Binds a boolean field's name, required, default, and validity from field metadata and renders inline errors.
  6. 06Conform Checkbox GroupThe quebi CheckboxGroup wired to Conform. Binds a string-array field's name, required, default selection, and validity from field metadata and renders inline errors.
  7. 07Conform Choice BoxThe quebi ChoiceBox wired to Conform. Binds a card-style selection through a hidden select, so a GridList with no native form value submits its keys.
  8. 08Conform Color FieldThe quebi ColorField wired to Conform. Binds a hex-string field's name, required, default, and validity from field metadata and renders inline errors.
  9. 09Conform Color PickerThe 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.
  10. 10Conform Color Swatch PickerA multi-select grid of color swatches wired to Conform. A real multi-select listbox, so every swatch reports its own aria-selected and the grid is navigable by keyboard; the selected keys are submitted as one comma-joined value through a registered control, so they repopulate after a failed submit and reset with the form, and an optional react-stately list mirrors them as removable tags.
  11. 11Conform Combo BoxThe quebi ComboBox wired to Conform. Binds a string field's name, required, default selection, and validity from field metadata and renders inline errors.
  12. 12Conform Date FieldThe quebi DateField wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors. Every DateField display prop passes through, shouldForceLeadingZeros (two-digit day and month) included; the wire value is an ISO string either way.
  13. 13Conform Date PickerThe quebi DatePicker wired to Conform. Binds a date field's name, required, default, and validity from field metadata and renders inline errors.
  14. 14Conform Date Range PickerThe quebi DateRangePicker wired to Conform. Binds a start/end field through a hidden fieldset that submits name.start and name.end as ISO dates.
  15. 15Conform Day ScheduleThe quebi Day Schedule wired to Conform. Submits its spans as JSON through a hidden input and derives name, required, and validity from the field metadata.
  16. 16Conform FieldA text field bound to a Conform field — derives name, default, required, and validation errors from the field metadata.
  17. 17Conform File TriggerThe quebi FileTrigger and DropZone wired to Conform. Binds a file field through a hidden file input, so FormData carries real File objects.
  18. 18Conform Input OTPThe quebi InputOTP wired to Conform. Binds a one-time-code field's name, required, default, and validity from field metadata and renders inline errors.
  19. 19Conform Month PickerThe quebi Month Picker wired to Conform. Binds a date field through a hidden input carrying an ISO YYYY-MM-DD string — the first of the chosen month — rather than a bespoke YYYY-MM token.
  20. 20Conform Multiple SelectMultiple Select wired to Conform: derives name, id, default selection, and validity from field metadata, mirrors the selection into hidden inputs for submission, and renders inline errors. Pass the option list as children.
  21. 21Conform Number FieldNumber field wired to a Conform field — binds name, default, required, and errors from field metadata and renders inline validation.
  22. 22Conform Radio GroupThe quebi RadioGroup wired to Conform. Binds a string field's name, required, default selection, and validity from field metadata and renders inline errors.
  23. 23Conform Range CalendarThe quebi RangeCalendar wired to Conform. Binds a start/end field through a hidden fieldset, for a range calendar that stays on screen.
  24. 24Conform Search FieldThe quebi SearchField wired to Conform. Binds a string field's name, required, default, and validity from field metadata — for a query that is part of a submitted form.
  25. 25Conform SelectThe quebi Select wired to Conform. Binds a single-value field's name, default selection, and validity from field metadata and renders inline errors.
  26. 26Conform SliderThe quebi Slider wired to Conform. Puts the field name on the thumb, where react-aria renders the real range input, and supports single and range values.
  27. 27Conform Storage PickerA multi-select chip group of device storage sizes wired to Conform. The selected sizes are submitted as one comma-joined value through a registered control, so they repopulate after a failed submit and reset with the form; an optional react-stately list mirrors them as removable tags.
  28. 28Conform SwitchThe quebi Switch wired to Conform. Binds a boolean field's name, form, and default from field metadata without the defaultChecked/required trap of a blind spread.
  29. 29Conform Tag FieldThe quebi TagField wired to Conform. Binds a tag list's name, form, default tags, and validity from field metadata and renders inline errors.
  30. 30Conform TextareaThe quebi Textarea wired to Conform. Binds a multi-line string field's name, required, default, and validity from field metadata and renders inline errors.
  31. 31Conform Time FieldThe quebi TimeField wired to Conform through a hidden input — react-aria renders no form control for a TimeField, so a bare name submits nothing.
  32. 32Conform Week PickerThe quebi Week Picker wired to Conform. Submits the whole week as two ISO dates, name.start and name.end, through a hidden fieldset — never an ambiguous YYYY-Www token.
  33. 33Conform Year PickerThe quebi Year Picker wired to Conform. Binds a date field through a hidden input carrying an ISO YYYY-MM-DD string — January 1 of the chosen year — so it validates like every other Date & time field.