@prokodo/ui

prokodo UI (Beta)

Empowering Digital Innovation

Modern, customizable UI components built with React and TypeScript — developed by prokodo for high-performance web interfaces.

---

✨ Features

• ✨ Adaptive-Island Components (AIC): One import per component. Renders as zero-JS RSC and self-hydrates only when interaction is detected & the element is visible. (Currently in Beta for Button)
• ⚡️ Modern stack: Vite, React 19, TypeScript, and SCSS Modules
• 💅 Design consistency: Theming via design tokens and BEM-style naming
• 🧩 Component-rich: 35+ reusable UI components
• 🧪 Reliable: Fully tested with Jest and Testing Library
• 📚 Storybook: Explore the components at ui.prokodo.com
• 📦 Ready-to-install: Distributed via npm for non-production use under the BUSL-1.1 license
• 🧱 Optimized for SSR: Works great with Next.js and React Server Components

---

🚀 Getting Started

1. Install the package

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

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

2. Use a component

Next.js (RSC)

import { Headline, type HeadlineProps } from "@prokodo/ui/button"

export default function Layout() {
  return <Headline>Click me</Headline>
}

Next.js (Client optimized)

import { HeadlineClient, type HeadlineProps } from "@prokodo/ui/button"

export default function Layout() {
  return <HeadlineClient>Click me</HeadlineClient>
}

Next.js (Client non-optimized, means RSC only)

"use client"
import { Headline as UIHeadline, type HeadlineProps } from "@prokodo/ui/button"
import { type FC, memo } from "react"

export const Headline: FC<HeadlineProps> = memo(props => <UIHeadline {...props} />)

📦 Available Components

Compatibility of the components

✅ = Available as RSC (<[ComponentName] />) and for client exportable (<[ComponentName]Client />) ❌ = Not available - = Currently only for RSC optimized

If RSC and client have ✅-symbol means available as RSC (<[ComponentName] />) & extra client export (<[ComponentName]Client />)

Komponente	🧠 RSC-Compatible (app/layout.tsx)	💡 SSR-Compatible ("use client")
Accordion	❌	✅
Animated	❌	✅
AnimatedText	❌	✅
Avatar	❌	✅
BaseLink	❌	✅
Button	❌	✅
Calendly	❌	✅
Card	❌	✅
Carousel	❌	✅
Chip	❌	✅
DatePicker	❌	✅
Dialog	❌	✅
Drawer	❌	✅
Form	❌	✅
FormResponse	✅	–
Grid	✅	–
GridRow	✅	–
Headline	✅	✅
Icon	✅	–
Image	✅	–
ImageText	❌	✅
Input	❌	✅
InputOTP	❌	✅
Label	✅	–
Link	❌	✅
List	✅	–
Loading	✅	–
Lottie	❌	✅
Map	❌	✅
PostItem	✅	–
PostTeaser	✅	–
PostWidget	✅	–
PostWidgetCarousel	❌	✅
Quote	✅	–
RichText	✅	–
Select	❌	✅
Skeleton	✅	–
Slider	❌	✅
Stepper	❌	✅
Switch	❌	✅
Table	✅	–
Teaser	❌	✅

🎯 Next steps

• [ ] Make all components RSC-compatible and client-optimized
• [ ] Add more ✨ fancy styling, UI polish and properties
• [ ] Improve accessibility to meet WCAG 2.2 AAA standards
• [ ] Detailed Documentation about the components

📘 Documentation

Notice: Currently are not all components in Storybook available

Explore all components and examples in the official Storybook:

👉 https://ui.prokodo.com

🛠 Local Development

pnpm i
pnpm dev          # Start Vite dev server
pnpm storybook    # Start Storybook locally

To build:

pnpm run build
pnpm run storybook:build

📄 License

This library is published under the Business Source License 1.1 (BUSL-1.1).

© 2025 prokodo — All rights reserved. Visit us at prokodo.com.