{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "area-chart",
  "title": "Area Chart",
  "description": "A single area with complete monthly visitor data.",
  "dependencies": [
    "@kind-ui/charts@0.5.0",
    "react@^19.3.0",
    "react-dom@^19.3.0",
    "recharts@^3.10.1",
    "motion@^13.4.6"
  ],
  "devDependencies": [
    "tailwindcss@^4.0.0"
  ],
  "files": [
    {
      "path": "components/area-chart.tsx",
      "content": "\"use client\";\nimport { AreaChart, type SeriesConfig } from \"@kind-ui/charts\";\n\nconst data = [\n  { period: \"Jan\", visitors: 420 },\n  { period: \"Feb\", visitors: 580 },\n  { period: \"Mar\", visitors: 510 },\n  { period: \"Apr\", visitors: 760 },\n  { period: \"May\", visitors: 680 },\n  { period: \"Jun\", visitors: 910 },\n  { period: \"Jul\", visitors: 840 },\n  { period: \"Aug\", visitors: 1070 },\n  { period: \"Sep\", visitors: 960 },\n  { period: \"Oct\", visitors: 1180 },\n  { period: \"Nov\", visitors: 1110 },\n  { period: \"Dec\", visitors: 1360 },\n];\nconst config = {\n  visitors: { label: \"Visitors\", color: \"#733bff\" },\n} satisfies SeriesConfig;\n\nexport function VisitorAreaChart({ state = \"ready\" }: { state?: \"ready\" | \"loading\" }) {\n  return (\n    <AreaChart\n      config={config}\n      height={280}\n      defaultVisibleSeries={Object.keys(config)}\n      legendPosition=\"top\"\n      loading={state === \"loading\"}\n      data={data}\n      animate\n      accessibilityLayer\n      margin={{ top: 20, right: 32, bottom: 8, left: 0 }}\n      aria-label=\"Monthly visitors\"\n    >\n      <AreaChart.Grid stroke=\"#ccc\" vertical={false} strokeDasharray=\"3 3\" />\n      <AreaChart.XAxis\n        tick={{ fill: \"#666\" }}\n        dataKey=\"period\"\n        axisLine={false}\n        tickLine={false}\n        tickMargin={8}\n        height={48}\n        interval=\"preserveStartEnd\"\n      />\n      <AreaChart.YAxis\n        tick={{ fill: \"#666\" }}\n        axisLine={false}\n        tickLine={false}\n        tickMargin={8}\n        width={72}\n      />\n      <AreaChart.Series dataKey=\"visitors\" type=\"monotone\" strokeWidth={2} fillOpacity={0.22} />\n      <AreaChart.Tooltip />\n      <AreaChart.Legend />\n    </AreaChart>\n  );\n}\n",
      "type": "registry:component",
      "target": "@components/area-chart.tsx"
    }
  ],
  "css": {
    "@source \"../node_modules/@kind-ui/charts/dist\"": {},
    "@source \"../../node_modules/@kind-ui/charts/dist\"": {},
    "@source \"../../../node_modules/@kind-ui/charts/dist\"": {}
  },
  "type": "registry:component"
}