diff --git a/apps/v4/content/docs/components/base/chart.mdx b/apps/v4/content/docs/components/base/chart.mdx
index c9a015271b..01861edb21 100644
--- a/apps/v4/content/docs/components/base/chart.mdx
+++ b/apps/v4/content/docs/components/base/chart.mdx
@@ -5,9 +5,9 @@ base: base
 component: true
 ---
 
-<Callout>
+<Callout className="mt-4">
 
-**Recharts v3:** The `chart` component now targets Recharts v3. Use `ChartTooltip.defaultIndex` for initial tooltip state, but keep persistent active shapes in your own chart state. Also remove `layout` from `<Bar>` when `BarChart` already sets it, and keep a height or `min-h-*` on `ChartContainer`.
+**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
 
 </Callout>
 
@@ -51,6 +51,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 **The components are yours**.
 
+## Updating to Recharts v3
+
+If you're updating older chart code to Recharts v3:
+
+- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
+- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
+- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
+- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
+
 ## Installation
 
 <CodeTabs>
diff --git a/apps/v4/content/docs/components/radix/chart.mdx b/apps/v4/content/docs/components/radix/chart.mdx
index 71c135937f..8d9e140888 100644
--- a/apps/v4/content/docs/components/radix/chart.mdx
+++ b/apps/v4/content/docs/components/radix/chart.mdx
@@ -5,9 +5,9 @@ base: radix
 component: true
 ---
 
-<Callout>
+<Callout className="mt-4">
 
-**Recharts v3:** The `chart` component now targets Recharts v3. Use `ChartTooltip.defaultIndex` for initial tooltip state, but keep persistent active shapes in your own chart state. Also remove `layout` from `<Bar>` when `BarChart` already sets it, and keep a height or `min-h-*` on `ChartContainer`.
+**Updated:** The `chart` component now uses Recharts v3. If you're upgrading existing chart code, see [Updating to Recharts v3](#updating-to-recharts-v3).
 
 </Callout>
 
@@ -51,6 +51,15 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 **The components are yours**.
 
+## Updating to Recharts v3
+
+If you're updating older chart code to Recharts v3:
+
+- Use `var(--chart-1)` instead of `hsl(var(--chart-1))` when you reference chart tokens from your CSS variables.
+- Use `ChartTooltip.defaultIndex` for initial tooltip state only. Keep persistent active shapes in your own chart state.
+- Remove `layout` from `<Bar>` when the parent `<BarChart>` already defines it.
+- Keep a height, `min-h-*`, or `aspect-*` on `ChartContainer` so `ResponsiveContainer` can measure on first render.
+
 ## Installation
 
 <CodeTabs>
