Design System Supply Chain
ui
Primary component library — Nebutra components, custom primitives, layout, theme bridge, and the shared Motion facade. The product UI import boundary.
300+ primitives
NewBetaStable
Composable Card
Primitives + GSAP, themed by tokens.
@nebutra/ui · Storybook covered
In code
page.tsx
1import { Button, Card, CardContent, CardHeader, CardTitle } from "@nebutra/ui/primitives";
2import { ArrowRight } from "@nebutra/icons";
3
4export function Pricing() {
5 return (
6 <Card>
7 <CardHeader>
8 <CardTitle>Pro plan</CardTitle>
9 </CardHeader>
10 <CardContent>
11 <Button>Get started <ArrowRight className="size-4" /></Button>
12 </CardContent>
13 </Card>
14 );
15}More in nebutra.com
- brandBrand primitives — color definitions, gradient tokens, motion language. Source data; not imported at runtime by apps.
- design-syncGit-only design-token sync — tokens live in the repo as the source of truth, no design-tool round-trip to keep in lock-step.
- design-tokensW3C DTCG $value/$type token files + Style Dictionary 4 pipeline. Output CSS variables and JS modules, edited git-only — no design-tool sync round-trip.
- fontsSelf-hosted open-source fonts: the Chinese body face every app loads, plus a registry of 19 faces that themes and DESIGN.md files can name — no request leaves for a font CDN.
- icons541 Geist icons as tree-shakable TSX components. Single-weight, optical-sized, drop-in for Vercel / v0 visual parity.
- themeCSS-only multi-theme engine — six oklch presets toggled by data-theme attribute. No JavaScript on the critical path.