---
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: "Forms"
tags: ["3d", "cards", "design-system", "maps", "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: 827
component_count: 15
generated_at: "2026-10-17T06:30:14.294Z"
---

# @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.vercel.app/registry/panelui
- This file: https://sh4dcn.vercel.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 (15)

| name | type | description | install |
| --- | --- | --- | --- |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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` |
| 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.vercel.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.vercel.app/json (library slug: panelui).
```