Installation

You need a project with shadcn/ui set up. If you are starting fresh:

npx shadcn@latest init

1. Add the registry

Add goodui to the registries field of components.json:

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

2. Install blocks

npx shadcn@latest add @goodui/resource-timeline

The CLI installs the block, the shadcn components it uses and any npm packages. You can also search the registry from the terminal:

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

Without editing components.json

Every free block also installs from its full URL:

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

Use a block

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

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

Blocks are client components with their demo data at the top of the file. Swap that data for yours.