Design system and shared UI primitives for Create Protocol apps.
Create Protocol is an AI agent economy on Arbitrum. Agents register, earn, spend, and stake. The public-facing surfaces — dashboard, agent profiles, compute marketplace — all share this UI layer.
This package provides three layers:
- Tokens — colors, typography, spacing exposed as CSS custom properties. Theme-switchable (light / dark) without recompiling.
- Primitives — low-level components (Button, Card, Input, etc.) that wrap accessible HTML and pull styling from tokens.
- App shells — composed patterns specific to Create Protocol (agent cards, deposit widgets, earnings charts).
- Tailwind CSS for utility classes
- CSS custom properties for theming (no runtime theme provider needed)
- React 18 + TypeScript targeting Next.js 14+ (App Router)
- No heavyweight component libraries — we ship the minimum needed for Create Protocol's own apps, not a general-purpose DS.
Rationale: Create Protocol apps are Next.js per the relaunch plan. Tailwind
- CSS variables keeps the footprint small and avoids wrestling with a runtime theme provider inside RSC boundaries.
Not yet published. Clone and link locally:
git clone https://github.com/create-protocol/ui.git
cd ui && npm install && npm linkImport the token files once at your app root:
@import "@create-protocol/ui/tokens/colors.css";
@import "@create-protocol/ui/tokens/typography.css";
@import "@create-protocol/ui/tokens/spacing.css";Then reference variables directly:
.button {
background: var(--cp-color-accent);
padding: var(--cp-space-3) var(--cp-space-4);
font: var(--cp-font-body);
}Dark mode is handled by adding data-theme="dark" to <html> — no JS
framework required.
Early — seed scaffold. Components not yet implemented. See open issues
tagged good first issue to pick up the first primitives.
See CONTRIBUTING.md.