Modern, customizable UI components built with React and TypeScript — developed by prokodo for high-performance web interfaces.
🇺🇸 Need help shipping production Next.js (App Router) fast?
prokodo — Next.js Agency → click here🇩🇪 Sie suchen eine Next.js Agentur (App Router, SEO, Performance)?
prokodo — Next.js Agentur → hier klicken
Further reading: Next.js guides (SEO · Performance · Migration)
-
SEO (Metadata API, hreflang):
https://www.prokodo.com/en/guide/next-js/next-js-seo/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=seo_en -
Performance (LCP/INP/CLS, Streaming SSR):
https://www.prokodo.com/en/guide/next-js/next-js-performance/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=perf_en -
Migration Playbook (RACI, Canary, Rollback):
https://www.prokodo.com/en/guide/next-js/next-js-migration/?utm_source=github&utm_medium=readme_examples&utm_campaign=ui&utm_content=migration_en
- ✨ AIC architecture: Components are split into server, client, and lazy variants so JS is loaded only where interaction is needed.
- ⚡️ Modern stack: Vite, React 19, TypeScript, and SCSS Modules.
- 💅 Design consistency: Token-driven styling via CSS custom properties (
--pk-*). - 🧩 Component-rich: 52 production-ready components across multiple categories.
- 🧪 Reliable: Tested with Jest, Testing Library, and Cypress component tests.
- 📚 Storybook: Explore live component examples at ui.prokodo.com/storybook.
- 📦 Ready to install: Published on npm under Apache-2.0 for production use.
- 🚀 Built for Next.js 13-16: App Router and React Server Component workflows out of the box.
- ⚡ Turbopack friendly: Works without custom bundler configuration.
- 🔗 Framework adapters:
UIRuntimeProviderintegrates routing/image primitives (for examplenext/linkandnext/image).
prokodo UI is designed to stay lean in SSR-first architectures by combining split component entry points with static CSS output.
- Component-level entry points for server, client, and lazy usage
- No CSS-in-JS runtime injection in the default styling model
- Tree-shakable imports with per-component CSS/JS separation
- RSC-friendly usage model for Next.js App Router workflows
Measured production baseline (current build):
theme.css: ~34 KB gziptheme-tokens.css: ~3 KB gzip- Additional component CSS/JS depends on what your app imports
Real-world payload varies by route composition, import discipline, and rendering strategy.
| Aspect | prokodo UI | Material-UI (MUI) | Radix UI | Shadcn/ui |
|---|---|---|---|---|
| RSC Readiness | ✅ Native App Router fit | ✅ Good fit, mostly low-level primitives | ✅ Good App Router workflow | |
| Styling Runtime | ✅ No CSS-in-JS runtime | ✅ No styling runtime (unstyled) | ✅ Static styles in app code | |
| Baseline CSS | ~34 KB (measured production baseline) | Project-dependent | Project-dependent | Project-dependent |
| Tree-shaking | ✅ Strong by design (component-level CSS/JS) | ✅ Good with strict import discipline | ✅ Strong with granular packages | ✅ Strong (copy only what you use) |
| Maintenance Model | ✅ Versioned npm library | Versioned npm library | Versioned npm library | Source ownership in each app |
| Best Fit | Next.js/Remix SSR + Core Web Vitals | Teams standardized on Material Design | Teams building custom primitives | Teams preferring copy-paste ownership |
Recommendation:
- Choose prokodo UI when performance, SSR clarity, and a ready-to-use component system are priorities.
- Consider alternatives only when your project explicitly needs their model (Material Design lock-in, fully headless primitives, or copy-paste ownership).
Data note: prokodo-ui bundle size (34 KB) is measured from production build. Other library sizes depend heavily on import patterns, tree-shaking, and individual project configuration.
pnpm add @prokodo/ui
# or
npm install @prokodo/ui
⚠️ ESM-only: This package does not support CommonJS (require()).
| Resource | Link |
|---|---|
| 📖 Full docs & API reference | ui.prokodo.com |
| 🎨 Interactive component explorer | ui.prokodo.com/storybook |
| 📦 npm | npmjs.com/package/@prokodo/ui |
| License | Apache-2.0 — free for production use, modification, and redistribution |
| Trademark | "prokodo" and the prokodo logo are trademarks of prokodo (Christian Salat). See TRADEMARKS.md |
| Brand theme | Signature visuals (logo, illustrations, special glow patterns) may appear in docs/Storybook but are not distributed in the npm package |
| Contributing | Sign-off required (DCO 1.1). See CONTRIBUTING.md |
| Security | Responsible disclosure via GitHub Advisories. See SECURITY.md |
This library is published under the Apache License 2.0.
© 2025 prokodo. See NOTICE and TRADEMARKS.md.
Visit us at prokodo.com.