Bklit UI

簡介

適用於 React 應用程式的精美現代 UI 元件。

Bklit UI 是一個基於 shadcn/ui 打造的元件庫，協助您更輕鬆地建構圖表與資料視覺化。

使用方式

面積圖採用與折線圖相同的可組合 API。請參閱圖表畫廊以查看互動範例。

import { AreaChart, Area, Grid, XAxis, ChartTooltip } from "@bklitui/ui/charts";

const data = [
  { date: new Date("2025-01-01"), revenue: 12000, costs: 8500 },
  { date: new Date("2025-01-02"), revenue: 13500, costs: 9200 },
  // ... more data
];

export default function RevenueChart() {
  return (
    <AreaChart data={data}>
      <Grid horizontal />
      <Area dataKey="revenue" fill="var(--chart-line-primary)" />
      <Area dataKey="costs" fill="var(--chart-line-secondary)" />
      <XAxis />
      <ChartTooltip />
    </AreaChart>
  );
}