Package Exports

@prokodo/ui
@prokodo/ui/accordion
@prokodo/ui/animated
@prokodo/ui/animatedText
@prokodo/ui/avatar
@prokodo/ui/base-link
@prokodo/ui/button
@prokodo/ui/calendly
@prokodo/ui/card
@prokodo/ui/carousel
@prokodo/ui/chip
@prokodo/ui/datePicker
@prokodo/ui/dialog
@prokodo/ui/drawer
@prokodo/ui/form
@prokodo/ui/grid
@prokodo/ui/headline
@prokodo/ui/icon
@prokodo/ui/image
@prokodo/ui/image-text
@prokodo/ui/input
@prokodo/ui/inputOTP
@prokodo/ui/label
@prokodo/ui/link
@prokodo/ui/list
@prokodo/ui/loading
@prokodo/ui/lottie
@prokodo/ui/map
@prokodo/ui/post-item
@prokodo/ui/post-teaser
@prokodo/ui/post-widget
@prokodo/ui/post-widget-carousel
@prokodo/ui/quote
@prokodo/ui/rich-text
@prokodo/ui/select
@prokodo/ui/skeleton
@prokodo/ui/slider
@prokodo/ui/stepper
@prokodo/ui/switch
@prokodo/ui/table
@prokodo/ui/teaser
@prokodo/ui/theme.css

Readme

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