@clarittyai/app-ui

Apple-grade, token-only React component kit for Claritty full-app pages — the companion to @clarittyai/widget-toolkit (which owns widgets). This package owns Dashboards, lists, forms, and settings.

The point of this kit: make ugly inexpressible. The design discipline is baked into the component API, so a generated app (or a developer on the seed) composes beautiful parts instead of hand-rolling raw <div>s:

• 8pt spacing rhythm and one radius language (rounded-lg controls, rounded-2xl cards)
• Token-only color — every color is a semantic token (accent, foreground, card, muted, border, …). No hardcoded hex, no saturated palette. Re-theme by changing the 3 brand CSS vars, never the kit.
• Dark-mode parity and ≥44px tap targets
• One primary action per view — PageHeader/EmptyState take a single action slot
• Mandatory states — Skeleton, EmptyState, ErrorState (high-contrast + retry)

Install

npm i @clarittyai/app-ui

Add it to your Tailwind content so its classes aren't purged:

content: [
  './index.html',
  './src/**/*.{ts,tsx}',
  './node_modules/@clarittyai/app-ui/dist/**/*.js',
  './node_modules/@clarittyai/widget-toolkit/dist/**/*.js',
],

Your app must define the semantic tokens (the seed's index.css :root + theme.css do).

Use

import {
  AppShell, AppHeader, PageHeader, Section, Card, Stat,
  Button, List, Row, Badge, EmptyState, ErrorState, SkeletonCards,
} from '@clarittyai/app-ui';

<AppShell header={<AppHeader brand={<Brand />} />}>
  <PageHeader
    title="Reading queue"
    description="Everything you saved to read, in one calm queue."
    action={<Button icon={<Plus className="h-4 w-4" />}>Add link</Button>}
  />
  <Section title="Up next">
    {loading ? <SkeletonCards /> : items.length === 0
      ? <EmptyState title="Nothing yet" action={<Button>Add your first link</Button>} />
      : <List>{items.map((i) => <Row key={i.id} title={i.title} subtitle={i.source} />)}</List>}
  </Section>
</AppShell>

Components

AppShell, AppHeader, PageHeader, Section, Card (+ CardHeader/Title/Description/Content), Stat, Button, Field (+ Input/Textarea/Select), List + Row, Toolbar, Badge, EmptyState, ErrorState, Skeleton + SkeletonCards.

Build

npm run build   # tsc → dist/