@dev-api-platform/ui

Shared, themeable, props-driven React UI for the dev-API portfolio (goldprice · exchangerate · publictrades · electricity). Seeded from goldprice's proven dark-terminal design, neutralized so every vertical re-skins by overriding one accent — never by forking a component (AD-7).

STATUS: DRAFT — pending dev-api-platform ADR-0001. Supersedes the old dev-api-ui kit (donor is goldprice's design, not the retired "Console" look).

What's in it

• Token vocabulary — src/styles/tokens.css (CSS vars, --accent* not --gold*, no Tailwind) + src/styles/components.css (structural class set).
• design-tokens.ts — JS mirror for Satori / React Email (no CSS-var access).
• Components — Dialog (Radix), Skeleton, RateLimitInline, DashboardShell, DashboardSidebar, and the account cards ApiKeyCard, UsageCard, PlanCard, NoOrgView, ProvisioningView — all presentational.
• Email primitives (./email) — Layout, Heading, Button, MutedText, UnsubscribeFooter (React Email, light theme, brand via props).

Consume it

Ships source — compile it through your bundler:

// next.config.ts
transpilePackages: ["@dev-api-platform/ui"]

/* app/globals.css — tokens first, then components, then your accent override */
@import "@dev-api-platform/ui/styles/tokens.css";
@import "@dev-api-platform/ui/styles/components.css";
:root { --accent: #f5a623; --accent-soft: #ffd27a; --accent-deep: #b97b14; --accent-rgb: 245, 166, 35; }

import { DashboardShell, ApiKeyCard, Skeleton } from "@dev-api-platform/ui";
import { Button, Layout } from "@dev-api-platform/ui/email";

The product owns the data layer (hooks/fetch/Supabase) and passes data + callbacks + copy as props. No product values live in this package (AD-9).

The contract

Token names, prop shapes, the rename map, and the distribution gate live in CONVERGENCE.md — the shared anchor with the exchangerate lane. Change a token or prop shape → update that file.

Develop

npm run typecheck   # tsc --noEmit
npm test            # vitest — purity guards (no --gold / goldprice / gp- / tailwind leaks)

Visual QA gallery: examples/gallery (a minimal Next app that renders every component under both the gold-parity and a green theme override).