RESOURCES

From the canvas to your codebase.

Real source files, reusable hooks, and a shared contract for people and agents.

Repository

UI primitives

src/components/ui.tsx

Buttons, form controls, messages, cards, native details, progress, and modal dialogs.

Persistent preferences

src/hooks/useLocalStorage.ts

Validated local state, graceful storage errors, and explicit success feedback.

Token utilities

src/lib/tokens.ts

Alias resolution, DTCG export, CSS custom properties, and WCAG contrast calculations.

Use a starter component

import { Button, TextField } from "./components/ui";

export function WorkspaceForm() {
  return (
    <form onSubmit={handleSubmit}>
      <TextField label="Workspace name" name="name" required />
      <Button type="submit">Create workspace</Button>
    </form>
  );
}

Use the source directly

The component source lives in this repository and uses shared CSS in src/styles.css. A separately versioned package and installable registry will follow the UX Prototype import. There is no published npm package yet.

Before integration

Implement the example submission handler, include the shared styles, and confirm the label, focus, error, and responsive behavior in your application context.