Guides

Installation

These components ship through a shadcn registry. The CLI copies source into your project — then you own the files.

Add one component

Works in any project that already uses shadcn. No extra setup.

bash
npx shadcn@latest add https://livedocs.xyz/r/chart.json

Add the full set

bash
npx shadcn@latest add https://livedocs.xyz/r/chart.json https://livedocs.xyz/r/sparkline.json https://livedocs.xyz/r/area-chart.json https://livedocs.xyz/r/line-chart.json https://livedocs.xyz/r/bar-chart.json https://livedocs.xyz/r/composed-chart.json https://livedocs.xyz/r/pie-chart.json https://livedocs.xyz/r/radar-chart.json https://livedocs.xyz/r/radial-chart.json https://livedocs.xyz/r/sankey-chart.json https://livedocs.xyz/r/trend-card.json https://livedocs.xyz/r/metric-chart.json https://livedocs.xyz/r/comparison-chart.json https://livedocs.xyz/r/breakdown-chart.json https://livedocs.xyz/r/range-chart.json https://livedocs.xyz/r/country-chart.json https://livedocs.xyz/r/ring-metric.json https://livedocs.xyz/r/cashflow-chart.json https://livedocs.xyz/r/spotlight-chart.json https://livedocs.xyz/r/lane-chart.json https://livedocs.xyz/r/usage-meter.json

Optional: namespace

Register the catalog once, then install with short names.

bash
npx shadcn@latest registry add @livedocs=https://livedocs.xyz/r/{name}.json
bash
npx shadcn@latest add @livedocs/chart

Usage

tsx
import { monthlyData, trafficConfig } from "@/components/ui/chart"
import { AreaChart } from "@/components/ui/area-chart"

export function Example() {
  return (
    <AreaChart data={monthlyData} config={trafficConfig}>
      <AreaChart.Grid />
      <AreaChart.Tooltip />
      <AreaChart.Legend isClickable />
      <AreaChart.Area dataKey="desktop" variant="gradient" />
    </AreaChart>
  )
}