Instalación

Necesitas un proyecto con shadcn/ui configurado. Si empiezas desde cero:

npx shadcn@latest init

1. Añade el registry

Añade goodui al campo registries de components.json:

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

2. Instala bloques

npx shadcn@latest add @goodui/resource-timeline

La CLI instala el bloque, los componentes de shadcn que usa y los paquetes npm que haga falta. También puedes buscar en el registry desde la terminal:

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

Sin editar components.json

Todo bloque gratuito también se instala desde su URL completa:

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

Usa un bloque

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

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

Los bloques son componentes cliente con sus datos de demostración al principio del archivo. Cambia esos datos por los tuyos.