Installation

Add components to a project that already uses shadcn/ui.

Requirements

You need React 19, Tailwind CSS v4 and a project set up with the shadcn CLI. If you don't have one yet, run this first:

npx shadcn@latest init

Add a component

Each command copies the source into components/spotcheck/, then installs what that component needs. There's no package to keep up to date, and the code is yours to edit.

$ npx shadcn@latest add https://spotcheckui.com/r/roll-number.json

The first install also adds the Spotcheck tokens to your stylesheet and installs the fonts. It doesn't change your existing theme, and your shadcn components keep their look.

Check that it works

import { RollNumber } from "@/components/spotcheck/roll-number"

export default function Page() {
  return <RollNumber value={1284903} className="text-7xl" />
}

Next steps

Spotcheck starts in light mode. See Theming to connect it to dark mode and pick a skin.