Build faster with practical UI blocks for real apps

Note: Follows the same installation steps as

shadcn/ui

Create project

Run the init (with default options) command to create a new Next.js project or set up an existing one:

npm

yarn

pnpm

bun

npx shadcn@latest init

Add `@pacekit` to your `components.json`

components.json

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

That's it

You’re ready to start adding components to your project

npm

yarn

pnpm

bun

npx shadcn@latest add @pacekit/blocks-stats-rich-metric-stat

The command above will add the TextReveal component to your project. You can then import it using the following syntax:

index.tsx


import { RichMetricStat } from "@/components/blocks/stats/rich-metric-stat";

export default function Home() {
  return (
       <RichMetricStat
          value="$45,231.89"
          title="Total Revenue"
          trendValue={20.1}
          footerLabel="+$8,432.12 from last month"
          footerSubtext="Based on 1,240 orders"
      />
  )
}

Installation

Create project

Add @pacekit to your components.json

That's it

Add `@pacekit` to your `components.json`