---
name: "@livedocs"
slug: "livedocs"
description: "Dashboard-grade charts and UI primitives on semantic tokens: area, line, bar, pie, radar, sankey, KPI cards, meters, plus button, card, badge, input."
category: "Charts/data viz"
tags: ["buttons", "cards", "charts", "dashboard", "design-system", "forms", "hooks", "maps", "media", "theming"]
framework: "react"
license: "MIT"
author: "berlified"
website: "https://livedocs.xyz"
github: "https://github.com/berlified/livedocsxyz"
registry: "https://livedocs.xyz/r/registry.json"
pro: false
pro_url: null
github_stars: 1
component_count: 41
generated_at: "2026-09-21T01:50:16.753Z"
---

# @livedocs

Dashboard-grade charts and UI primitives on semantic tokens: area, line, bar, pie, radar, sankey, KPI cards, meters, plus button, card, badge, input.

## Links

- Website: https://livedocs.xyz
- GitHub: https://github.com/berlified/livedocsxyz
- Registry JSON: https://livedocs.xyz/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/livedocs
- This file: https://sh4dcn.vercel.app/md/livedocs.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://livedocs.xyz/r/registry.json
pnpm dlx shadcn@latest add https://livedocs.xyz/r/registry.json
bunx shadcn@latest add https://livedocs.xyz/r/registry.json
# clone the source repo
git clone https://github.com/berlified/livedocsxyz.git
# fetch the raw registry index
curl -s https://livedocs.xyz/r/registry.json
```

## Components (41)

| name | type | description | install |
| --- | --- | --- | --- |
| theme | registry:theme | Semantic color tokens for high-contrast surfaces. | `npx shadcn@latest add https://livedocs.xyz/r/theme.json` |
| utils | registry:lib | Tailwind class merge helper used by all components. | `npx shadcn@latest add https://livedocs.xyz/r/utils.json` |
| button | registry:ui | Action button with default, secondary, outline, ghost, destructive, and link variants. | `npx shadcn@latest add https://livedocs.xyz/r/button.json` |
| badge | registry:ui | Compact status label for counts, states, and metadata. | `npx shadcn@latest add https://livedocs.xyz/r/badge.json` |
| card | registry:ui | Layered surface for grouped content with header, body, and footer slots. | `npx shadcn@latest add https://livedocs.xyz/r/card.json` |
| input | registry:ui | Single-line text field with focus ring and disabled states. | `npx shadcn@latest add https://livedocs.xyz/r/input.json` |
| avatar | registry:ui | User or entity identity with image and fallback initials. | `npx shadcn@latest add https://livedocs.xyz/r/avatar.json` |
| separator | registry:ui | Horizontal or vertical divider between sections. | `npx shadcn@latest add https://livedocs.xyz/r/separator.json` |
| chart-reactions | registry:ui | Configurable meme loading and explicit metric emotions with reduced-motion-safe fallbacks. | `npx shadcn@latest add https://livedocs.xyz/r/chart-reactions.json` |
| chart | registry:ui | Modern, smooth Geist-inspired chart primitives: config, container, tooltip, legend, grid, and theme tokens. | `npx shadcn@latest add https://livedocs.xyz/r/chart.json` |
| sparkline | registry:ui | Smooth SVG trend with a scrubbable marker, value tooltip, and size tones. No Recharts. | `npx shadcn@latest add https://livedocs.xyz/r/sparkline.json` |
| area-chart | registry:ui | Compound area chart with gradient, hatched, glow, selection, tooltip, legend, and brush. | `npx shadcn@latest add https://livedocs.xyz/r/area-chart.json` |
| line-chart | registry:ui | Compound line chart with dashed strokes, glow, curve types, dots, tooltip, and legend. | `npx shadcn@latest add https://livedocs.xyz/r/line-chart.json` |
| bar-chart | registry:ui | Compound bar chart with stacked, horizontal, hatched, duotone, stripped, and gradient fills. | `npx shadcn@latest add https://livedocs.xyz/r/bar-chart.json` |
| composed-chart | registry:ui | Mix bars, areas, and lines on one cartesian surface with shared tooltip and legend. | `npx shadcn@latest add https://livedocs.xyz/r/composed-chart.json` |
| pie-chart | registry:ui | Donut or pie with padding, glowing sectors, click-to-select, tooltip, and legend. | `npx shadcn@latest add https://livedocs.xyz/r/pie-chart.json` |
| radar-chart | registry:ui | Filled or outlined radar with polygon or circle grid, glow, and series selection. | `npx shadcn@latest add https://livedocs.xyz/r/radar-chart.json` |
| radial-chart | registry:ui | Full or semi radial bars with background tracks, rounded caps, tooltip, and legend. | `npx shadcn@latest add https://livedocs.xyz/r/radial-chart.json` |
| sankey-chart | registry:ui | Flow diagram with nodes, weighted links, and themed strokes. | `npx shadcn@latest add https://livedocs.xyz/r/sankey-chart.json` |
| trend-card | registry:ui | Metric tile with overlay lines for this period vs last, a delta chip, and a compact chart. | `npx shadcn@latest add https://livedocs.xyz/r/trend-card.json` |
| metric-chart | registry:ui | Large value header, series pills, and a gradient well with axes and dots. | `npx shadcn@latest add https://livedocs.xyz/r/metric-chart.json` |
| comparison-chart | registry:ui | Two overlapping gradient areas for this year vs last, with a KPI and delta. | `npx shadcn@latest add https://livedocs.xyz/r/comparison-chart.json` |
| breakdown-chart | registry:ui | Clickable share stack with labeled rows, amounts, and percents. | `npx shadcn@latest add https://livedocs.xyz/r/breakdown-chart.json` |
| range-chart | registry:ui | Forecast band from low to high with an actual line sitting in the middle. | `npx shadcn@latest add https://livedocs.xyz/r/range-chart.json` |
| country-chart | registry:ui | Ranked market bars with a last-period marker on each row. | `npx shadcn@latest add https://livedocs.xyz/r/country-chart.json` |
| ring-metric | registry:ui | Donut with a total in the hole and a percent legend. | `npx shadcn@latest add https://livedocs.xyz/r/ring-metric.json` |
| cashflow-chart | registry:ui | Diverging bars from zero: inflow up, outflow down. | `npx shadcn@latest add https://livedocs.xyz/r/cashflow-chart.json` |
| spotlight-chart | registry:ui | Linear area with a dashed prior series and a callout on the peak. | `npx shadcn@latest add https://livedocs.xyz/r/spotlight-chart.json` |
| lane-chart | registry:ui | Horizontal outcome lanes compared against a shared max. | `npx shadcn@latest add https://livedocs.xyz/r/lane-chart.json` |
| usage-meter | registry:ui | Quota remaining with a used track and a reset caption. | `npx shadcn@latest add https://livedocs.xyz/r/usage-meter.json` |
| heatmap-chart | registry:ui | Keyboard-navigable activity grid with intensity fills, legend scale, and null-safe cells. | `npx shadcn@latest add https://livedocs.xyz/r/heatmap-chart.json` |
| funnel-chart | registry:ui | Connected curved funnel with conversion pills, keyboard-selectable stages, smooth hover emphasis, and reduced-motion-aware draw-in. | `npx shadcn@latest add https://livedocs.xyz/r/funnel-chart.json` |
| scatter-chart | registry:ui | XY point plot with series groups, optional bubbles, mean quadrants, and labeled axes. | `npx shadcn@latest add https://livedocs.xyz/r/scatter-chart.json` |
| waterfall-chart | registry:ui | Connected balance bridge with signed changes, absolute totals, keyboard exploration, and an accessible data table. | `npx shadcn@latest add https://livedocs.xyz/r/waterfall-chart.json` |
| candlestick-chart | registry:ui | OHLC candles with solid green up and red down bodies, crosshair tooltips on hover or focus, optional volume, and an accessible data table. | `npx shadcn@latest add https://livedocs.xyz/r/candlestick-chart.json` |
| activity-chart | registry:ui | Compact rounded-bar metric card with a Polar title, headline value, tooltip, and hover dimming. | `npx shadcn@latest add https://livedocs.xyz/r/activity-chart.json` |
| live-price-chart | registry:ui | Streaming crypto price with volume bars, MA overlay, timeframe pills, and 24h stats. | `npx shadcn@latest add https://livedocs.xyz/r/live-price-chart.json` |
| order-book | registry:ui | Live bid/ask ladder with depth bars, spread readout, and imbalance meter. | `npx shadcn@latest add https://livedocs.xyz/r/order-book.json` |
| depth-chart | registry:ui | Cumulative bid/ask staircase with mid-price marker and hover inspection. | `npx shadcn@latest add https://livedocs.xyz/r/depth-chart.json` |
| trades-feed | registry:ui | Live time-and-sales tape with side colors and new-print flash. | `npx shadcn@latest add https://livedocs.xyz/r/trades-feed.json` |
| market-movers | registry:ui | Gainers/losers screener with sparklines, change pills, and live ticks. | `npx shadcn@latest add https://livedocs.xyz/r/market-movers.json` |

## For AI agents

```text
You are adding components from @livedocs to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/livedocs.md) for the component list.
2. Fetch the machine-readable index: https://livedocs.xyz/r/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: livedocs).
```