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

• 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

✨ Features

• ✨ 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: UIRuntimeProvider integrates routing/image primitives (for example next/link and next/image).

⚡ Lightweight by Design

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 gzip
• theme-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.

🎯 How It Compares

| Aspect | prokodo UI | Material-UI (MUI) | Radix UI | Shadcn/ui | | --------------------- | -------------------------------------------- | -------------------------------------- | ---------------------------------------- | ------------------------------------- | | RSC Readiness | ✅ Native App Router fit | ⚠️ Works, but setup/runtime is heavier | ✅ Good fit, mostly low-level primitives | ✅ Good App Router workflow | | Styling Runtime | ✅ No CSS-in-JS runtime | ⚠️ Emotion runtime by default | ✅ 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.

🚀 Getting Started

Install

pnpm add @prokodo/ui
# or
npm install @prokodo/ui

⚠️ ESM-only: This package does not support CommonJS (require()).

Documentation & Examples

| Resource | Link | | --------------------------------- | -------------------------------------------------------------------------- | | 📖 Full docs & API reference | ui.prokodo.com | | 🎨 Interactive component explorer | ui.prokodo.com/storybook | | 📦 npm | npmjs.com/package/@prokodo/ui |

📄 License & Usage

| | | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------- | | 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.