@airgen/ui

React components for Airtable extensions. Pairs with airgen.

• Pre-release (0.x). APIs may change between minor versions.
• Requires React and React DOM 17 or newer.
• No @airtable/blocks runtime dependency.
• Precompiled CSS. No Tailwind setup required.

Setup

Import @airgen/ui/styles.css once in your app. Import components from @airgen/ui. See the minimal app.

Until published, build and install a tarball:

# From packages/ui
npm run build && npm pack
# From your extension
npm install /path/to/airgen-ui-<version>.tgz

Components and examples

Each link opens TypeScript source with imports and usage examples.

| Component | Purpose | | ------------------------------------------------------ | ------------------------------------------------------------- | | Button | Actions, variants, and icons. | | ButtonToggle | Boolean toggles or cycling choices. | | Input | Controlled or uncontrolled text input. | | InlineEdit | Text, currency, async saves, and custom editors. | | Label | Visible labels for form controls. | | Select | Single/multiple selection, search, groups, and colored pills. | | Toggle | Labeled switches. | | Badge | Colored choice labels. | | PillOption | Option labels with pill styling. | | Text | Typography and control-aligned text. | | Icon | Sized Lucide icons. | | Caret | Decorative direction indicators. | | CaretButton | Expand/collapse buttons. | | Circle | Color indicators. | | Divide | Horizontal or vertical separators. | | Spinner | Loading indicators. | | LoadingOverlay | Delayed loading overlays. | | Popover | Anchored panels. | | Tooltip | Hover/focus descriptions. | | Dialog | Modal dialogs. | | Sheet | Side panels. | | Portal | Content mounted outside its parent. | | Table and primitives | Headers, rows, cells, footers, and resizing. | | RecordTable | Typed record columns and expandable rows. | | RecordCellValue | Airtable-aware cell rendering. | | NestedRecordTable | Nested tables for hydrated links. | | GroupTable | Collapsible groups, summaries, and totals-only views. | | ToastProvider / useToast | Imperative notifications. | | SheetProvider / useSheet | Imperative side panels. | | ThemeProvider | Light, dark, or system themes. | | Helpers | Colors, pill sizes, and fuzzy search. |

Table examples use sample records. Replace them with your useRecords or groupRecords output.

Styling

• Components follow the system color scheme by default.
• Use ThemeProvider to override it, including portals.
• Package utilities use the ag- prefix. Consumer classes keep their own names.
• Colors accept Airtable names or CSS hex values.
• Components style their own surfaces. Your app owns the page background.
• For custom Tailwind dark styles, see the optional config.

Development

Run from this directory:

npm test
npm run build
npm run check:react17
npm run check:examples

• npm run gen:colors regenerates the Airtable palette.
• Examples are type-checked against the current source API.
• See the changelog and roadmap.