Skip to main content
Version: latest

Installation

Requirements

Ready in under 2 minutes

Before installing, make sure your project meets these requirements:

  • Node.js ≥ 18
  • React ≥ 18
  • Next.js ≥ 14 (App Router)

1. Install the package

pnpm add @prokodo/ui

2. Add global styles

prokodo UI offers two CSS strategies. Pick the one that fits your performance requirements:

Recommended: Tokens + per-component CSS (best performance)

Import only the design tokens in your root layout and load component CSS alongside each component:

app/layout.tsx
import "@prokodo/ui/theme-tokens.css"
components/MyFeature.tsx
import { Card } from "@prokodo/ui/card"
import "@prokodo/ui/card.css"

theme-tokens.css contains only the CSS custom properties (--pk-* design tokens) — colours, spacing, typography, radius, shadow, and motion variables. No component styles.

Per-component CSS (e.g. card.css) is fully self-contained: it automatically includes styles for all internal sub-components via CSS @import. For example, importing @prokodo/ui/post-item.css also provides the styles for Avatar, Card, Headline, and every other dependency PostItem uses internally — no need to know the dependency tree.

This approach sends only the CSS your page actually needs which has a significant impact on Core Web Vitals (LCP, FCP).

Alternative: Global bundle (convenience)

For prototyping or when bundle size is not a concern, import the full CSS bundle:

app/layout.tsx
import "@prokodo/ui/theme.css"

This includes all design tokens and all component styles (~288 KB). You can skip the per-component .css imports since everything is already included.

Performance

theme.css loads styles for all ~55 components regardless of what you use. For production sites, prefer theme-tokens.css + per-component CSS to minimise render-blocking CSS and improve PageSpeed scores.

3. Configure next.config

No special configuration is required for most setups. If you use transpilePackages, you do not need to add @prokodo/ui — it ships pre-compiled ESM.

4. Verify

Create a quick test page:

app/test/page.tsx
import { Button } from "@prokodo/ui/button"
import "@prokodo/ui/button.css"

export default function TestPage() {
  return <Button>It works!</Button>
}

Open http://localhost:3000/test — you should see a styled button.

Troubleshooting

Cannot find module '@prokodo/ui/…' — Ensure node_modules/@prokodo/ui exists. Run your package manager install again.

Styles not loading — Confirm that either @prokodo/ui/theme.css or @prokodo/ui/theme-tokens.css is imported in the root layout. If you use theme-tokens.css, also ensure you import the matching component CSS (e.g. @prokodo/ui/button.css) alongside each component.

Partial styles / missing sub-component styles — You only need to import the top-level component's CSS. Each .css file automatically includes its internal dependencies. For example, @prokodo/ui/form.css includes styles for Input, Select, Checkbox, and all other sub-components Form uses.

Icon renders as empty — In development, icons load from the local node_modules asset path. In production, they load from jsDelivr CDN. See the Icon page.

Last updated on