@frank/ui (0.1.0)
Installation
@frank:registry=npm install @frank/ui@0.1.0"@frank/ui": "0.1.0"About this package
@frank/ui
The Blockwise shadcn components and design tokens, ported unchanged (W016). React, react-dom and next are peerDependencies.
Public API
Everything lives in src/index.ts: the shadcn primitives (Button, Dialog,
Select, Sidebar, Table, Chart, ...), the product compositions (MetricCard,
Sparkline, SafeImage, CreativeViewer, NoticeBar, MobileSection, CtaLink), the
motion vocabulary, cn, smoothLinePath, useIsMobile, and the theme tokens
at @frank/ui/theme/tailwind.css.
Config
No runtime config: nothing reads process.env. The theme file bridges
--ui-* onto the product's own tokens (--bg, --ink, --surface,
--surface-subtle, --accent, --accent-tint, --muted, --line, status
colours, the --r-* radius roles and the --side-* sidebar tokens), so a
product must declare those for the bridge to resolve.
Using the CSS
Tailwind v4 loads WITHOUT preflight (the .tw setup from Blockwise
AGENTS.md is load-bearing and unchanged): components must sit under a .tw
wrapper, which gets the scoped preflight; portaled overlays ([data-slot])
are covered too. In the product's Tailwind entry, after its own legacy sheets:
@import "./globals.css" layer(legacy);
@import "@frank/ui/theme/tailwind.css";
Example
import { Button, Card } from "@frank/ui";
<div className="tw"><Card>...<Button asChild><Link href="/x">Go</Link></Button></Card></div>
Dependencies
Dependencies
| ID | Version |
|---|---|
| @types/canvas-confetti | ^1.9.0 |
| canvas-confetti | ^1.9.4 |
| class-variance-authority | ^0.7.1 |
| clsx | ^2.1.1 |
| cmdk | ^1.1.1 |
| lucide-react | ^0.468.0 |
| motion | ^12.42.2 |
| next-themes | ^0.4.6 |
| radix-ui | ^1.6.7 |
| recharts | ^3.8.0 |
| sonner | ^2.0.7 |
| tailwind-merge | ^3.6.0 |
Development dependencies
| ID | Version |
|---|---|
| @types/react | ^19.0.12 |
| @types/react-dom | ^19.0.4 |
| next | 16.3.3 |
| react | ^19.2.6 |
| react-dom | ^19.2.6 |
| tsx | ^4.21.0 |
Peer dependencies
| ID | Version |
|---|---|
| next | >=15 |
| react | ^19 |
| react-dom | ^19 |