sh4dcnv2 · atlas
← libraries

@panelui

Tailwind CSS components for React: KPI tiles, a lane board, flow diagrams, an interactive globe and more, from the PanelUI design system.

33 components react shadcn-cli MIT

Install this registry

shadcn (npm) npx shadcn@latest add https://panelui.dev/r/web/registry.json
pnpm pnpm dlx shadcn@latest add https://panelui.dev/r/web/registry.json
bun bunx shadcn@latest add https://panelui.dev/r/web/registry.json
fetch registry curl -s https://panelui.dev/r/web/registry.json

Components

33 total
Alert component

A message set into the page that stays until it is dealt with, as a card in a tray of its tone.

npx shadcn@latest add https://panelui.dev/r/web/alert.json
Alert Dialog component

A question that must be answered before the page can be used again, with the answers side by side under it.

npx shadcn@latest add https://panelui.dev/r/web/alert-dialog.json
Avatar component

A person or a team as a picture, or their initials in a colour of their own, with a badge and a group that opens up.

npx shadcn@latest add https://panelui.dev/r/web/avatar.json
Bar Picker component

A short run of values as columns of lights, one column picked.

npx shadcn@latest add https://panelui.dev/r/web/bar-picker.json
Button component

Something to press, in the weight its action deserves, with a spinner for while it works.

npx shadcn@latest add https://panelui.dev/r/web/button.json
Button Group component

Related buttons joined into one control, with separators, text cells and fields between them.

npx shadcn@latest add https://panelui.dev/r/web/button-group.json
Canvas component

A surface of dots, lines or crosses for other components to sit on, with a light that can follow the pointer.

npx shadcn@latest add https://panelui.dev/r/web/canvas.json
Card component

A surface that holds one thing, with a heading, an action beside it and a footer.

npx shadcn@latest add https://panelui.dev/r/web/card.json
Command Dock component

A small button that opens into a field, with the answer arriving under it a row at a time.

npx shadcn@latest add https://panelui.dev/r/web/command-dock.json
Day Grid component

A run of days as a field of dots, each sized by how much happened on it.

npx shadcn@latest add https://panelui.dev/r/web/day-grid.json
Dialog component

A task done in a panel over the page, with its buttons in the band beneath it.

npx shadcn@latest add https://panelui.dev/r/web/dialog.json
Feedback component

A dialog with a well to write in and two actions in the band around it.

npx shadcn@latest add https://panelui.dev/r/web/feedback.json
Flow component

A canvas of nodes joined by edges, that you pan, zoom and rearrange.

npx shadcn@latest add https://panelui.dev/r/web/flow.json
Frame component

A panel of rows set into a tray, with the tray's top strip carrying the title.

npx shadcn@latest add https://panelui.dev/r/web/frame.json
Input component

A single line to type into, with icons, units and buttons set inside its box.

npx shadcn@latest add https://panelui.dev/r/web/input.json
KPI component

One number and what it is doing: its change, its shape over time, its progress to a target.

npx shadcn@latest add https://panelui.dev/r/web/kpi.json
Label component

The name of a field, with its required mark, a hint and an action on one line.

npx shadcn@latest add https://panelui.dev/r/web/label.json
Lane Board component

Lanes of cards that can be dragged within a lane and from one lane to another.

npx shadcn@latest add https://panelui.dev/r/web/lane-board.json
Menu component

A list of actions that opens from a button, with shortcuts, checks and submenus.

npx shadcn@latest add https://panelui.dev/r/web/menu.json
Message component

One turn of a conversation with an assistant: a person's bubble, or an answer set as prose with actions under it.

npx shadcn@latest add https://panelui.dev/r/web/message.json
Not Found component

An error code drawn in pixels that come apart near the pointer, with a title and a way out.

npx shadcn@latest add https://panelui.dev/r/web/not-found.json
Planet component

The world as dots on a globe you can turn, with markers pinned to it.

npx shadcn@latest add https://panelui.dev/r/web/planet.json
Prompt component

A field for writing to an assistant, with its files, model and tools in one card.

npx shadcn@latest add https://panelui.dev/r/web/prompt.json
Range Meter component

A reading on a ruler of ticks that rises where the value is, with the number above it.

npx shadcn@latest add https://panelui.dev/r/web/range-meter.json
Rolling Number component

A number whose digits roll to their new values.

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

A button that opens a list of options and shows the one chosen.

npx shadcn@latest add https://panelui.dev/r/web/select.json
Sheet component

A panel that rises from an edge of the screen, floating clear of it, and leaves with a swipe.

npx shadcn@latest add https://panelui.dev/r/web/sheet.json
Soundwave component

A voice drawn while an app listens: capsules, bars, a line, a field of dots, spokes round a person, or rings of dots.

npx shadcn@latest add https://panelui.dev/r/web/soundwave.json
Stat component

One figure written large, with a label over it, a unit after it and a badge beside it.

npx shadcn@latest add https://panelui.dev/r/web/stat.json
Switch component

On or off, for a setting that takes effect the moment it changes.

npx shadcn@latest add https://panelui.dev/r/web/switch.json
Tabs component

A few views of one thing, one at a time, chosen from a row of tabs whose marker slides to the one chosen.

npx shadcn@latest add https://panelui.dev/r/web/tabs.json
Textarea component

A field for more than one line that grows as it is written in, up to a limit.

npx shadcn@latest add https://panelui.dev/r/web/textarea.json
Tilt Card component

A card that leans towards the pointer, with layers inside it that move by their depth.

npx shadcn@latest add https://panelui.dev/r/web/tilt-card.json