Origin is out. See it

CLI & registry

Edit on GitHub

Each block lives in the registry and is copied into your project by the shadcn CLI, so you own the code.

PrequelUI is a standard shadcn registry. The CLI reads a JSON description of each block and copies the source into your project — no wrapper library, no package to keep up to date.

The registry URL

Every block is available under the same URL pattern:

npx shadcn@latest add https://prequelui.terravidhal.me/r/<name>.json

Replace <name> with the block's name. The block list below gives you the exact command for each one.

All blocks

Charts

  • Activity heatmap

    npx shadcn@latest add https://prequelui.terravidhal.me/r/activity-heatmap.json

  • Area chart

    npx shadcn@latest add https://prequelui.terravidhal.me/r/area-chart.json

  • Bar chart

    npx shadcn@latest add https://prequelui.terravidhal.me/r/bar-chart.json

  • Conversion funnel

    npx shadcn@latest add https://prequelui.terravidhal.me/r/conversion-funnel.json

  • Donut chart

    npx shadcn@latest add https://prequelui.terravidhal.me/r/donut-chart.json

Metrics

  • Goal progress

    npx shadcn@latest add https://prequelui.terravidhal.me/r/goal-progress.json

  • KPI counter

    npx shadcn@latest add https://prequelui.terravidhal.me/r/kpi-counter.json

  • Radial gauge

    npx shadcn@latest add https://prequelui.terravidhal.me/r/radial-gauge.json

  • Stat ticker

    npx shadcn@latest add https://prequelui.terravidhal.me/r/stat-ticker.json

Tables

  • Data table

    npx shadcn@latest add https://prequelui.terravidhal.me/r/data-table.json

Feeds

  • Live feed

    npx shadcn@latest add https://prequelui.terravidhal.me/r/live-feed.json

Status

  • Uptime status

    npx shadcn@latest add https://prequelui.terravidhal.me/r/uptime-status.json

Marketing

  • Feature bento

    npx shadcn@latest add https://prequelui.terravidhal.me/r/feature-bento.json

  • Pricing toggle

    npx shadcn@latest add https://prequelui.terravidhal.me/r/pricing-toggle.json

  • Stats Section

    npx shadcn@latest add https://prequelui.terravidhal.me/r/stats-section.json

  • Testimonial Marquee

    npx shadcn@latest add https://prequelui.terravidhal.me/r/testimonial-marquee.json

The JSON shape

Each block is a registry:block item. Its dependencies list only the libraries it actually imports, and its files point at the source the CLI copies:

{
  "name": "area-chart",
  "type": "registry:block",
  "title": "Area chart",
  "description": "Revenue over time with a self-drawing line.",
  "dependencies": ["motion", "lucide-react"],
  "files": [
    {
      "path": "registry/prequel/area-chart/area-chart.tsx",
      "type": "registry:component"
    }
  ]
}

Dependencies

A block depends only on motion and lucide-react, and only when it uses them. There are no other runtime dependencies — no charting library. Charts are drawn by hand in SVG so they follow your theme exactly.

The blocks are mirrored on the blocks page, where you can preview each one before installing it.