shadcn/ui

Are you an AI agent?

Chart blocks for shadcn/ui. For Vue and Nuxt, see the shadcn-vue blocks. All blocks on one page ↗

01 — PICK A BLOCK
02 — ADD IT WITH THE CLI
Install the block, then render <ChartCandlestick /> from @/components/chart-candlestick.
npx shadcn@latest add https://wick-charts.eeff.io/r/chart-candlestick.json
03 — OR ADD BLOCKS BY NAME
Add the registry to components.json to install by name: npx shadcn@latest add @wick-charts/chart-candlestick. All items: registry.json.
{
  "registries": {
    "@wick-charts": "https://wick-charts.eeff.io/r/{name}.json"
  }
}
04 — THEMED FROM YOUR CSS VARIABLES
useWickTheme(ref?) reads --background, --foreground, --muted-foreground, --border and --chart-1 … --chart-5, and follows dark mode. Candles and order book sides take your chart colors, not green and red. Pass a ref to read the tokens inside a scoped .dark panel.
const ref = useRef<HTMLDivElement>(null);
const theme = useWickTheme(ref);
 
return (
  <div ref={ref} className="h-64">
    <ChartContainer theme={theme}>…</ChartContainer>
  </div>
);
05 — SIZE A CHART WITH CLASSES
Size WickChart with classes: aspect-video by default, aspect-auto h-[250px] for a fixed height. It takes every ChartContainer prop and draws horizontal grid lines only. theme also takes a function that adjusts the generated theme; define it outside the component.
import { LineSeries, TimeAxis, type TimePoint, Tooltip, YAxis } from '@wick-charts/react';
 
import { WickChart } from '@/components/ui/wick-chart';
 
export function Revenue({ data }: { data: TimePoint[] }) {
  return (
    <WickChart className="aspect-auto h-[250px]">
      <LineSeries data={data} />
      <YAxis />
      <TimeAxis />
      <Tooltip />
    </WickChart>
  );
}
06 — SVELTE
There is no Svelte registry. Use @wick-charts/svelte and build a theme with createTheme.
Chart colors: