---
name: "@panelui"
slug: "panelui"
description: "Tailwind CSS components for React: KPI tiles, a lane board, flow diagrams, an interactive globe and more, from the PanelUI design system."
category: "AI/chat UI"
tags: ["3d", "ai", "audio", "buttons", "cards", "design-system", "forms", "maps", "media", "navigation", "overlays"]
framework: "react"
license: "MIT"
author: "panel-ui"
website: "https://panelui.dev/docs/web"
github: "https://github.com/panel-ui/PanelUI"
registry: "https://panelui.dev/r/web/registry.json"
pro: false
pro_url: null
github_stars: 875
component_count: 33
generated_at: "2026-10-27T06:34:08.542Z"
---

# @panelui

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

## Links

- Website: https://panelui.dev/docs/web
- GitHub: https://github.com/panel-ui/PanelUI
- Registry JSON: https://panelui.dev/r/web/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/panelui
- This file: https://sh4dcn.netlify.app/md/panelui.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://panelui.dev/r/web/registry.json
pnpm dlx shadcn@latest add https://panelui.dev/r/web/registry.json
bunx shadcn@latest add https://panelui.dev/r/web/registry.json
# clone the source repo
git clone https://github.com/panel-ui/PanelUI.git
# fetch the raw registry index
curl -s https://panelui.dev/r/web/registry.json
```

## Components (33)

| name | type | description | install |
| --- | --- | --- | --- |
| alert | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry:component | A number whose digits roll to their new values. | `npx shadcn@latest add https://panelui.dev/r/web/rolling-number.json` |
| select | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @panelui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/panelui.md) for the component list.
2. Fetch the machine-readable index: https://panelui.dev/r/web/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: panelui).
```