Lenso UI

Start · First component

Quick start

Build a small form from public component subpaths while keeping product behavior in your application.

Compose the first form

Import each component from its public subpath. Your application still owns copy, layout, validation, and submission.

import "@lenso/tokens/styles.css";
import "@lenso/ui/styles.css";
import { Button } from "@lenso/ui/button";
import { TextField } from "@lenso/ui/text-field";

export function ProjectForm() {
  return (
    <form>
      <TextField.Root>
        <TextField.Label>Project name</TextField.Label>
        <TextField.Control placeholder="Untitled" />
      </TextField.Root>
      <Button type="submit">Create project</Button>
    </form>
  );
}

What the library owns

  • Foundation components provide reusable behavior, accessibility, and visual states.
  • Semantic tokens keep color, type, spacing, and interaction feedback coherent.
  • Use ThemeScope when a subtree needs an explicit Light or Dark boundary.

What your application owns

  • Keep product data, navigation, persistence, permissions, and interface copy outside the library.
  • Browse a component page before composing its compound parts.
  • Choose registry source only when you need to change component structure.
Lenso UI