React Router

For React Router in framework mode. Its default import alias is ~, so imports start with ~/ where the other guides have @/.

A new project

Create the project

The shadcn CLI creates the app, sets up Tailwind CSS and writes the theme tokens in one go:

npx shadcn@latest init -t react-router

pnpm dlx shadcn@latest init -t react-router

yarn dlx shadcn@latest init -t react-router

bunx shadcn@latest init -t react-router

Add a component

npx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

pnpm dlx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

yarn dlx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

bunx shadcn@latest add https://panelui.dev/r/web/rolling-number.json

The source is written to components/panelui/rolling-number.tsx, and the packages it uses are installed for you.

Use it

app/routes/home.tsx

import { RollingNumber } from "~/components/panelui/rolling-number"

export default function Home() {
  return (
    <main className="flex min-h-svh items-center justify-center">
      <RollingNumber value={121} className="text-6xl font-semibold" />
    </main>
  )
}

An existing project

Run the CLI in the project. It adds the theme tokens to your CSS and writes components.json:

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

Then add a component as in the steps above.

From npm

To install the package instead of copying source, follow From npm once the project has its shadcn theme.