prokodo UI
prokodo UI ist eine vollständig typisierte, produktionsreife React‑Komponentenbibliothek, die von Grund auf für den Next.js App Router entwickelt wurde. Sie umfasst 52 Komponenten in 6 Kategorien, alle mit einem design‑token‑basierten CSS-System gestaltet — ganz ohne JavaScript‑Stilinjektion zur Laufzeit.
Was sie besonders macht
AIC-Muster — server, client, lazy
Jede interaktive Komponente wird in drei Varianten ausgeliefert:
| Import | Umgebung | Empfohlene Verwendung |
|---|---|---|
@prokodo/ui/{name} | Server Component (RSC) | Standard — funktioniert in App Router Layouts und Pages |
@prokodo/ui/{name}/client | Client Component | Innerhalb von "use client"-Grenzen |
@prokodo/ui/{name}/lazy | Lazy (dynamischer Import) | Schwere Komponenten, die außerhalb des sichtbaren Bereichs geladen werden |
Weitere Informationen: AIC-Muster.
TypeScript-First
Jede Komponente exportiert ein typisiertes {Name}Props-Interface aus ihrer Modelldatei:
import type { ButtonDefaultProps } from "@prokodo/ui/button"
Design-Tokens
Alle Abstands-, Farb-, Typografie- und Animationswerte werden als CSS-Kustomeigenschaften unter dem Namespace --pk-* exportiert. Überschreibe sie einmalig in deinem globalen Stylesheet, um deine Marke auf alle Komponenten anzuwenden.
Weitere Informationen: Design-Tokens.
Paketinformationen
| Detail | Wert |
|---|---|
| Paket | @prokodo/ui |
| Registry | npm |
| Peer-Abhängigkeit | react >= 18, next >= 14 |
| Bundle-Format | ESM, tree-shakable pro Komponente |
| Styling | CSS Modules + Design Tokens (kein CSS-in-JS) |
Im Vergleich
| Aspekt | prokodo UI | MUI | Radix | Shadcn/ui |
|---|---|---|---|---|
| RSC-Bereitschaft | ✅ Nativer App Router Fit | ⚠️ Nutzbar, aber aufwändigeres Setup | ✅ Guter Fit, meist Primitives | ✅ Guter App Router Workflow |
| Styling-Laufzeit | ✅ Kein CSS-in-JS zur Laufzeit | ⚠️ Emotion-Runtime standardmäßig | ✅ Ungestylt (kein Laufzeit-Styling) | ✅ Statische Stile im App-Code |
| Basis-CSS | ~34 KB gemessene Baseline | Projektabhängig | Projektabhängig | Projektabhängig |
| Tree-Shaking | ✅ Von Grund auf stark | ✅ Gut mit Import-Disziplin | ✅ Stark mit granularen Paketen | ✅ Stark (nur Genutztes wird kopiert) |
| Ideal für | Next.js/Remix SSR + Core Web Vitals | Teams mit Material-Design-Fokus | Teams, die eigene Primitives bauen | Teams, die Copy-Paste-Ownership bevorzugen |
Empfohlener Standard: Wähle prokodo UI für performance-orientierte Next.js/Remix-Projekte.
Alternativen nur bei Bedarf: Material-Design-Bindung, vollständig headless Primitives oder projekteigene Quellcode-Ownership.