diff --git a/apps/v4/examples/base/chart-tooltip.tsx b/apps/v4/examples/base/chart-tooltip.tsx
index b4f2aee682..096e2c698a 100644
--- a/apps/v4/examples/base/chart-tooltip.tsx
+++ b/apps/v4/examples/base/chart-tooltip.tsx
@@ -173,7 +173,7 @@ function TooltipDemo({
                 {!hideIndicator && (
                   <div
                     className={cn(
-                      "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
diff --git a/apps/v4/examples/radix/chart-tooltip.tsx b/apps/v4/examples/radix/chart-tooltip.tsx
index b4f2aee682..096e2c698a 100644
--- a/apps/v4/examples/radix/chart-tooltip.tsx
+++ b/apps/v4/examples/radix/chart-tooltip.tsx
@@ -173,7 +173,7 @@ function TooltipDemo({
                 {!hideIndicator && (
                   <div
                     className={cn(
-                      "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
index 8ecaae962f..b2edaf6bee 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-bar-active.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-bar-active.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              shape={({ index, ...props }: BarShapeProps) =>\n                index === ACTIVE_INDEX ? (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                ) : (\n                  <Rectangle {...props} />\n                )\n              }\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from \"recharts\"\nimport type { BarShapeProps } from \"recharts/types/cartesian/Bar\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A bar chart with an active bar\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 187, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 275, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 2\n\nexport function ChartBarActive() {\n  return (\n    <Card>\n      <CardHeader>\n        <CardTitle>Bar Chart - Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent>\n        <ChartContainer config={chartConfig}>\n          <BarChart accessibilityLayer data={chartData}>\n            <CartesianGrid vertical={false} />\n            <XAxis\n              dataKey=\"browser\"\n              tickLine={false}\n              tickMargin={10}\n              axisLine={false}\n              tickFormatter={(value) =>\n                chartConfig[value as keyof typeof chartConfig]?.label\n              }\n            />\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Bar\n              dataKey=\"visitors\"\n              strokeWidth={2}\n              radius={8}\n              shape={({ index, ...props }: BarShapeProps) =>\n                index === ACTIVE_INDEX ? (\n                  <Rectangle\n                    {...props}\n                    fillOpacity={0.8}\n                    stroke={props.payload.fill}\n                    strokeDasharray={4}\n                    strokeDashoffset={4}\n                  />\n                ) : (\n                  <Rectangle {...props} />\n                )\n              }\n            />\n          </BarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col items-start gap-2 text-sm\">\n        <div className=\"flex gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
index 419664068a..ed137c95db 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-donut-active.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-donut-active.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              shape={({ index, outerRadius = 0, ...props }: PieSectorShapeProps) =>\n                index === ACTIVE_INDEX ? (\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                ) : (\n                  <Sector {...props} outerRadius={outerRadius} />\n                )\n              }\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type { PieSectorShapeProps } from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A donut chart with an active sector\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nconst ACTIVE_INDEX = 0\n\nexport function ChartPieDonutActive() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Donut Active</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              nameKey=\"browser\"\n              innerRadius={60}\n              strokeWidth={5}\n              shape={({\n                index,\n                outerRadius = 0,\n                ...props\n              }: PieSectorShapeProps) =>\n                index === ACTIVE_INDEX ? (\n                  <Sector {...props} outerRadius={outerRadius + 10} />\n                ) : (\n                  <Sector {...props} outerRadius={outerRadius} />\n                )\n              }\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json
index 5ff8673bbd..9879027b00 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-interactive.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-interactive.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type {\n  PieSectorDataItem,\n  PieSectorShapeProps,\n} from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  const renderPieShape = React.useCallback(\n    ({ index, outerRadius = 0, ...props }: PieSectorShapeProps) => {\n      if (index === activeIndex) {\n        return (\n          <g>\n            <Sector {...props} outerRadius={outerRadius + 10} />\n            <Sector\n              {...props}\n              outerRadius={outerRadius + 25}\n              innerRadius={outerRadius + 12}\n            />\n          </g>\n        )\n      }\n\n      return <Sector {...props} outerRadius={outerRadius} />\n    },\n    [activeIndex]\n  )\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-xs\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              shape={renderPieShape}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Label, Pie, PieChart, Sector } from \"recharts\"\nimport type {\n  PieSectorDataItem,\n  PieSectorShapeProps,\n} from \"recharts/types/polar/Pie\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartStyle,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from \"@/registry/new-york-v4/ui/select\"\n\nexport const description = \"An interactive pie chart\"\n\nconst desktopData = [\n  { month: \"january\", desktop: 186, fill: \"var(--color-january)\" },\n  { month: \"february\", desktop: 305, fill: \"var(--color-february)\" },\n  { month: \"march\", desktop: 237, fill: \"var(--color-march)\" },\n  { month: \"april\", desktop: 173, fill: \"var(--color-april)\" },\n  { month: \"may\", desktop: 209, fill: \"var(--color-may)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  desktop: {\n    label: \"Desktop\",\n  },\n  mobile: {\n    label: \"Mobile\",\n  },\n  january: {\n    label: \"January\",\n    color: \"var(--chart-1)\",\n  },\n  february: {\n    label: \"February\",\n    color: \"var(--chart-2)\",\n  },\n  march: {\n    label: \"March\",\n    color: \"var(--chart-3)\",\n  },\n  april: {\n    label: \"April\",\n    color: \"var(--chart-4)\",\n  },\n  may: {\n    label: \"May\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieInteractive() {\n  const id = \"pie-interactive\"\n  const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month)\n\n  const activeIndex = React.useMemo(\n    () => desktopData.findIndex((item) => item.month === activeMonth),\n    [activeMonth]\n  )\n  const months = React.useMemo(() => desktopData.map((item) => item.month), [])\n\n  const renderPieShape = React.useCallback(\n    ({ index, outerRadius = 0, ...props }: PieSectorShapeProps) => {\n      if (index === activeIndex) {\n        return (\n          <g>\n            <Sector {...props} outerRadius={outerRadius + 10} />\n            <Sector\n              {...props}\n              outerRadius={outerRadius + 25}\n              innerRadius={outerRadius + 12}\n            />\n          </g>\n        )\n      }\n\n      return <Sector {...props} outerRadius={outerRadius} />\n    },\n    [activeIndex]\n  )\n\n  return (\n    <Card data-chart={id} className=\"flex flex-col\">\n      <ChartStyle id={id} config={chartConfig} />\n      <CardHeader className=\"flex-row items-start space-y-0 pb-0\">\n        <div className=\"grid gap-1\">\n          <CardTitle>Pie Chart - Interactive</CardTitle>\n          <CardDescription>January - June 2024</CardDescription>\n        </div>\n        <Select value={activeMonth} onValueChange={setActiveMonth}>\n          <SelectTrigger\n            className=\"ml-auto h-7 w-[130px] rounded-lg pl-2.5\"\n            aria-label=\"Select a value\"\n          >\n            <SelectValue placeholder=\"Select month\" />\n          </SelectTrigger>\n          <SelectContent align=\"end\" className=\"rounded-xl\">\n            {months.map((key) => {\n              const config = chartConfig[key as keyof typeof chartConfig]\n\n              if (!config) {\n                return null\n              }\n\n              return (\n                <SelectItem\n                  key={key}\n                  value={key}\n                  className=\"rounded-lg [&_span]:flex\"\n                >\n                  <div className=\"flex items-center gap-2 text-xs\">\n                    <span\n                      className=\"flex h-3 w-3 shrink-0 rounded-xs\"\n                      style={{\n                        backgroundColor: `var(--color-${key})`,\n                      }}\n                    />\n                    {config?.label}\n                  </div>\n                </SelectItem>\n              )\n            })}\n          </SelectContent>\n        </Select>\n      </CardHeader>\n      <CardContent className=\"flex flex-1 justify-center pb-0\">\n        <ChartContainer\n          id={id}\n          config={chartConfig}\n          className=\"mx-auto aspect-square w-full max-w-[300px]\"\n        >\n          <PieChart>\n            <ChartTooltip\n              cursor={false}\n              content={<ChartTooltipContent hideLabel />}\n            />\n            <Pie\n              data={desktopData}\n              dataKey=\"desktop\"\n              nameKey=\"month\"\n              innerRadius={60}\n              strokeWidth={5}\n              shape={renderPieShape}\n            >\n              <Label\n                content={({ viewBox }) => {\n                  if (viewBox && \"cx\" in viewBox && \"cy\" in viewBox) {\n                    return (\n                      <text\n                        x={viewBox.cx}\n                        y={viewBox.cy}\n                        textAnchor=\"middle\"\n                        dominantBaseline=\"middle\"\n                      >\n                        <tspan\n                          x={viewBox.cx}\n                          y={viewBox.cy}\n                          className=\"fill-foreground text-3xl font-bold\"\n                        >\n                          {desktopData[activeIndex].desktop.toLocaleString()}\n                        </tspan>\n                        <tspan\n                          x={viewBox.cx}\n                          y={(viewBox.cy || 0) + 24}\n                          className=\"fill-muted-foreground\"\n                        >\n                          Visitors\n                        </tspan>\n                      </text>\n                    )\n                  }\n                }}\n              />\n            </Pie>\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
index 83732abd32..437c44569a 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-pie-label-custom.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-pie-label-custom.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"hsla(var(--foreground))\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport { Pie, PieChart } from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A pie chart with a custom label\"\n\nconst chartData = [\n  { browser: \"chrome\", visitors: 275, fill: \"var(--color-chrome)\" },\n  { browser: \"safari\", visitors: 200, fill: \"var(--color-safari)\" },\n  { browser: \"firefox\", visitors: 187, fill: \"var(--color-firefox)\" },\n  { browser: \"edge\", visitors: 173, fill: \"var(--color-edge)\" },\n  { browser: \"other\", visitors: 90, fill: \"var(--color-other)\" },\n]\n\nconst chartConfig = {\n  visitors: {\n    label: \"Visitors\",\n  },\n  chrome: {\n    label: \"Chrome\",\n    color: \"var(--chart-1)\",\n  },\n  safari: {\n    label: \"Safari\",\n    color: \"var(--chart-2)\",\n  },\n  firefox: {\n    label: \"Firefox\",\n    color: \"var(--chart-3)\",\n  },\n  edge: {\n    label: \"Edge\",\n    color: \"var(--chart-4)\",\n  },\n  other: {\n    label: \"Other\",\n    color: \"var(--chart-5)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartPieLabelCustom() {\n  return (\n    <Card className=\"flex flex-col\">\n      <CardHeader className=\"items-center pb-0\">\n        <CardTitle>Pie Chart - Custom Label</CardTitle>\n        <CardDescription>January - June 2024</CardDescription>\n      </CardHeader>\n      <CardContent className=\"flex-1 pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px] px-0\"\n        >\n          <PieChart>\n            <ChartTooltip\n              content={<ChartTooltipContent nameKey=\"visitors\" hideLabel />}\n            />\n            <Pie\n              data={chartData}\n              dataKey=\"visitors\"\n              labelLine={false}\n              label={({ payload, ...props }) => {\n                return (\n                  <text\n                    cx={props.cx}\n                    cy={props.cy}\n                    x={props.x}\n                    y={props.y}\n                    textAnchor={props.textAnchor}\n                    dominantBaseline={props.dominantBaseline}\n                    fill=\"var(--foreground)\"\n                  >\n                    {payload.visitors}\n                  </text>\n                )\n              }}\n              nameKey=\"browser\"\n            />\n          </PieChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"leading-none text-muted-foreground\">\n          Showing total visitors for the last 6 months\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
index e387cef2bf..80ca18f508 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-radar-radius.json
@@ -8,7 +8,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/charts/chart-radar-radius.tsx",
-      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"hsla(var(--foreground))\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport { TrendingUp } from \"lucide-react\"\nimport {\n  PolarAngleAxis,\n  PolarGrid,\n  PolarRadiusAxis,\n  Radar,\n  RadarChart,\n} from \"recharts\"\n\nimport {\n  Card,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/new-york-v4/ui/card\"\nimport {\n  ChartContainer,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from \"@/registry/new-york-v4/ui/chart\"\n\nexport const description = \"A radar chart with a radius axis\"\n\nconst chartData = [\n  { month: \"January\", desktop: 186, mobile: 80 },\n  { month: \"February\", desktop: 305, mobile: 200 },\n  { month: \"March\", desktop: 237, mobile: 120 },\n  { month: \"April\", desktop: 73, mobile: 190 },\n  { month: \"May\", desktop: 209, mobile: 130 },\n  { month: \"June\", desktop: 214, mobile: 140 },\n]\n\nconst chartConfig = {\n  desktop: {\n    label: \"Desktop\",\n    color: \"var(--chart-1)\",\n  },\n  mobile: {\n    label: \"Mobile\",\n    color: \"var(--chart-2)\",\n  },\n} satisfies ChartConfig\n\nexport function ChartRadarRadius() {\n  return (\n    <Card>\n      <CardHeader className=\"items-center pb-4\">\n        <CardTitle>Radar Chart - Radius Axis</CardTitle>\n        <CardDescription>\n          Showing total visitors for the last 6 months\n        </CardDescription>\n      </CardHeader>\n      <CardContent className=\"pb-0\">\n        <ChartContainer\n          config={chartConfig}\n          className=\"mx-auto aspect-square max-h-[250px]\"\n        >\n          <RadarChart data={chartData}>\n            <ChartTooltip\n              cursor={false}\n              content={\n                <ChartTooltipContent indicator=\"line\" labelKey=\"month\" />\n              }\n            />\n            <PolarGrid />\n            <Radar\n              dataKey=\"desktop\"\n              fill=\"var(--color-desktop)\"\n              fillOpacity={0.6}\n            />\n            <Radar dataKey=\"mobile\" fill=\"var(--color-mobile)\" />\n            <PolarRadiusAxis\n              angle={60}\n              stroke=\"var(--foreground)\"\n              orientation=\"middle\"\n              axisLine={false}\n            />\n          </RadarChart>\n        </ChartContainer>\n      </CardContent>\n      <CardFooter className=\"flex-col gap-2 text-sm\">\n        <div className=\"flex items-center gap-2 leading-none font-medium\">\n          Trending up by 5.2% this month <TrendingUp className=\"h-4 w-4\" />\n        </div>\n        <div className=\"flex items-center gap-2 leading-none text-muted-foreground\">\n          January - June 2024\n        </div>\n      </CardFooter>\n    </Card>\n  )\n}\n",
       "type": "registry:block"
     }
   ],
diff --git a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
index 25edcf1ee9..aaf112b55b 100644
--- a/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
+++ b/apps/v4/public/r/styles/new-york-v4/chart-tooltip-demo.json
@@ -4,7 +4,7 @@
   "files": [
     {
       "path": "registry/new-york-v4/examples/chart-tooltip-demo.tsx",
-      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"hsl(var(--chart-1))\" },\n            { name: \"Mobile\", value: 80, fill: \"hsl(var(--chart-2))\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-3))\" },\n            { name: \"Firefox\", value: 1000, fill: \"hsl(var(--chart-4))\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"hidden! md:flex!\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"hsl(var(--chart-3))\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"items-start! justify-start!\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"hsl(var(--chart-1))\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
+      "content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport default function Component() {\n  return (\n    <div className=\"grid aspect-video w-full max-w-md justify-center text-foreground md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4\">\n      <div>\n        <div className=\"absolute top-[45px] left-[-35px] z-10 text-sm font-medium\">\n          Label\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          viewBox=\"0 0 193 40\"\n          width=\"50\"\n          height=\"12\"\n          fill=\"none\"\n          className=\"absolute top-[50px] left-[5px] z-10\"\n        >\n          <g clipPath=\"url(#a)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M173.928 21.13C115.811 44.938 58.751 45.773 0 26.141c4.227-4.386 7.82-2.715 10.567-1.88 21.133 5.64 42.9 6.266 64.457 7.101 31.066 1.253 60.441-5.848 89.183-17.335 1.268-.418 2.325-1.253 4.861-2.924-14.582-2.924-29.165 2.089-41.845-3.76.212-.835.212-1.879.423-2.714 9.51-.627 19.231-1.253 28.742-2.089 9.51-.835 18.808-1.88 28.318-2.506 6.974-.418 9.933 2.924 7.397 9.19-3.17 8.145-7.608 15.664-11.623 23.391-.423.836-1.057 1.88-1.902 2.298-2.325.835-4.65 1.044-7.186 1.67-.422-2.088-1.479-4.386-1.268-6.265.423-2.506 1.902-4.595 3.804-9.19Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"a\">\n              <path fill=\"currentColor\" d=\"M0 0h193v40H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 186, fill: \"var(--chart-1)\" },\n            { name: \"Mobile\", value: 80, fill: \"var(--chart-2)\" },\n          ]}\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"items-end\">\n        <div className=\"absolute top-[0px] left-[122px] z-10 text-sm font-medium\">\n          Name\n        </div>\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"35\"\n          height=\"42\"\n          fill=\"none\"\n          viewBox=\"0 0 122 148\"\n          className=\"absolute top-[10px] left-[85px] z-10 -scale-x-100\"\n        >\n          <g clipPath=\"url(#ab)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M0 2.65c6.15-4.024 12.299-2.753 17.812-.847a115.56 115.56 0 0 1 21.84 10.59C70.4 32.727 88.849 61.744 96.483 97.54c1.908 9.108 2.544 18.639 3.817 29.017 8.481-4.871 12.934-14.402 21.416-19.909 1.061 4.236-1.06 6.989-2.756 9.319-6.998 9.531-14.207 19.062-21.63 28.382-3.604 4.448-6.36 4.871-10.177 1.059-8.058-7.837-12.935-17.368-14.42-28.382 0-.424.636-1.059 1.485-2.118 9.118 2.33 6.997 13.979 14.843 18.215 3.393-14.614.848-28.593-2.969-42.149-4.029-14.19-9.33-27.746-17.812-39.82-8.27-11.86-18.66-21.392-30.11-30.287C26.93 11.758 14.207 6.039 0 2.65Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"ab\">\n              <path fill=\"currentColor\" d=\"M0 0h122v148H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"var(--chart-3)\" },\n            { name: \"Firefox\", value: 1000, fill: \"var(--chart-4)\" },\n          ]}\n          indicator=\"dashed\"\n          className=\"w-[8rem]\"\n        />\n      </div>\n      <div className=\"hidden! md:flex!\">\n        <TooltipDemo\n          label=\"Page Views\"\n          payload={[\n            { name: \"Desktop\", value: 12486, fill: \"var(--chart-3)\" },\n          ]}\n          className=\"w-[9rem]\"\n          indicator=\"line\"\n        />\n      </div>\n      <div className=\"items-start! justify-start!\">\n        <div className=\"absolute top-[60px] left-[50px] z-10 text-sm font-medium\">\n          Indicator\n        </div>\n        <TooltipDemo\n          label=\"Browser\"\n          hideLabel\n          payload={[\n            { name: \"Chrome\", value: 1286, fill: \"var(--chart-1)\" },\n          ]}\n          indicator=\"dot\"\n          className=\"w-[8rem]\"\n        />\n        <svg\n          xmlns=\"http://www.w3.org/2000/svg\"\n          width=\"15\"\n          height=\"34\"\n          fill=\"none\"\n          viewBox=\"0 0 75 175\"\n          className=\"absolute top-[38px] left-[30px] z-10 rotate-[-40deg]\"\n        >\n          <g clipPath=\"url(#abc)\">\n            <path\n              fill=\"currentColor\"\n              d=\"M20.187 175c-4.439-2.109-7.186-2.531-8.032-4.008-3.17-5.484-6.763-10.968-8.454-17.084-5.073-16.242-4.439-32.694-1.057-49.146 5.707-28.053 18.388-52.942 34.24-76.565 1.692-2.531 3.171-5.063 4.862-7.805 0-.21-.211-.632-.634-1.265-4.65 1.265-9.511 2.53-14.161 3.585-2.537.422-5.496.422-8.032-.421-1.48-.422-3.593-2.742-3.593-4.219 0-1.898 1.48-4.218 2.747-5.906 1.057-1.054 2.96-1.265 4.65-1.687C35.406 7.315 48.088 3.729 60.98.776c10.99-2.53 14.584 1.055 13.95 11.812-.634 11.18-.846 22.358-1.268 33.326-.212 3.375-.846 6.96-1.268 10.757-8.878-4.007-8.878-4.007-12.048-38.177C47.03 33.259 38.153 49.289 29.91 65.741 21.667 82.193 16.17 99.49 13.212 117.84c-2.959 18.984.634 36.912 6.975 57.161Z\"\n            />\n          </g>\n          <defs>\n            <clipPath id=\"abc\">\n              <path fill=\"currentColor\" d=\"M0 0h75v175H0z\" />\n            </clipPath>\n          </defs>\n        </svg>\n      </div>\n    </div>\n  )\n}\n\nfunction TooltipDemo({\n  indicator = \"dot\",\n  label,\n  payload,\n  hideLabel,\n  hideIndicator,\n  className,\n}: {\n  label: string\n  hideLabel?: boolean\n  hideIndicator?: boolean\n  indicator?: \"line\" | \"dot\" | \"dashed\"\n  payload: {\n    name: string\n    value: number\n    fill: string\n  }[]\n  nameKey?: string\n  labelKey?: string\n} & React.ComponentProps<\"div\">) {\n  const tooltipLabel = hideLabel ? null : (\n    <div className=\"font-medium\">{label}</div>\n  )\n\n  if (!payload?.length) {\n    return null\n  }\n\n  const nestLabel = payload.length === 1 && indicator !== \"dot\"\n\n  return (\n    <div\n      className={cn(\n        \"grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl transition-all ease-in-out hover:-translate-y-0.5\",\n        className\n      )}\n    >\n      {!nestLabel ? tooltipLabel : null}\n      <div className=\"grid gap-1.5\">\n        {payload.map((item, index) => {\n          const indicatorColor = item.fill\n\n          return (\n            <div\n              key={index}\n              className={cn(\n                \"flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground\",\n                indicator === \"dot\" && \"items-center\"\n              )}\n            >\n              <>\n                {!hideIndicator && (\n                  <div\n                    className={cn(\n                      \"shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)\",\n                      {\n                        \"h-2.5 w-2.5\": indicator === \"dot\",\n                        \"w-1\": indicator === \"line\",\n                        \"w-0 border-[1.5px] border-dashed bg-transparent\":\n                          indicator === \"dashed\",\n                        \"my-0.5\": nestLabel && indicator === \"dashed\",\n                      }\n                    )}\n                    style={\n                      {\n                        \"--color-bg\": indicatorColor,\n                        \"--color-border\": indicatorColor,\n                      } as React.CSSProperties\n                    }\n                  />\n                )}\n                <div\n                  className={cn(\n                    \"flex flex-1 justify-between leading-none\",\n                    nestLabel ? \"items-end\" : \"items-center\"\n                  )}\n                >\n                  <div className=\"grid gap-1.5\">\n                    {nestLabel ? tooltipLabel : null}\n                    <span className=\"text-muted-foreground\">{item.name}</span>\n                  </div>\n                  <span className=\"font-mono font-medium text-foreground tabular-nums\">\n                    {item.value.toLocaleString()}\n                  </span>\n                </div>\n              </>\n            </div>\n          )\n        })}\n      </div>\n    </div>\n  )\n}\n",
       "type": "registry:example"
     }
   ],
diff --git a/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
index addae4e95b..465c78c2a8 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-pie-label-custom.tsx
@@ -83,7 +83,7 @@ export function ChartPieLabelCustom() {
                     y={props.y}
                     textAnchor={props.textAnchor}
                     dominantBaseline={props.dominantBaseline}
-                    fill="hsla(var(--foreground))"
+                    fill="var(--foreground)"
                   >
                     {payload.visitors}
                   </text>
diff --git a/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
index e6b66e2c2e..61f29bb5b8 100644
--- a/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
+++ b/apps/v4/registry/new-york-v4/charts/chart-radar-radius.tsx
@@ -76,7 +76,7 @@ export function ChartRadarRadius() {
             <Radar dataKey="mobile" fill="var(--color-mobile)" />
             <PolarRadiusAxis
               angle={60}
-              stroke="hsla(var(--foreground))"
+              stroke="var(--foreground)"
               orientation="middle"
               axisLine={false}
             />
diff --git a/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
index 5e3e0492c4..5b4a31ae66 100644
--- a/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
+++ b/apps/v4/registry/new-york-v4/examples/chart-tooltip-demo.tsx
@@ -34,8 +34,8 @@ export default function Component() {
         <TooltipDemo
           label="Page Views"
           payload={[
-            { name: "Desktop", value: 186, fill: "hsl(var(--chart-1))" },
-            { name: "Mobile", value: 80, fill: "hsl(var(--chart-2))" },
+            { name: "Desktop", value: 186, fill: "var(--chart-1)" },
+            { name: "Mobile", value: 80, fill: "var(--chart-2)" },
           ]}
           className="w-[8rem]"
         />
@@ -68,8 +68,8 @@ export default function Component() {
           label="Browser"
           hideLabel
           payload={[
-            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-3))" },
-            { name: "Firefox", value: 1000, fill: "hsl(var(--chart-4))" },
+            { name: "Chrome", value: 1286, fill: "var(--chart-3)" },
+            { name: "Firefox", value: 1000, fill: "var(--chart-4)" },
           ]}
           indicator="dashed"
           className="w-[8rem]"
@@ -78,9 +78,7 @@ export default function Component() {
       <div className="hidden! md:flex!">
         <TooltipDemo
           label="Page Views"
-          payload={[
-            { name: "Desktop", value: 12486, fill: "hsl(var(--chart-3))" },
-          ]}
+          payload={[{ name: "Desktop", value: 12486, fill: "var(--chart-3)" }]}
           className="w-[9rem]"
           indicator="line"
         />
@@ -92,9 +90,7 @@ export default function Component() {
         <TooltipDemo
           label="Browser"
           hideLabel
-          payload={[
-            { name: "Chrome", value: 1286, fill: "hsl(var(--chart-1))" },
-          ]}
+          payload={[{ name: "Chrome", value: 1286, fill: "var(--chart-1)" }]}
           indicator="dot"
           className="w-[8rem]"
         />
@@ -177,7 +173,7 @@ function TooltipDemo({
                 {!hideIndicator && (
                   <div
                     className={cn(
-                      "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                      "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
                       {
                         "h-2.5 w-2.5": indicator === "dot",
                         "w-1": indicator === "line",