An agent-native UI runtime for React.
A React component library you copy into your project instead of installing: 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.
Also known as Grampro Kit and GBS Kit.
npx @grampro/kit addReact Native · beta
Also for React Native: iOS and Android
Since 2.9.0, GramproKit has a React Native edition: 33 components with the same names and props as the web library, drawn natively for iOS and Android, plus mobile patterns such as AppBar, BottomNavigation, Fab and BottomSheet. Copy-in source, zero dependencies, runs in Expo Go.
npx @grampro/kit@native add Button- Does GramproKit support React Native?
- Yes. Since version 2.9.0, GramproKit (@grampro/kit) has a React Native edition, in beta, for iOS and Android: 33 components with the same names and props as the web library, including mobile-only ones such as AppBar, BottomNavigation, Fab, SegmentedControl, ListItem, BottomSheet and SearchBar. Install a component with npx @grampro/kit@native add Button; in a React Native or Expo project, npx @grampro/kit add detects the platform by itself. Documentation: https://kit.gramproindia.com/native/docs.
- Does the React Native edition work with Expo and Expo Go?
- Yes. The components are pure JavaScript with no native modules and no dependencies, so they run in Expo Go, in Expo development builds and in bare React Native apps. They need React Native 0.83 or later, React 19.2 and the New Architecture.
- Is the React Native API the same as the web API?
- Mostly. Component names, props and the core logic (date maths, number parsing, validation, stores) are shared code, not ports. The differences: style and styles replace className and classNames, events are onPress rather than onClick, and pickers and menus open as a bottom sheet on phones. Each React Native component page lists how it differs from the web.
- Is the React Native edition ready for production?
- It is in beta. The components are tested on Android devices and the APIs may still change between releases, so pin the version you install. The web library is stable.
- Can AI coding agents build with the React Native components?
- Yes. npx @grampro/kit@native skill installs the gbs-native agent skill for Claude Code, Codex and Antigravity, and the bundled MCP server's tools accept platform: native to list components, read their props, fetch examples and check written code.
Components
Components
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 - General
Updating components
Edit the components you copy in, then update them safely: add never overwrites an edited component, and doctor shows what you changed, what the new version changes, and which call sites an update would break.
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, DateRangePicker and DateTimePicker — a text field people can type a date or a date and time 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 - General
Agent Surface
Wrap a page in <AgentSurface> and every form field and data grid in it describes itself to a browser agent — what it holds, what it accepts — and can be operated through its own validator, with no tool definitions to write.
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 - 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 - 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
MCP server
Serve the component catalogue to Claude Code, Codex and Cursor over MCP (Model Context Protocol), and build a screen from a Figma design: read the frame, install the components, write the JSX, check it against the real API.
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.
- 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