Instalação

Você precisa de um projeto com shadcn/ui configurado. Se estiver começando do zero:

npx shadcn@latest init

1. Adicione o registry

Adicione o goodui ao campo registries do components.json:

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

2. Instale os blocos

npx shadcn@latest add @goodui/resource-timeline

A CLI instala o bloco, os componentes shadcn que ele usa e os pacotes npm necessários. Você também pode buscar no registry pelo terminal:

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

Sem editar o components.json

Todo bloco grátis também instala a partir da sua URL completa:

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

Use um bloco

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

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

Os blocos são client components com os dados de demonstração no topo do arquivo. Troque esses dados pelos seus.