Zum Hauptinhalt springen
Version: latest

Installation

Voraussetzungen

Startklar in unter 2 Minuten

Stelle vor der Installation sicher, dass dein Projekt diese Anforderungen erfüllt:

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

1. Paket installieren

pnpm add @prokodo/ui

2. Globale Stile einbinden

prokodo UI bietet zwei CSS-Strategien. Wähle die, die zu deinen Performance-Anforderungen passt:

Empfohlen: Tokens + komponentenspezifisches CSS (beste Performance)

Importiere nur die Design-Tokens in deinem Root-Layout und lade Komponenten-CSS zusammen mit jeder Komponente:

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 enthält nur die CSS Custom Properties (--pk-* Design-Tokens) — Farben, Abstände, Typografie, Radien, Schatten und Motion-Variablen. Keine Komponenten-Styles.

Komponentenspezifisches CSS (z. B. card.css) ist vollständig eigenständig: Es enthält automatisch die Styles aller internen Sub-Komponenten über CSS @import. Zum Beispiel liefert @prokodo/ui/post-item.css auch die Styles für Avatar, Card, Headline und jede weitere Abhängigkeit, die PostItem intern nutzt — du musst den Dependency-Tree nicht kennen.

Dieser Ansatz sendet nur das CSS, das deine Seite tatsächlich braucht, was sich erheblich auf die Core Web Vitals (LCP, FCP) auswirkt.

Alternative: Globales Bundle (Komfort)

Für Prototyping oder wenn die Bundle-Größe keine Rolle spielt, importiere das vollständige CSS-Bundle:

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

Dies enthält alle Design-Tokens und alle Komponenten-Styles (~288 KB). Du kannst die komponentenspezifischen .css-Imports überspringen, da alles bereits enthalten ist.

Performance

theme.css lädt Styles für alle ~55 Komponenten, unabhängig davon, welche du nutzt. Für Produktions-Websites solltest du theme-tokens.css + komponentenspezifisches CSS bevorzugen, um render-blockierendes CSS zu minimieren und die PageSpeed-Werte zu verbessern.

3. next.config konfigurieren

Für die meisten Setups ist keine besondere Konfiguration erforderlich. Wenn du transpilePackages verwendest, musst du @prokodo/ui nicht hinzufügen — es wird als vorcompiliertes ESM ausgeliefert.

4. Überprüfen

Erstelle eine schnelle Testseite:

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

export default function TestPage() {
  return <Button>Es funktioniert!</Button>
}

Öffne http://localhost:3000/test — du solltest einen gestylten Button sehen.

Fehlerbehebung

Cannot find module '@prokodo/ui/…' — Stelle sicher, dass node_modules/@prokodo/ui existiert. Führe erneut den Paketmanager-Install aus.

Stile werden nicht geladen — Bestätige, dass entweder @prokodo/ui/theme.css oder @prokodo/ui/theme-tokens.css im Root-Layout importiert ist. Wenn du theme-tokens.css nutzt, stelle zusätzlich sicher, dass du das passende Komponenten-CSS (z. B. @prokodo/ui/button.css) zusammen mit jeder Komponente importierst.

Fehlende Sub-Komponenten-Styles — Du musst nur das CSS der übergeordneten Komponente importieren. Jede .css-Datei enthält automatisch ihre internen Abhängigkeiten. Zum Beispiel enthält @prokodo/ui/form.css die Styles für Input, Select, Checkbox und alle anderen Sub-Komponenten, die Form intern nutzt.

Icon wird leer dargestellt — In der Entwicklung werden Icons aus dem lokalen node_modules-Asset-Pfad geladen. In der Produktion von jsDelivr CDN. Weitere Informationen auf der Icon-Seite.

Letztes Update am