Astro

For an Astro site with the React integration. The components are React, so they run as islands.

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 astro

pnpm dlx shadcn@latest init -t astro

yarn dlx shadcn@latest init -t astro

bunx shadcn@latest init -t astro

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

src/pages/index.astro

---
import Layout from "@/layouts/main.astro"
import { RollingNumber } from "@/components/panelui/rolling-number"
---

<Layout>
  <main class="flex min-h-svh items-center justify-center">
    <RollingNumber client:load value={121} className="text-6xl font-semibold" />
  </main>
</Layout>

An existing project

The project needs the React integration and Tailwind CSS. Add React with npx astro add react if it is missing. Then:

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.

Astro renders a React component to HTML and sends no JavaScript for it unless told to. A component that animates or responds to the pointer needs a client: directive: client:load to start at once, or client:visible to wait until it is scrolled into view. Without one it is drawn once and never moves.

From npm

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