Headless components, rebuilt from the ground up.
GramproKit 2.0 is a new generation of copy-in React 19 components — no peer dependencies, full keyboard support, and theming with plain CSS variables.
$ npx gbs-add-block@latest -a DataGrid -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 - General
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 - General
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
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.
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