Laravel

For Laravel with Inertia and React.

A new project

Create the project

Create the app with the React starter kit, then run the shadcn CLI inside it:

laravel new my-app

npx shadcn@latest init

pnpm dlx shadcn@latest init

yarn dlx shadcn@latest init

bunx shadcn@latest init

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

resources/js/pages/index.tsx

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

export default function Index() {
  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.