shadcn-vue

Are you an AI agent?

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

01 — PICK A BLOCK
02 — ADD IT WITH THE CLI
Install the block, then render <ChartCandlestick /> from @/components/ChartCandlestick.vue.
npx shadcn-vue@latest add https://wick-charts.eeff.io/r/vue/chart-candlestick.json
03 — OR ADD BLOCKS BY NAME
Add the registry to components.json to install by name: npx shadcn-vue@latest add @wick-charts/chart-candlestick. All items: registry.json.
{
  "registries": {
    "@wick-charts": "https://wick-charts.eeff.io/r/vue/{name}.json"
  }
}
04 — THEMED FROM YOUR CSS VARIABLES
useWickTheme(target?) 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 template ref to read the tokens inside a scoped .dark panel.
<script setup lang="ts">
import { ChartContainer } from '@wick-charts/vue';
import { ref } from 'vue';
 
import { useWickTheme } from '@/composables/useWickTheme';
 
const root = ref<HTMLDivElement | null>(null);
const theme = useWickTheme(root);
</script>
 
<template>
  <div ref="root" class="h-64">
    <ChartContainer :theme="theme">…</ChartContainer>
  </div>
</template>
05 — SIZE A CHART WITH CLASSES
Size WickChart with classes: aspect-video by default, aspect-auto h-[250px] for a fixed height. Other attributes go to ChartContainer; it draws horizontal grid lines only. theme also takes a function that adjusts the generated theme; keep it in <script setup>.
<script setup lang="ts">
import { LineSeries, TimeAxis, type TimePoint, Tooltip, YAxis } from '@wick-charts/vue';
 
import { WickChart } from '@/components/ui/wick-chart';
 
defineProps<{ data: TimePoint[] }>();
</script>
 
<template>
  <WickChart class="aspect-auto h-[250px]">
    <LineSeries :data="data" />
    <YAxis />
    <TimeAxis />
    <Tooltip />
  </WickChart>
</template>
06 — SVELTE
There is no Svelte registry. Use @wick-charts/svelte and build a theme with createTheme.
Chart colors: