Installation

Du brauchst ein Projekt mit eingerichtetem shadcn/ui. Wenn du bei null anfängst:

npx shadcn@latest init

1. Registry hinzufügen

Trag goodui im Feld registries von components.json ein:

{
  "registries": {
    "@goodui": "https://goodui.dev/r/{name}.json"
  }
}

2. Blöcke installieren

npx shadcn@latest add @goodui/resource-timeline

Die CLI installiert den Block, die shadcn-Komponenten, die er nutzt, und alle nötigen npm-Pakete. Du kannst die Registry auch vom Terminal aus durchsuchen:

npx shadcn@latest search @goodui
npx shadcn@latest view @goodui/kpi-cards

Ohne components.json anzufassen

Jeder kostenlose Block lässt sich auch über seine vollständige URL installieren:

npx shadcn@latest add https://goodui.dev/r/resource-timeline.json

Einen Block nutzen

import ResourceTimeline from "@/components/goodui/resource-timeline"

export default function Page() {
  return <ResourceTimeline />
}

Blöcke sind Client-Komponenten mit ihren Demo-Daten am Anfang der Datei. Tausch diese Daten gegen deine aus.