Installation

The web collection is built on shadcn. A project needs Tailwind CSS 4 and the shadcn theme tokens. After that, a component is one command.

Choose your framework

Each guide starts from nothing and ends with a component on the page. If your project already uses shadcn, skip to Add a component.

Add a component

In a project that already has a components.json, copy any component in with the shadcn CLI:

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 CLI writes the source to components/panelui/, installs the packages it uses, and adds any other PanelUI component it is built on. Import it from there:

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

The address of every component is on its own page, under Installation.

A shorter address

Register the collection once in components.json and the CLI takes a name instead of a URL:

{
  "registries": {
    "@panelui": "https://panelui.dev/r/web/{name}.json"
  }
}

npx shadcn@latest add @panelui/rolling-number

pnpm dlx shadcn@latest add @panelui/rolling-number

yarn dlx shadcn@latest add @panelui/rolling-number

bunx shadcn@latest add @panelui/rolling-number

From npm

Install the package instead of copying source, and upgrade it like any other dependency:

npm install panelui-web

pnpm add panelui-web

yarn add panelui-web

bun add panelui-web

Tailwind only compiles the classes it can see, and it does not look inside node_modules. Point it at the package once, in the CSS file that imports Tailwind:

@import "tailwindcss";
@source "../node_modules/panelui-web/dist";

The path is relative to the CSS file. Then import each component from its own entry:

import { RollingNumber } from "panelui-web/rolling-number"

The package still needs the shadcn theme tokens, so run shadcn init in the project first. If a component renders unstyled, the @source line is missing or points at the wrong folder.

Without shadcn

The components need these CSS variables and nothing else from shadcn: --background, --foreground, --card, --popover, --primary, --secondary, --muted, --accent, --border, --input and --ring, with the -foreground partner of each surface. Define them yourself and map them into Tailwind's theme, and the components work in a project that has never run the CLI. Manual installation shows the whole block.