Documentation

Getting started

Install Innate UI, load its shared styles, and compose your first Retend-native control.

Installation

Install Innate UI alongside the Retend packages used by your application.

shell

pnpm add innate-ui

Setup

Import the shared stylesheet once at your application entry point.

import "innate-ui/styles.css";

Your first component

Innate UI is built around Retend composition. Field provides shared labeling and validation semantics, while the input remains a normal controlled component.

tsx

import { Cell } from "retend";

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

interface ProfileFormProps {
  onSave: (email: string) => void;
}

export function ProfileForm(props: ProfileFormProps) {
  const { onSave } = props;
  const email = Cell.source("");

  const updateEmail = (value: string) => {
    email.set(value);
  };
  const saveProfile = () => {
    onSave(email.get());
  };

  return (
    <form onSubmit--prevent={saveProfile}>
      <Field id="email-field">
        <Field.Label>Email</Field.Label>
        <Input type="email" value={email} onChange={updateEmail} />
        <Field.Description>We'll only use this for your account.</Field.Description>
      </Field>
      <Button type="submit">Save changes</Button>
    </form>
  );
}

Next steps

ComponentsBrowse the full component catalog with live examples and source.FieldLearn how labels, descriptions, errors, and control ids are wired together.Component showcaseOpen the dense visual test surface used while developing the library.