prokodo UI
prokodo UI is a fully typed, production-ready React component library built from the ground up for Next.js App Router. It ships 52 components across 6 categories, all styled with a design-token-driven CSS system and zero runtime style injection.
What makes it different
AIC Pattern — server, client, lazy
Every interactive component ships in three variants:
| Import | Environment | When to use |
|---|---|---|
@prokodo/ui/{name} | Server Component (RSC) | Default — works in App Router layouts and pages |
@prokodo/ui/{name}/client | Client Component | Inside "use client" boundaries |
@prokodo/ui/{name}/lazy | Lazy (dynamic) | Heavy components loaded below the fold |
See AIC Pattern for the full explanation.
TypeScript first
Every component exposes a typed {Name}Props interface exported from its model file:
import type { ButtonDefaultProps } from "@prokodo/ui/button"
Design tokens
All spacing, color, typography, and motion values are exported as CSS custom properties under the --pk-* namespace. Override them once in your global stylesheet to apply your brand across every component.
See Design Tokens for the reference.
Package info
| Detail | Value |
|---|---|
| Package | @prokodo/ui |
| Registry | npm |
| Required peer | react >= 18, next >= 14 |
| Bundle format | ESM, tree-shakable per component |
| Styling | CSS Modules + design tokens (no CSS-in-JS) |
How It Compares
| Aspect | prokodo UI | MUI | Radix | Shadcn/ui |
|---|---|---|---|---|
| RSC Readiness | ✅ Native App Router fit | ⚠️ Usable, but heavier setup | ✅ Good fit, mostly primitives | ✅ Good App Router workflow |
| Styling Runtime | ✅ No CSS-in-JS runtime | ⚠️ Emotion runtime by default | ✅ Unstyled (no runtime styling) | ✅ Static styles in app code |
| Baseline CSS | ~34 KB measured baseline | Project-dependent | Project-dependent | Project-dependent |
| Tree-shaking | ✅ Strong by design | ✅ Good with import discipline | ✅ Strong with granular packages | ✅ Strong (copy only what is used) |
| Best fit | Next.js/Remix SSR + Core Web Vitals | Material Design-heavy teams | Teams building custom primitives | Teams preferring copy-paste ownership |
Recommended default: Pick prokodo UI for performance-first Next.js/Remix projects.
Use alternatives only if needed: Material Design lock-in, fully headless primitives, or per-app source ownership.