flow-ui component kit

Twenty shadcn-style components, imported from @zerotal/flow-ui and themed by token-backed CSS variables. They're Flow components underneath — server actions, two-way binds and client expressions all pass through. Own the code: bun zt flow:add button copies one into your app.

Buttons

<Button>Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="destructive">Delete</Button>
<Button variant="outline">Outline</Button>
<Button variant="ghost">Ghost</Button>
<Button size="sm">Small</Button>
<Button size="lg">Large</Button>
<Button disabled>Disabled</Button>

Badges

DefaultSecondaryDestructiveOutline

<Badge>Default</Badge>
<Badge variant="secondary">Secondary</Badge>
<Badge variant="destructive">Overdue</Badge>
<Badge variant="outline">Draft</Badge>

Card

Project Aurora

A surface container with header, content and footer.

Cards compose from parts, so you lay out exactly what you need.

<Card>
  <CardHeader>
    <CardTitle>Project Aurora</CardTitle>
    <CardDescription>A surface container…</CardDescription>
  </CardHeader>
  <CardContent>…</CardContent>
  <CardFooter><Button size="sm">View</Button></CardFooter>
</Card>

Form controls

Message

Accept the terms

<Label>Email</Label>
<Input value={this.email} placeholder="you@example.com" />
<Textarea placeholder="Say something…" />
<Switch bind={this.notifications} />
<Checkbox bind={this.terms} />

Select

<Select
  bind={this.country}
  placeholder="Choose a country"
  options={countries}   // { label, value }[]
/>

Radio group

Starter — $9/mo

Pro — $29/mo

Team — $99/mo

<RadioGroup bind={this.plan} options={plans} />

Avatar, separator & skeleton

ATGH

<Avatar src={url} alt="Ada" />
<Avatar fallback="AT" />
<Separator />
<Skeleton class="h-4 w-3/4" />

Alerts

Heads up

Your trial ends in three days.

Payment failed

We couldn't charge your card.

<Alert>
  <AlertTitle>Heads up</AlertTitle>
  <AlertDescription>Your trial ends in three days.</AlertDescription>
</Alert>
<Alert variant="destructive" dismissible>…</Alert>

Tabs

Manage your account details and preferences.

Change your password and security settings.

Invite teammates and manage roles.

<Tabs items={[
  { label: "Account",  content: <p>…</p> },
  { label: "Password", content: <p>…</p> },
  { label: "Team",     content: <p>…</p> },
]} />

Overlays & menu

<Button onClick={() => this.dialogOpen = true}>Open dialog</Button>
<Button onClick={() => this.sheetOpen = true}>Open sheet</Button>

<DropdownMenu label="Menu">
  <DropdownMenuLabel>My account</DropdownMenuLabel>
  <DropdownMenuItem>Profile</DropdownMenuItem>
  <DropdownMenuSeparator />
  <DropdownMenuItem>Sign out</DropdownMenuItem>
</DropdownMenu>

<Tooltip content="Copy link"><Button size="icon">🔗</Button></Tooltip>

<Dialog show={this.dialogOpen} title="Invite a teammate">…</Dialog>
<Sheet show={this.sheetOpen} side="right" title="Filters">…</Sheet>

Table

Name	Role	Status
Ada Lovelace	Owner	Active
Alan Turing	Admin	Active
Grace Hopper	Editor	Invited

<Table
  columns={[
    { key: "name", label: "Name" },
    { key: "role", label: "Role" },
    { key: "status", label: "Status",
      render: (row) => <Badge>{row.status}</Badge> },
  ]}
  rows={this.members}
  rowKey="name"
  hover
/>