An agent-native UI runtime for React.
Copy-in components you own: React 19, no peer dependencies, keyboard support throughout, theming with plain CSS variables. Each component also publishes a contract describing what it can do — so a person, a script or an agent all reach it through the same validated boundary.
npx gbs-add-block@latest -i -betaComponents
Available in the beta
More components move to 2.0 as they are rebuilt. Until then, the 1.x docs stay available.
- General
Theming
One set of --gbs-* variables on :root themes every component at once, with per-component and per-section overrides when you need them.
Read docs - Inputs
Button
Primary, secondary, outline, ghost, danger and link buttons in three sizes, with a loading state that manages itself.
Read docs - Data
Data Grid
A virtualized data grid for React 19 that stays fast with 100,000+ rows, in client or server mode.
Read docs - Inputs
Input
Input and OtpInput — a text field with label, hint, error and adornments, plus a one-time-code field phones can fill from an SMS.
Read docs - Inputs
Textarea
A multi-line text field with label, hint, error and character counter that can grow with its text.
Read docs - Inputs
Checkbox
Checkbox and CheckboxGroup — the native checkbox, restyled, with labels, hints, errors, a mixed state and select all.
Read docs - Inputs
Combobox
Select and MultiSelect — searchable comboboxes for one or many values, with options in the browser or from an API.
Read docs - Inputs
Date Picker
DatePicker and DateRangePicker — a text field people can type into, plus a calendar that works from the keyboard.
Read docs - Inputs
File Uploader
Drop, browse or paste files, validate them, and upload in chunks that can pause, resume and retry.
Read docs - Navigation
Breadcrumb
Shows where a page sits in your app, collapses long trails, works with your router's links and can publish structured data.
Read docs - Navigation
Tabs
Accessible tabs in underline, pill or segmented styles, horizontal or vertical, with panels that can keep their state.
Read docs - Overlays
Dialog
Alert, confirm and prompt dialogs you call from any event handler and await — no open state to manage.
Read docs - Overlays
Modal
Forms, details and drawers above the page, built on the native dialog element with focus and dismiss handled for you.
Read docs - Feedback
Spinner
A loading indicator on its own, beside a label or covering content, with a delay and minimum time so it never flickers.
Read docs - Feedback
Toaster
Short notifications you mount once and call from anywhere — no hook, context or provider.
Read docs - Overlays
Menu
A menu of commands with arrow keys, typeahead, checkbox and radio items and submenus, following the WAI-ARIA menu button pattern.
Read docs - Overlays
Tooltip
A short label on hover or keyboard focus, with a delay, Escape to dismiss, and the accessibility rules a tooltip has to follow.
Read docs - Overlays
Popover
A panel anchored to the control that opens it, in the top layer, with light dismiss, Escape and focus returned to the trigger.
Read docs - Display
Card
A surface that groups related content, with header, body and footer, plus Stat for a single figure and its trend.
Read docs - Feedback
Skeleton
Placeholders in the shape of the content that is loading, plus an Empty state for when there is nothing to show.
Read docs - Inputs
Switch
A setting that takes effect as it is flipped, on a native checkbox with role=switch, with optimistic saving that puts itself back when the save fails.
Read docs - Inputs
RadioGroup
One choice out of a few, on native radios: one tab stop, arrow keys between the choices, and a card variant for choices that need explaining.
Read docs - Inputs
NumberInput
A numeric field that reads and writes numbers the way the locale does, with a spinner, steps that do not drift, and a wheel that cannot edit it by accident.
Read docs - Feedback
Alert
A message that stays in the page — neither interrupting like a dialog nor leaving like a toast.
Read docs - Display
Badge and Tag
Short labels: a status, a category, a count that stops at 99+, and chips the user can take off.
Read docs - Display
Avatar
A person as a picture or their initials, on a colour derived from their name, with presence dots and overlapping groups.
Read docs - Feedback
Progress
A bar or a ring for work with a known end, where an unknown length is a different thing from zero.
Read docs - Display
Accordion
Sections that open and close, on native details and summary, with the group behaviour the platform cannot express.
Read docs - General
Agent skill
Teach a coding agent this library's real API — imports, prop names and the traps — so it stops guessing and inventing props.
Read docs
You own the code
Each block is copied into your project with one command. There are no peer dependencies other than React.
One shared theme
Set the --gbs-* CSS variables on :root and every component follows, with per-component overrides when you need them.
Keyboard first
Every component documents its keyboard rules, and pickers render in the browser's top layer so they are never clipped.
Readable by software
Each component publishes a contract: its operations, its fields, its limits. A request is checked against that contract before anything runs — the same path whether it came from a form or a sentence.
Migration
Coming from 1.x?
The 2.0 components are new implementations, not drop-in upgrades. Each page ends with a table that maps the previous API to the new one.
Beta: these components are experimental and may change in ways that break your code.
- ButtonMigrating from the Previous Custom Button
- Data GridMigrating from the Previous Grid
- InputMigrating from the Previous Text Box
- TextareaMigrating from the Previous Text Area
- CheckboxMigrating from the Previous Check Box
- ComboboxMigrating from the Previous Select / MultiSelect
- Date PickerMigrating from the Previous DatePicker
- File UploaderMigrating from the Previous Uploader
- DialogMigrating from the Previous Dialog Box
- ModalMigrating from the Previous Modal
- ToasterMigrating from the Previous Toast