---
name: "@wick-charts"
slug: "wick-charts"
description: "Realtime canvas charts for shadcn/ui that stay smooth while data streams in. Colors come from your theme tokens, in light and dark mode."
category: "Charts/data viz"
tags: ["cards", "charts", "maps", "theming"]
framework: "react"
license: "MIT"
author: "mo4islona"
website: "https://wick-charts.eeff.io/integrations/shadcn/"
github: "https://github.com/mo4islona/wick-charts"
registry: "https://wick-charts.eeff.io/r/registry.json"
pro: false
pro_url: null
github_stars: 10
component_count: 13
generated_at: "2026-10-27T06:34:08.542Z"
---

# @wick-charts

Realtime canvas charts for shadcn/ui that stay smooth while data streams in. Colors come from your theme tokens, in light and dark mode.

## Links

- Website: https://wick-charts.eeff.io/integrations/shadcn/
- GitHub: https://github.com/mo4islona/wick-charts
- Registry JSON: https://wick-charts.eeff.io/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/wick-charts
- This file: https://sh4dcn.netlify.app/md/wick-charts.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://wick-charts.eeff.io/r/registry.json
pnpm dlx shadcn@latest add https://wick-charts.eeff.io/r/registry.json
bunx shadcn@latest add https://wick-charts.eeff.io/r/registry.json
# clone the source repo
git clone https://github.com/mo4islona/wick-charts.git
# fetch the raw registry index
curl -s https://wick-charts.eeff.io/r/registry.json
```

## Components (13)

| name | type | description | install |
| --- | --- | --- | --- |
| wick-theme | registry:hook | A hook that builds a Wick Charts theme from your shadcn/ui CSS variables and follows dark mode. | `npx shadcn@latest add https://wick-charts.eeff.io/r/wick-theme.json` |
| wick-chart | registry:ui | A canvas chart container, themed from your CSS variables and sized with classes. Put Wick Charts series and overlays inside. | `npx shadcn@latest add https://wick-charts.eeff.io/r/wick-chart.json` |
| chart-line-live | registry:block | A line chart that streams a new point every second, with an animated live value in the card header. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-line-live.json` |
| chart-candlestick | registry:block | Live OHLC candles in your chart colors, with an OHLC info bar, a crosshair and a price badge. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-candlestick.json` |
| chart-order-book | registry:block | Cumulative bid and ask depth around the mid price in your chart colors, updated every second. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-order-book.json` |
| chart-sparkline-cards | registry:block | Three KPI cards with a live value, a change badge and an edge-to-edge sparkline. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-sparkline-cards.json` |
| chart-bar-grouped | registry:block | Two series side by side on a category axis, with a tooltip and a legend that toggles them. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-bar-grouped.json` |
| chart-pie-donut | registry:block | A donut with an animated total in the center; the slices resize as new data arrives. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-pie-donut.json` |
| chart-band-latency | registry:block | Live latency percentiles: a median line over p25–p75 and p5–p95 bands. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-band-latency.json` |
| chart-area-stacked | registry:block | Two series stacked over three months, with a tooltip and a legend that toggles them. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-area-stacked.json` |
| chart-heatmap | registry:block | Sessions by weekday and hour on a ramp from your theme, with a cell tooltip. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-heatmap.json` |
| chart-line-annotations | registry:block | An error rate with an SLO line, a shaded incident window and a deploy marker. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-line-annotations.json` |
| chart-line-navigator | registry:block | A year of daily closes with a navigator strip to pick the visible window. | `npx shadcn@latest add https://wick-charts.eeff.io/r/chart-line-navigator.json` |

## For AI agents

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