innate-ui

A UI component library for Retend. Components are built on Retend Cells and native browser primitives, and styled with modern CSS.

Requirements

innate-ui has peer dependencies on retend, retend-utils, and retend-web. Install them alongside it:

pnpm add innate-ui retend retend-utils retend-web

Setup

Import the stylesheet at your application entry point:

import "innate-ui/styles.css";

Wrap your application in InnateProvider. It provides shared services used by some components, such as the toast viewport and tooltip timing coordination:

import { InnateProvider } from "innate-ui";

export function App() {
  return <InnateProvider>{/* ... */}</InnateProvider>;
}

Usage

Value props accept JSX.ValueOrCell<T>, so Retend Cells can be passed directly where a plain value is expected:

import { Cell } from "retend";
import { Field, Input } from "innate-ui";

export function ProfileForm() {
  const email = Cell.source("");

  return (
    <Field id="email-field">
      <Field.Label>Email</Field.Label>
      <Input type="email" value={email} onChange={(value) => email.set(value)} />
      <Field.Description>We'll only use this for your account.</Field.Description>
    </Field>
  );
}

Component families such as Field, Dialog, and Menu are composed from scoped sub-components (<Field.Label>, <Dialog.Content>, <Menu.Item>) that share internal state through Retend scopes.

Overlay and disclosure triggers resolve the single element passed to them instead of rendering a wrapper element, so custom trigger components do not need to forward props or refs.

Popover, Dropdown, and Tooltip use the HTML Popover API and CSS anchor positioning where supported. Dialog uses the native <dialog> element and top layer.

Components

Inputs

| Component | Description | | --- | --- | | Button | pressable control for actions, with visual variants and states. | | Input | wrapper over native input types with controlled value semantics. | | Textarea | controlled multi-line text input that integrates with Field. | | Checkbox | binary form control for one or more independent choices. | | Toggle | two-state button for switching an option on or off. | | Radio | group of mutually exclusive choices with arrow-key navigation. | | Select | single or multiple selection control with a popup listbox. | | Combobox | editable input paired with a filtered list of selectable options. | | Slider | single or range value input with pointer, touch, and keyboard interaction. | | PinInput | multi-cell code input with paste, OTP, and keyboard navigation support. | | DatePicker | controlled date field with a calendar popover. | | TimePicker | styled native time input. | | FileUpload | file picker and dropzone with type, size, and count constraints. | | Field | Shared label, description, error, id, and invalid-state wiring for form controls. |

Navigation

| Component | Description | | --- | --- | | Accordion | vertically stacked set of sections that can be expanded and collapsed. | | Carousel | scroller for moving through a collection of items. | | Pagination | Controls for moving between numbered pages of content. | | SegmentedTabs | segmented tab group with arrow-key navigation and switchable panels. | | Stepper | progress sequence with completed, current, upcoming, and error states. | | TreeView | hierarchical collection with expansion, selection, and keyboard navigation. |

Overlays

| Component | Description | | --- | --- | | Popover | anchored floating surface for contextual content. | | Dropdown | trigger-driven menu surface for contextual actions. | | Dialog | modal or non-modal window for focused tasks and decisions. | | Sheet | modal panel that enters from an edge and supports gestures and snap points. | | Menu | collection of actions, radio items, and checkable items. | | Tooltip | short description shown on hover or keyboard focus. |

Feedback

| Component | Description | | --- | --- | | Loader | progress indicator for indeterminate work. | | Toast | Transient, non-blocking feedback delivered through the Innate provider. |

Data display

| Component | Description | | --- | --- | | Badge | compact label for status, metadata, or categorization. | | Avatar | image and fallback primitive for representing a person or entity. | | Table | data table with typed column definitions. |

Utilities

| Component | Description | | --- | --- | | FadeScroll | scroll container that communicates overflow with edge fades. |

Development

This is a pnpm workspace with three packages:

• packages/innate-ui — the publishable component library.
• packages/innate-docs — the documentation app, which depends on innate-ui through workspace:* and imports only package exports.
• packages/innate-tests — the test suite, which also depends on innate-ui through workspace:* and tests only public behavior.

pnpm install
pnpm dev          # build the library and start the docs app
pnpm lint         # oxlint + motion/icon checks + package-boundary check
pnpm typecheck    # typecheck all packages
pnpm test         # build the library and run the browser test suite
pnpm build        # build the library and the docs site

pnpm lint includes a package-boundary check that rejects docs or tests importing packages/innate-ui/source, the old @/ui alias, or any innate-ui/* subpath not declared in the library's exports map.

Every push to main publishes an installable innate-ui preview through pkg.pr.new after the normal library build. Pull requests that change the library or its build inputs publish previews too, with pkg.pr.new posting the install command on the pull request. Repository administrators must install the pkg.pr.new GitHub App once before the preview workflow can publish.

License

MIT