Files

T

hanzo-dev 2cc85a6e51 ui: the 44px floor, the drag, and the tree-shake are real on web too (8.0.28)

Every critical/high the review confirmed, fixed at the one place that owns it.

touch() and drag() — backends/gui/gesture.ts. gui classes `hitSlop` as a
native-only prop and DROPS it on web (nativeOnlyProps -> skipProps ->
getSplitStyles), so twelve components claimed a 44px target and shipped 16-36px
in a browser and in Tauri. touch(size, min, axis) now returns hitSlop on native
and data-touch-x/-y on web, backed by transparent ::after rules in theme.css —
no layout shift, no padding hack. The same split fixes the ScrollArea thumb,
which was wired only to the react-native responder system and could not be
dragged at all on web; both it and ResizableHandle now go through one drag().

Button renders on gui's Button.FRAME, not the compound. The compound is
Frame.styleable(), i.e. an HOC: styled() over it does not compile style props to
classes, so `asChild` emitted backgroundcolor="var(--background)" on the child
and styled nothing. asChild is now expressed through gui's `render`, which
merges — Button-as-link comes out as a real styled <a>, asserted in a test.
`fontSize` moved off the frame onto the Text host, so it stops leaking a
font-size="" attribute and `sm` is finally smaller than `default`.

ModelSelector is on style props. It shipped nine Tailwind class strings with no
rules behind them and sized its panel from --radix-popover-trigger-width, a
variable nothing defines now that Radix is gone; the panel measures the trigger.
theme.css drops its Tailwind v4 `@theme inline` block, cn() drops tailwind-merge.

The component surface MOUNTS in CI: render.test.tsx puts all 24 components under
GuiProvider in jsdom and asserts their data-slot markers, the absence of leaked
style attributes, and the touch attribute. 181 -> 185.

Also: DropdownMenu's spec form regained its minWidth=200 default; the product
menu item matches the backend row at 32px and meets the tap floor; ./components
was a byte-identical alias of "." and is gone; react-native-web is declared as an
optional peer (13 packages in the closure import it and nothing declared it);
postbuild stops stamping 'use client' on DATA modules, which is what kept
createGui() from ever running in a prerender; hz-elevation-4 has a rule.

Measured on the packed tarball: `import { Button } from '@hanzo/ui'` costs
77,447 bytes against @hanzo/gui's own Button at 74,651 — 0 chunks, 0 neighbour
components. 0 shadcn, 0 @radix, 0 @apply, 0 Tailwind utilities; 79/79 exports
targets resolve.

Co-authored-by: Hanzo Dev <dev@hanzo.ai>

2026-07-28 18:53:32 -07:00

5.0 KiB

Raw Permalink Blame History

@hanzo/ui

The React component library for AI applications. Accessible, customizable primitives for React, Vue, Svelte, and React Native — built on shadcn/ui, extended with AI, 3D, animation, and commerce components, and a single typed import surface.

Features

161+ components — 3x the surface of upstream shadcn/ui
Multi-framework — React, Vue, Svelte, React Native
Two themes — Default & New York variants
AI components — chat, assistants, agent UI, playground
3D components — interactive 3D elements
Animations — advanced motion components
Page builder — visual drag-and-drop assembly, export to TSX
Blocks — 24+ production-ready full-page templates
White-label — fork and rebrand by domain (Zoo, Lux, …)
Accessible — built on Radix UI primitives
Customizable — Tailwind CSS 4 (OKLCH), fully typed TypeScript

Quick start

Install

pnpm add @hanzo/ui
# or
npm install @hanzo/ui

Use

import { Button, Card, Input } from '@hanzo/ui'

export function App() {
  return (
    <Card>
      <Card.Header>
        <Card.Title>Welcome</Card.Title>
      </Card.Header>
      <Card.Content>
        <Input placeholder="Enter text..." />
      </Card.Content>
      <Card.Footer>
        <Button>Submit</Button>
      </Card.Footer>
    </Card>
  )
}

One import surface (v8)

@hanzo/ui@8 is the single entry point for the whole kit. Each capability is a thin subpath that re-exports its home package — code lives once, and each home is an optional peer, pulled only when you use its subpath.

Import	What you get
`@hanzo/ui` · `/product`	charts, metrics, PageHeader, StatusTag, EmptyState, ComboBox, SlideOver, Toast
`@hanzo/ui/data`	RecordsView, DataTable, typed field editors
`@hanzo/ui/canvas`	ProjectCanvas, ServiceNode, DeployTimeline, EnvSwitcher
`@hanzo/ui/dashboard`	landing + deploy-pipeline + overview kit
`@hanzo/ui/usage`	UsageMeter, UsageProviderCard, UsageDashboard
`@hanzo/ui/gitops`	GitopsAppList, tree, diff, sync/rollback, HealthBadge

Also available as granular imports:

import { Button, Card } from '@hanzo/ui/components'
import * as Dialog from '@hanzo/ui/primitives/dialog'
import { cn } from '@hanzo/ui/lib/utils'

CLI

Add components straight into your project — the CLI copies source you own:

npx @hanzo/ui add button
npx @hanzo/ui add card dialog

Install from 35+ external registries too:

npx @hanzo/ui add @aceternity/spotlight

Packages

The workspace publishes a family of scoped packages under @hanzo/*:

Package	Purpose
`@hanzo/ui`	Core library + the v8 import surface (161+ components)
`@hanzo/react`	React primitives
`@hanzo/data`	Records, data tables, typed field editors
`@hanzo/canvas`	Service/deploy canvas components
`@hanzo/dashboard`	Dashboard + deploy-pipeline kit
`@hanzo/commerce` · `@hanzo/checkout` · `@hanzo/shop`	Commerce components
`@hanzo/agent-ui`	AI agent UI components
`@hanzo/brand` · `@hanzo/tokens`	Branding system & design tokens
`@hanzo/event`	Telemetry client (`POST /v1/event`)

Development

git clone https://github.com/hanzoai/ui.git
cd ui
pnpm install

pnpm build:registry   # generate the component registry FIRST
pnpm dev              # docs site + registry (http://localhost:3003)

The registry generates the JSON the CLI reads, so build:registry must run before build. Keep the Default and New York themes in sync when adding components. Use pnpm — not npm or yarn.

pnpm build            # build the docs app
pnpm lint             # lint all workspaces
pnpm typecheck        # type check
pnpm test             # unit tests
pnpm test:e2e         # Playwright E2E

Documentation

Full docs, live previews, and the component catalog: ui.hanzo.ai.

Contributing

See the contributing guide.

License

MIT — see LICENSE.md.

Hanzo — the Open AI Cloud

Open source · every language · on-chain settlement. hanzo.ai · docs.hanzo.ai

SDKs in every language — Python (flagship) · TypeScript · Go · Rust · C++ · Swift · Kotlin · umbrella

5.0 KiB Raw Permalink Blame History