@verdify/ui

Verdify's React component library — accessible, brand-bound primitives that consume @verdify/tokens. Components ship as class strings over the Tailwind v4 token preset; there is no bundled CSS to import.

See the BR-8 @verdify/ui design spec and the BR-7 design-system charter for source-of-truth design decisions.

Scope

All 36 components across 6 families are shipped:

| Family | Count | Components | |---|---|---| | Primitives | 8 | Button, Input, Select, Checkbox, Radio, Switch, Textarea, Label | | Layout | 6 | Card, Divider, Stack, Grid, Container, AspectRatio | | Feedback | 6 | Badge, Alert, Toast, Spinner, Progress, Skeleton | | Navigation | 5 | Tabs, Breadcrumb, Pagination, Stepper, Link | | Data | 5 | Table, Avatar, Stat, Tag, Tooltip | | Verdify molecules | 6 | CredentialCard, StatusBadge, VerifyButton, IssuerAvatar, ClaimRow, TrustScore |

Install

@verdify/ui is published to the public npm registry — no .npmrc, no token required:

pnpm add @verdify/ui
# or: npm i @verdify/ui  /  yarn add @verdify/ui

Setup

Peer dependencies

@verdify/ui declares these as peers — install them in the consumer:

| Peer | Range | |---|---| | react | ^18 \|\| ^19 | | react-dom | ^18 \|\| ^19 | | tailwindcss | ^4 | | @verdify/tokens | ^0.6.0 |

Tailwind v4

Components carry no CSS of their own — they emit Tailwind utility class strings that resolve against the @verdify/tokens preset. Two things are required in the consumer:

1. Import the token preset in your global stylesheet:

   /* app/globals.css */
   @import "tailwindcss";
   @import "@verdify/tokens/preset";

2. Make Tailwind scan @verdify/ui so the utility classes it ships are detected. Add the package to your @source (or content) so the classes are not tree-shaken away:

   @source "../node_modules/@verdify/ui/dist";

Without both steps, components render unstyled (their classes are never generated).

Usage

import { Button } from "@verdify/ui";

export function SignIn() {
  return <Button>Verify</Button>;
}

Every primitive is exported by name from the package root, alongside its props type (for example import { Input, type InputProps } from "@verdify/ui").

Development

This package is developed inside the verdify-brand monorepo with pnpm. The scripts:

pnpm --filter @verdify/ui build       # tsup → ESM + .d.ts (per-file, 'use client' preserved)
pnpm --filter @verdify/ui test        # vitest run (unit + a11y + gate suites)
pnpm --filter @verdify/ui verify      # build → lint:gates → test (the full gate)
pnpm --filter @verdify/ui storybook   # Storybook dev server on :6006

Components are authored via the build-on-brand skill (.claude/skills/build-on-brand/), which generates a brand-bound component from its 8-section brand-book spec, test-first, so it passes the four standing library gates:

| Gate | Enforces | |---|---| | token-binding | Intent/semantic tier utilities only — no neutral/brand/mist/obsidian, no raw hex, no v3 bare-var brackets | | brand ≠ state | A status variant key is never bound to an action-* utility, and vice versa | | motion-theatre | The deliberate-motion reveal is reserved for the verified badge; emphasis easing is forbidden elsewhere | | axe + keyboard | Per-component jest-axe clean plus the full keyboard model |

Versioning

Independent semver from verdify-brand, published to the public npm registry under the @verdify scope.

License

UNLICENSED (proprietary). All rights reserved.

Copy-in (shadcn registry)

Prefer to own the source instead of importing the package? Pull components into your repo with the stock shadcn CLI. Tokens stay an npm dependency (the single source of truth); only component source is copied.

1. Add the registry to your components.json (pin the version to match your @verdify/tokens):

   {
     "registries": {
       "@verdify": "https://unpkg.com/@verdify/[email protected]/registry/{name}.json"
     }
   }

2. Apply the base once (installs @verdify/tokens, wires the Tailwind preset, adds cn):

   npx shadcn add @verdify/init

3. Add components (transitive deps resolve automatically):

   npx shadcn add @verdify/credential-card

The token-aware cn lands at @/lib/cn (it does not overwrite a generic @/lib/utils). Brand/token updates propagate via npm update @verdify/tokens; component source is yours to edit. See specs/2026-06-02-copy-in-component-registry-design.md.