innate-ui

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

Requirements

You can install innate-ui with:

pnpm add innate-ui

innate-ui has peer dependencies on retend, retend-utils, and retend-web. Install them alongside it, if not already installed in your project.

Setup

Import the stylesheet at your application entry point, usually in your index.tsx, main.tsx, or App.tsx file:

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>
  );
}

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. | | 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. |

License

MIT