Zum Hauptinhalt springen
Version: latest

Schnellstart

Nach der Installation von @prokodo/ui kannst du sofort Komponenten verwenden. Jede Komponente ist ein separater Einstiegspunkt — importiere nur das, was du brauchst.

Tipp

Stelle sicher, dass @prokodo/ui/theme-tokens.css in deinem Root-Layout importiert ist (siehe Installation). Alle folgenden Beispiele setzen dies voraus.

Erste Komponente — Button

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

export default function Page() {
  return (
    <main>
      <Button variant="primary" size="md">
        Jetzt starten
      </Button>
    </main>
  )
}

Do's and don'ts

✅ Do

  • Importiere jede Komponente direkt über ihren Entry Point für maximale Performance:
import { Button } from "@prokodo/ui/button"
import { Card } from "@prokodo/ui/card"
  • Nutze wenn möglich komponentenspezifische Styles:
import "@prokodo/ui/button.css"
import "@prokodo/ui/card.css"

Jede CSS-Datei ist eigenständig: Sie enthält alle Styles interner Sub-Komponenten über CSS @import. Dein Bundler (webpack, Turbopack) dedupliziert automatisch — gemeinsame Abhängigkeiten wie headline.css werden nur einmal im Output enthalten, auch wenn sie von mehreren Komponenten-CSS-Dateien importiert werden.

  • Nutze priority für kritische Above-the-fold-Elemente (insbesondere Hero-Bilder), damit sie eager geladen/hydratisiert werden.

❌ Don't

  • Vermeide breitere oder unnötige Imports, wenn du nur wenige Komponenten brauchst.
  • Vermeide zusätzliche Styles, die auf der Seite nicht benötigt werden.

Formular-Beispiel

app/contact/page.tsx
import { Form } from "@prokodo/ui/form"
import { Input } from "@prokodo/ui/input"
import "@prokodo/ui/form.css"

export default function ContactPage() {
  return (
    <Form onSubmit={(e, data) => console.log(data)} submitLabel="Senden">
      <Input name="name" label="Vollständiger Name" required />
      <Input name="email" label="E-Mail" type="email" required />
    </Form>
  )
}
Info

Hier wird nur form.css benötigt — es enthält bereits die Styles für Input, Select, Checkbox und alle anderen Sub-Komponenten, die Form intern nutzt.

Nächste Schritte

Letztes Update am