From 3f62e7dee0d54ac407f258571a5483ad5ad4e640 Mon Sep 17 00:00:00 2001
From: shadcn <m@shadcn.com>
Date: Thu, 15 Jan 2026 10:26:46 +0400
Subject: [PATCH] fix: chart

---
 .../v4/content/docs/components/base/chart.mdx | 107 +++----
 .../content/docs/components/radix/chart.mdx   | 107 +++----
 apps/v4/examples/__index__.tsx                | 270 +++++-------------
 apps/v4/examples/base/chart-area-example.tsx  |  90 ------
 apps/v4/examples/base/chart-bar-example.tsx   |  75 -----
 apps/v4/examples/base/chart-demo.tsx          | 160 +++++++++++
 ...r-demo-axis.tsx => chart-example-axis.tsx} |   0
 ...r-demo-grid.tsx => chart-example-grid.tsx} |   0
 ...mo-legend.tsx => chart-example-legend.tsx} |   0
 ...-tooltip.tsx => chart-example-tooltip.tsx} |   0
 .../{chart-bar-demo.tsx => chart-example.tsx} |   2 +-
 apps/v4/examples/base/chart-line-example.tsx  |  96 -------
 apps/v4/examples/base/chart-pie-example.tsx   | 126 --------
 apps/v4/examples/base/chart-radar-example.tsx |  78 -----
 .../v4/examples/base/chart-radial-example.tsx | 103 -------
 ...art-tooltip-demo.tsx => chart-tooltip.tsx} |  18 +-
 apps/v4/examples/radix/chart-area-example.tsx |  90 ------
 apps/v4/examples/radix/chart-bar-example.tsx  |  75 -----
 apps/v4/examples/radix/chart-demo.tsx         | 160 +++++++++++
 ...r-demo-axis.tsx => chart-example-axis.tsx} |   0
 ...r-demo-grid.tsx => chart-example-grid.tsx} |   0
 ...mo-legend.tsx => chart-example-legend.tsx} |   0
 ...-tooltip.tsx => chart-example-tooltip.tsx} |   0
 .../{chart-bar-demo.tsx => chart-example.tsx} |   2 +-
 apps/v4/examples/radix/chart-line-example.tsx |  96 -------
 apps/v4/examples/radix/chart-pie-example.tsx  | 126 --------
 .../v4/examples/radix/chart-radar-example.tsx |  78 -----
 .../examples/radix/chart-radial-example.tsx   | 103 -------
 ...art-tooltip-demo.tsx => chart-tooltip.tsx} |  18 +-
 apps/v4/mdx-components.tsx                    |   2 +-
 apps/v4/styles/globals.css                    |   2 +-
 31 files changed, 482 insertions(+), 1502 deletions(-)
 delete mode 100644 apps/v4/examples/base/chart-area-example.tsx
 delete mode 100644 apps/v4/examples/base/chart-bar-example.tsx
 create mode 100644 apps/v4/examples/base/chart-demo.tsx
 rename apps/v4/examples/base/{chart-bar-demo-axis.tsx => chart-example-axis.tsx} (100%)
 rename apps/v4/examples/base/{chart-bar-demo-grid.tsx => chart-example-grid.tsx} (100%)
 rename apps/v4/examples/base/{chart-bar-demo-legend.tsx => chart-example-legend.tsx} (100%)
 rename apps/v4/examples/base/{chart-bar-demo-tooltip.tsx => chart-example-tooltip.tsx} (100%)
 rename apps/v4/examples/base/{chart-bar-demo.tsx => chart-example.tsx} (96%)
 delete mode 100644 apps/v4/examples/base/chart-line-example.tsx
 delete mode 100644 apps/v4/examples/base/chart-pie-example.tsx
 delete mode 100644 apps/v4/examples/base/chart-radar-example.tsx
 delete mode 100644 apps/v4/examples/base/chart-radial-example.tsx
 rename apps/v4/examples/base/{chart-tooltip-demo.tsx => chart-tooltip.tsx} (93%)
 delete mode 100644 apps/v4/examples/radix/chart-area-example.tsx
 delete mode 100644 apps/v4/examples/radix/chart-bar-example.tsx
 create mode 100644 apps/v4/examples/radix/chart-demo.tsx
 rename apps/v4/examples/radix/{chart-bar-demo-axis.tsx => chart-example-axis.tsx} (100%)
 rename apps/v4/examples/radix/{chart-bar-demo-grid.tsx => chart-example-grid.tsx} (100%)
 rename apps/v4/examples/radix/{chart-bar-demo-legend.tsx => chart-example-legend.tsx} (100%)
 rename apps/v4/examples/radix/{chart-bar-demo-tooltip.tsx => chart-example-tooltip.tsx} (100%)
 rename apps/v4/examples/radix/{chart-bar-demo.tsx => chart-example.tsx} (96%)
 delete mode 100644 apps/v4/examples/radix/chart-line-example.tsx
 delete mode 100644 apps/v4/examples/radix/chart-pie-example.tsx
 delete mode 100644 apps/v4/examples/radix/chart-radar-example.tsx
 delete mode 100644 apps/v4/examples/radix/chart-radial-example.tsx
 rename apps/v4/examples/radix/{chart-tooltip-demo.tsx => chart-tooltip.tsx} (93%)

diff --git a/apps/v4/content/docs/components/base/chart.mdx b/apps/v4/content/docs/components/base/chart.mdx
index 221b058ea1..4bdb76a602 100644
--- a/apps/v4/content/docs/components/base/chart.mdx
+++ b/apps/v4/content/docs/components/base/chart.mdx
@@ -13,7 +13,7 @@ component: true
 
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-interactive"
+  name="chart-demo"
   className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
   hideCode
 />
@@ -53,12 +53,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 ## Installation
 
-<Callout className="mt-4">
-
-**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
-
-</Callout>
-
 <CodeTabs>
 
 <TabsList>
@@ -67,38 +61,10 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 </TabsList>
 <TabsContent value="cli">
 
-<Steps className="mb-0 pt-2">
-
-<Step>Run the following command to install `chart.tsx`</Step>
-
 ```bash
 npx shadcn@latest add chart
 ```
 
-<Step>Add the following colors to your CSS file</Step>
-
-```css title="app/globals.css" showLineNumbers
-@layer base {
-  :root {
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-  }
-
-  .dark {
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-  }
-}
-```
-
-</Steps>
-
 </TabsContent>
 
 <TabsContent value="manual">
@@ -151,7 +117,7 @@ npm install recharts
 
 Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
 
-<Steps className="mb-0 pt-2">
+<Steps>
 
 <Step>Start by defining your data</Step>
 
@@ -203,16 +169,10 @@ You can now build your chart using Recharts components.
 
 </Callout>
 
-<ComponentSource
-  name="chart-bar-demo"
-  title="components/example-chart.tsx"
-  styleName="base-nova"
-/>
-
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-demo"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -243,8 +203,8 @@ import { Bar, BarChart, CartesianGrid } from "recharts"
 
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-demo-grid"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-grid"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -282,8 +242,8 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-demo-axis"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-axis"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -324,8 +284,8 @@ import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-demo-tooltip"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-tooltip"
+  previewClassName="h-80"
 />
 
 Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
@@ -367,8 +327,8 @@ import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
 
 <ComponentPreview
   styleName="base-nova"
-  name="chart-bar-demo-legend"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-legend"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -417,7 +377,7 @@ Charts have built-in support for theming. You can use css variables (recommended
 
 <Step>Define your colors in your css file</Step>
 
-```css {6-7,14-15} title="app/globals.css" showLineNumbers
+```css title="app/globals.css" showLineNumbers
 @layer base {
   :root {
     --chart-1: oklch(0.646 0.222 41.116);
@@ -433,7 +393,7 @@ Charts have built-in support for theming. You can use css variables (recommended
 
 <Step>Add the color to your `chartConfig`</Step>
 
-```tsx {4,8} showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartConfig = {
   desktop: {
     label: "Desktop",
@@ -452,12 +412,24 @@ const chartConfig = {
 
 You can also define your colors directly in the chart config. Use the color format you prefer.
 
-```tsx showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartConfig = {
   desktop: {
     label: "Desktop",
     color: "#2563eb",
   },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(220, 98%, 61%)",
+  },
+  tablet: {
+    label: "Tablet",
+    color: "oklch(0.5 0.2 240)",
+  },
+  laptop: {
+    label: "Laptop",
+    color: "var(--chart-2)",
+  },
 } satisfies ChartConfig
 ```
 
@@ -473,7 +445,7 @@ To use the theme colors in your chart, reference the colors using the format `va
 
 #### Chart Data
 
-```tsx showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartData = [
   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
@@ -482,7 +454,7 @@ const chartData = [
 
 #### Tailwind
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <LabelList className="fill-[--color-desktop]" />
 ```
 
@@ -490,12 +462,7 @@ const chartData = [
 
 A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
 
-<ComponentPreview
-  styleName="base-nova"
-  name="chart-tooltip-demo"
-  className="[&_.preview]:py-0"
-  hideCode
-/>
+<ComponentPreview styleName="base-nova" name="chart-tooltip" hideCode />
 
 You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
 
@@ -503,11 +470,11 @@ Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
 
 Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartTooltip content={<ChartTooltipContent />} />
 ```
 
@@ -552,7 +519,7 @@ const chartConfig = {
 } satisfies ChartConfig
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartTooltip
   content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
 />
@@ -564,11 +531,11 @@ This will use `Total Visitors` for label and `Chrome` and `Safari` for the toolt
 
 You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartLegend content={<ChartLegendContent />} />
 ```
 
@@ -598,7 +565,7 @@ const chartConfig = {
 } satisfies ChartConfig
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
 ```
 
@@ -610,6 +577,6 @@ You can turn on the `accessibilityLayer` prop to add an accessible layer to your
 
 This prop adds keyboard access and screen reader support to your charts.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <LineChart accessibilityLayer />
 ```
diff --git a/apps/v4/content/docs/components/radix/chart.mdx b/apps/v4/content/docs/components/radix/chart.mdx
index 8be37f6c18..1dd1d0edf4 100644
--- a/apps/v4/content/docs/components/radix/chart.mdx
+++ b/apps/v4/content/docs/components/radix/chart.mdx
@@ -13,7 +13,7 @@ component: true
 
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-interactive"
+  name="chart-demo"
   className="theme-blue [&_.preview]:h-auto [&_.preview]:p-0 [&_.preview]:lg:min-h-[404px] [&_.preview>div]:w-full [&_.preview>div]:border-none [&_.preview>div]:shadow-none"
   hideCode
 />
@@ -53,12 +53,6 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 
 ## Installation
 
-<Callout className="mt-4">
-
-**Note:** If you are using charts with **React 19** or the **Next.js 15**, see the note [here](/docs/react-19#recharts).
-
-</Callout>
-
 <CodeTabs>
 
 <TabsList>
@@ -67,38 +61,10 @@ We do not wrap Recharts. This means you're not locked into an abstraction. When
 </TabsList>
 <TabsContent value="cli">
 
-<Steps className="mb-0 pt-2">
-
-<Step>Run the following command to install `chart.tsx`</Step>
-
 ```bash
 npx shadcn@latest add chart
 ```
 
-<Step>Add the following colors to your CSS file</Step>
-
-```css title="app/globals.css" showLineNumbers
-@layer base {
-  :root {
-    --chart-1: oklch(0.646 0.222 41.116);
-    --chart-2: oklch(0.6 0.118 184.704);
-    --chart-3: oklch(0.398 0.07 227.392);
-    --chart-4: oklch(0.828 0.189 84.429);
-    --chart-5: oklch(0.769 0.188 70.08);
-  }
-
-  .dark {
-    --chart-1: oklch(0.488 0.243 264.376);
-    --chart-2: oklch(0.696 0.17 162.48);
-    --chart-3: oklch(0.769 0.188 70.08);
-    --chart-4: oklch(0.627 0.265 303.9);
-    --chart-5: oklch(0.645 0.246 16.439);
-  }
-}
-```
-
-</Steps>
-
 </TabsContent>
 
 <TabsContent value="manual">
@@ -151,7 +117,7 @@ npm install recharts
 
 Let's build your first chart. We'll build a bar chart, add a grid, axis, tooltip and legend.
 
-<Steps className="mb-0 pt-2">
+<Steps>
 
 <Step>Start by defining your data</Step>
 
@@ -203,16 +169,10 @@ You can now build your chart using Recharts components.
 
 </Callout>
 
-<ComponentSource
-  name="chart-bar-demo"
-  title="components/example-chart.tsx"
-  styleName="radix-nova"
-/>
-
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-demo"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -243,8 +203,8 @@ import { Bar, BarChart, CartesianGrid } from "recharts"
 
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-demo-grid"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-grid"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -282,8 +242,8 @@ import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
 
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-demo-axis"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-axis"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -324,8 +284,8 @@ import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-demo-tooltip"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-tooltip"
+  previewClassName="h-80"
 />
 
 Hover to see the tooltips. Easy, right? Two components, and we've got a beautiful tooltip.
@@ -367,8 +327,8 @@ import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
 
 <ComponentPreview
   styleName="radix-nova"
-  name="chart-bar-demo-legend"
-  className="[&_.preview]:min-h-[250px] [&_.preview]:p-4"
+  name="chart-example-legend"
+  previewClassName="h-80"
 />
 
 </Steps>
@@ -417,7 +377,7 @@ Charts have built-in support for theming. You can use css variables (recommended
 
 <Step>Define your colors in your css file</Step>
 
-```css {6-7,14-15} title="app/globals.css" showLineNumbers
+```css title="app/globals.css" showLineNumbers
 @layer base {
   :root {
     --chart-1: oklch(0.646 0.222 41.116);
@@ -433,7 +393,7 @@ Charts have built-in support for theming. You can use css variables (recommended
 
 <Step>Add the color to your `chartConfig`</Step>
 
-```tsx {4,8} showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartConfig = {
   desktop: {
     label: "Desktop",
@@ -452,12 +412,24 @@ const chartConfig = {
 
 You can also define your colors directly in the chart config. Use the color format you prefer.
 
-```tsx showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartConfig = {
   desktop: {
     label: "Desktop",
     color: "#2563eb",
   },
+  mobile: {
+    label: "Mobile",
+    color: "hsl(220, 98%, 61%)",
+  },
+  tablet: {
+    label: "Tablet",
+    color: "oklch(0.5 0.2 240)",
+  },
+  laptop: {
+    label: "Laptop",
+    color: "var(--chart-2)",
+  },
 } satisfies ChartConfig
 ```
 
@@ -473,7 +445,7 @@ To use the theme colors in your chart, reference the colors using the format `va
 
 #### Chart Data
 
-```tsx showLineNumbers
+```tsx title="components/example-chart.tsx" showLineNumbers
 const chartData = [
   { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
   { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
@@ -482,7 +454,7 @@ const chartData = [
 
 #### Tailwind
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <LabelList className="fill-[--color-desktop]" />
 ```
 
@@ -490,12 +462,7 @@ const chartData = [
 
 A chart tooltip contains a label, name, indicator and value. You can use a combination of these to customize your tooltip.
 
-<ComponentPreview
-  styleName="radix-nova"
-  name="chart-tooltip-demo"
-  className="[&_.preview]:py-0"
-  hideCode
-/>
+<ComponentPreview styleName="radix-nova" name="chart-tooltip" hideCode />
 
 You can turn on/off any of these using the `hideLabel`, `hideIndicator` props and customize the indicator style using the `indicator` prop.
 
@@ -503,11 +470,11 @@ Use `labelKey` and `nameKey` to use a custom key for the tooltip label and name.
 
 Chart comes with the `<ChartTooltip>` and `<ChartTooltipContent>` components. You can use these two components to add custom tooltips to your chart.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 import { ChartTooltip, ChartTooltipContent } from "@/components/ui/chart"
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartTooltip content={<ChartTooltipContent />} />
 ```
 
@@ -552,7 +519,7 @@ const chartConfig = {
 } satisfies ChartConfig
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartTooltip
   content={<ChartTooltipContent labelKey="visitors" nameKey="browser" />}
 />
@@ -564,11 +531,11 @@ This will use `Total Visitors` for label and `Chrome` and `Safari` for the toolt
 
 You can use the custom `<ChartLegend>` and `<ChartLegendContent>` components to add a legend to your chart.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 import { ChartLegend, ChartLegendContent } from "@/components/ui/chart"
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartLegend content={<ChartLegendContent />} />
 ```
 
@@ -598,7 +565,7 @@ const chartConfig = {
 } satisfies ChartConfig
 ```
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <ChartLegend content={<ChartLegendContent nameKey="browser" />} />
 ```
 
@@ -610,6 +577,6 @@ You can turn on the `accessibilityLayer` prop to add an accessible layer to your
 
 This prop adds keyboard access and screen reader support to your charts.
 
-```tsx
+```tsx title="components/example-chart.tsx"
 <LineChart accessibilityLayer />
 ```
diff --git a/apps/v4/examples/__index__.tsx b/apps/v4/examples/__index__.tsx
index aab868addd..157085093c 100644
--- a/apps/v4/examples/__index__.tsx
+++ b/apps/v4/examples/__index__.tsx
@@ -1123,159 +1123,94 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-area-example": {
-      name: "chart-area-example",
-      filePath: "examples/radix/chart-area-example.tsx",
+    "chart-demo": {
+      name: "chart-demo",
+      filePath: "examples/radix/chart-demo.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-area-example")
+        const mod = await import("./radix/chart-demo")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-area-example"
+          ) || "chart-demo"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
-      filePath: "examples/radix/chart-bar-demo-axis.tsx",
+    "chart-example-axis": {
+      name: "chart-example-axis",
+      filePath: "examples/radix/chart-example-axis.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-demo-axis")
+        const mod = await import("./radix/chart-example-axis")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-axis"
+          ) || "chart-example-axis"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
-      filePath: "examples/radix/chart-bar-demo-grid.tsx",
+    "chart-example-grid": {
+      name: "chart-example-grid",
+      filePath: "examples/radix/chart-example-grid.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-demo-grid")
+        const mod = await import("./radix/chart-example-grid")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-grid"
+          ) || "chart-example-grid"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
-      filePath: "examples/radix/chart-bar-demo-legend.tsx",
+    "chart-example-legend": {
+      name: "chart-example-legend",
+      filePath: "examples/radix/chart-example-legend.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-demo-legend")
+        const mod = await import("./radix/chart-example-legend")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-legend"
+          ) || "chart-example-legend"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
-      filePath: "examples/radix/chart-bar-demo-tooltip.tsx",
+    "chart-example-tooltip": {
+      name: "chart-example-tooltip",
+      filePath: "examples/radix/chart-example-tooltip.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-demo-tooltip")
+        const mod = await import("./radix/chart-example-tooltip")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-tooltip"
+          ) || "chart-example-tooltip"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
-      filePath: "examples/radix/chart-bar-demo.tsx",
+    "chart-example": {
+      name: "chart-example",
+      filePath: "examples/radix/chart-example.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-demo")
+        const mod = await import("./radix/chart-example")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo"
+          ) || "chart-example"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-example": {
-      name: "chart-bar-example",
-      filePath: "examples/radix/chart-bar-example.tsx",
+    "chart-tooltip": {
+      name: "chart-tooltip",
+      filePath: "examples/radix/chart-tooltip.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./radix/chart-bar-example")
+        const mod = await import("./radix/chart-tooltip")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-line-example": {
-      name: "chart-line-example",
-      filePath: "examples/radix/chart-line-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/chart-line-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-line-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-pie-example": {
-      name: "chart-pie-example",
-      filePath: "examples/radix/chart-pie-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/chart-pie-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-pie-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-radar-example": {
-      name: "chart-radar-example",
-      filePath: "examples/radix/chart-radar-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/chart-radar-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-radar-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-radial-example": {
-      name: "chart-radial-example",
-      filePath: "examples/radix/chart-radial-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/chart-radial-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-radial-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
-      filePath: "examples/radix/chart-tooltip-demo.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./radix/chart-tooltip-demo")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-tooltip-demo"
+          ) || "chart-tooltip"
         return { default: mod.default || mod[exportName] }
       }),
     },
@@ -7822,159 +7757,94 @@ export const ExamplesIndex: Record<string, Record<string, any>> = {
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-area-example": {
-      name: "chart-area-example",
-      filePath: "examples/base/chart-area-example.tsx",
+    "chart-demo": {
+      name: "chart-demo",
+      filePath: "examples/base/chart-demo.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-area-example")
+        const mod = await import("./base/chart-demo")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-area-example"
+          ) || "chart-demo"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-axis": {
-      name: "chart-bar-demo-axis",
-      filePath: "examples/base/chart-bar-demo-axis.tsx",
+    "chart-example-axis": {
+      name: "chart-example-axis",
+      filePath: "examples/base/chart-example-axis.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-demo-axis")
+        const mod = await import("./base/chart-example-axis")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-axis"
+          ) || "chart-example-axis"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-grid": {
-      name: "chart-bar-demo-grid",
-      filePath: "examples/base/chart-bar-demo-grid.tsx",
+    "chart-example-grid": {
+      name: "chart-example-grid",
+      filePath: "examples/base/chart-example-grid.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-demo-grid")
+        const mod = await import("./base/chart-example-grid")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-grid"
+          ) || "chart-example-grid"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-legend": {
-      name: "chart-bar-demo-legend",
-      filePath: "examples/base/chart-bar-demo-legend.tsx",
+    "chart-example-legend": {
+      name: "chart-example-legend",
+      filePath: "examples/base/chart-example-legend.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-demo-legend")
+        const mod = await import("./base/chart-example-legend")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-legend"
+          ) || "chart-example-legend"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo-tooltip": {
-      name: "chart-bar-demo-tooltip",
-      filePath: "examples/base/chart-bar-demo-tooltip.tsx",
+    "chart-example-tooltip": {
+      name: "chart-example-tooltip",
+      filePath: "examples/base/chart-example-tooltip.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-demo-tooltip")
+        const mod = await import("./base/chart-example-tooltip")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo-tooltip"
+          ) || "chart-example-tooltip"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-demo": {
-      name: "chart-bar-demo",
-      filePath: "examples/base/chart-bar-demo.tsx",
+    "chart-example": {
+      name: "chart-example",
+      filePath: "examples/base/chart-example.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-demo")
+        const mod = await import("./base/chart-example")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-demo"
+          ) || "chart-example"
         return { default: mod.default || mod[exportName] }
       }),
     },
-    "chart-bar-example": {
-      name: "chart-bar-example",
-      filePath: "examples/base/chart-bar-example.tsx",
+    "chart-tooltip": {
+      name: "chart-tooltip",
+      filePath: "examples/base/chart-tooltip.tsx",
       component: React.lazy(async () => {
-        const mod = await import("./base/chart-bar-example")
+        const mod = await import("./base/chart-tooltip")
         const exportName =
           Object.keys(mod).find(
             (key) =>
               typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-bar-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-line-example": {
-      name: "chart-line-example",
-      filePath: "examples/base/chart-line-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/chart-line-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-line-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-pie-example": {
-      name: "chart-pie-example",
-      filePath: "examples/base/chart-pie-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/chart-pie-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-pie-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-radar-example": {
-      name: "chart-radar-example",
-      filePath: "examples/base/chart-radar-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/chart-radar-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-radar-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-radial-example": {
-      name: "chart-radial-example",
-      filePath: "examples/base/chart-radial-example.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/chart-radial-example")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-radial-example"
-        return { default: mod.default || mod[exportName] }
-      }),
-    },
-    "chart-tooltip-demo": {
-      name: "chart-tooltip-demo",
-      filePath: "examples/base/chart-tooltip-demo.tsx",
-      component: React.lazy(async () => {
-        const mod = await import("./base/chart-tooltip-demo")
-        const exportName =
-          Object.keys(mod).find(
-            (key) =>
-              typeof mod[key] === "function" || typeof mod[key] === "object"
-          ) || "chart-tooltip-demo"
+          ) || "chart-tooltip"
         return { default: mod.default || mod[exportName] }
       }),
     },
diff --git a/apps/v4/examples/base/chart-area-example.tsx b/apps/v4/examples/base/chart-area-example.tsx
deleted file mode 100644
index cdc348f1d7..0000000000
--- a/apps/v4/examples/base/chart-area-example.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-const areaChartData = [
-  { month: "January", desktop: 186 },
-  { month: "February", desktop: 305 },
-  { month: "March", desktop: 237 },
-  { month: "April", desktop: 73 },
-  { month: "May", desktop: 209 },
-  { month: "June", desktop: 214 },
-]
-
-const areaChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig
-
-export function ChartAreaExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Area Chart</CardTitle>
-        <CardDescription>
-          Showing total visitors for the last 6 months
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={areaChartConfig}>
-          <AreaChart
-            accessibilityLayer
-            data={areaChartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="var(--color-desktop)"
-              fillOpacity={0.4}
-              stroke="var(--color-desktop)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month{" "}
-              <TrendingUpIcon className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-              January - June 2024
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-bar-example.tsx b/apps/v4/examples/base/chart-bar-example.tsx
deleted file mode 100644
index bfcc0e168b..0000000000
--- a/apps/v4/examples/base/chart-bar-example.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-
-const barChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const barChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartBarExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Bar Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={barChartConfig}>
-          <BarChart accessibilityLayer data={barChartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="dashed" />}
-            />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-demo.tsx b/apps/v4/examples/base/chart-demo.tsx
new file mode 100644
index 0000000000..a74be7d3ce
--- /dev/null
+++ b/apps/v4/examples/base/chart-demo.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartDemo() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card className="py-0 pb-4">
+      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-muted-foreground text-xs">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg leading-none font-bold sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/base/chart-bar-demo-axis.tsx b/apps/v4/examples/base/chart-example-axis.tsx
similarity index 100%
rename from apps/v4/examples/base/chart-bar-demo-axis.tsx
rename to apps/v4/examples/base/chart-example-axis.tsx
diff --git a/apps/v4/examples/base/chart-bar-demo-grid.tsx b/apps/v4/examples/base/chart-example-grid.tsx
similarity index 100%
rename from apps/v4/examples/base/chart-bar-demo-grid.tsx
rename to apps/v4/examples/base/chart-example-grid.tsx
diff --git a/apps/v4/examples/base/chart-bar-demo-legend.tsx b/apps/v4/examples/base/chart-example-legend.tsx
similarity index 100%
rename from apps/v4/examples/base/chart-bar-demo-legend.tsx
rename to apps/v4/examples/base/chart-example-legend.tsx
diff --git a/apps/v4/examples/base/chart-bar-demo-tooltip.tsx b/apps/v4/examples/base/chart-example-tooltip.tsx
similarity index 100%
rename from apps/v4/examples/base/chart-bar-demo-tooltip.tsx
rename to apps/v4/examples/base/chart-example-tooltip.tsx
diff --git a/apps/v4/examples/base/chart-bar-demo.tsx b/apps/v4/examples/base/chart-example.tsx
similarity index 96%
rename from apps/v4/examples/base/chart-bar-demo.tsx
rename to apps/v4/examples/base/chart-example.tsx
index 959094d724..061aa397fb 100644
--- a/apps/v4/examples/base/chart-bar-demo.tsx
+++ b/apps/v4/examples/base/chart-example.tsx
@@ -23,7 +23,7 @@ const chartConfig = {
   },
 } satisfies ChartConfig
 
-export function ChartBarDemo() {
+export function ChartExample() {
   return (
     <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
       <BarChart accessibilityLayer data={chartData}>
diff --git a/apps/v4/examples/base/chart-line-example.tsx b/apps/v4/examples/base/chart-line-example.tsx
deleted file mode 100644
index 35bfc7c804..0000000000
--- a/apps/v4/examples/base/chart-line-example.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
-
-const lineChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const lineChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartLineExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Line Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={lineChartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={lineChartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            <Line
-              dataKey="desktop"
-              type="monotone"
-              stroke="var(--color-desktop)"
-              strokeWidth={2}
-              dot={false}
-            />
-            <Line
-              dataKey="mobile"
-              type="monotone"
-              stroke="var(--color-mobile)"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month{" "}
-              <TrendingUpIcon className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-              Showing total visitors for the last 6 months
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-pie-example.tsx b/apps/v4/examples/base/chart-pie-example.tsx
deleted file mode 100644
index 0307d5fab7..0000000000
--- a/apps/v4/examples/base/chart-pie-example.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Label, Pie, PieChart } from "recharts"
-
-const pieChartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 190, fill: "var(--color-other)" },
-]
-
-const pieChartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "var(--chart-1)",
-  },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "var(--chart-3)",
-  },
-  edge: {
-    label: "Edge",
-    color: "var(--chart-4)",
-  },
-  other: {
-    label: "Other",
-    color: "var(--chart-5)",
-  },
-} satisfies ChartConfig
-
-export function ChartPieExample() {
-  const totalVisitors = React.useMemo(() => {
-    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
-  }, [])
-
-  return (
-    <Card className="w-full">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Donut with Text</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={pieChartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Pie
-              data={pieChartData}
-              dataKey="visitors"
-              nameKey="browser"
-              innerRadius={60}
-              strokeWidth={5}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                        >
-                          {totalVisitors.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          Visitors
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-radar-example.tsx b/apps/v4/examples/base/chart-radar-example.tsx
deleted file mode 100644
index 26aac61960..0000000000
--- a/apps/v4/examples/base/chart-radar-example.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-
-const radarChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const radarChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartRadarExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader className="items-center pb-4">
-        <CardTitle>Radar Chart - Multiple</CardTitle>
-        <CardDescription>
-          Showing total visitors for the last 6 months
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-0">
-        <ChartContainer
-          config={radarChartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <RadarChart data={radarChartData}>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
-            <PolarAngleAxis dataKey="month" />
-            <PolarGrid />
-            <Radar
-              dataKey="desktop"
-              fill="var(--color-desktop)"
-              fillOpacity={0.6}
-            />
-            <Radar dataKey="mobile" fill="var(--color-mobile)" />
-          </RadarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
-          January - June 2024
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-radial-example.tsx b/apps/v4/examples/base/chart-radial-example.tsx
deleted file mode 100644
index f197af0413..0000000000
--- a/apps/v4/examples/base/chart-radial-example.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/base/ui/card"
-import { ChartContainer, type ChartConfig } from "@/examples/base/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import {
-  Label,
-  PolarGrid,
-  PolarRadiusAxis,
-  RadialBar,
-  RadialBarChart,
-} from "recharts"
-
-const radialChartData = [
-  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
-]
-
-const radialChartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartRadialExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Radial Chart - Shape</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={radialChartConfig}
-          className="mx-auto aspect-square max-h-[210px]"
-        >
-          <RadialBarChart
-            data={radialChartData}
-            endAngle={100}
-            innerRadius={80}
-            outerRadius={140}
-          >
-            <PolarGrid
-              gridType="circle"
-              radialLines={false}
-              stroke="none"
-              className="first:fill-muted last:fill-background"
-              polarRadius={[86, 74]}
-            />
-            <RadialBar dataKey="visitors" background />
-            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-4xl font-bold"
-                        >
-                          {radialChartData[0].visitors.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          Visitors
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </PolarRadiusAxis>
-          </RadialBarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/base/chart-tooltip-demo.tsx b/apps/v4/examples/base/chart-tooltip.tsx
similarity index 93%
rename from apps/v4/examples/base/chart-tooltip-demo.tsx
rename to apps/v4/examples/base/chart-tooltip.tsx
index 483a0df986..ea524211ef 100644
--- a/apps/v4/examples/base/chart-tooltip-demo.tsx
+++ b/apps/v4/examples/base/chart-tooltip.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export default function Component() {
+export function ChartTooltipDemo() {
   return (
     <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
       <div>
@@ -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]"
         />
diff --git a/apps/v4/examples/radix/chart-area-example.tsx b/apps/v4/examples/radix/chart-area-example.tsx
deleted file mode 100644
index d2aeffc77f..0000000000
--- a/apps/v4/examples/radix/chart-area-example.tsx
+++ /dev/null
@@ -1,90 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Area, AreaChart, CartesianGrid, XAxis } from "recharts"
-
-const areaChartData = [
-  { month: "January", desktop: 186 },
-  { month: "February", desktop: 305 },
-  { month: "March", desktop: 237 },
-  { month: "April", desktop: 73 },
-  { month: "May", desktop: 209 },
-  { month: "June", desktop: 214 },
-]
-
-const areaChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-} satisfies ChartConfig
-
-export function ChartAreaExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Area Chart</CardTitle>
-        <CardDescription>
-          Showing total visitors for the last 6 months
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={areaChartConfig}>
-          <AreaChart
-            accessibilityLayer
-            data={areaChartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
-            <Area
-              dataKey="desktop"
-              type="natural"
-              fill="var(--color-desktop)"
-              fillOpacity={0.4}
-              stroke="var(--color-desktop)"
-            />
-          </AreaChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month{" "}
-              <TrendingUpIcon className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-              January - June 2024
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-bar-example.tsx b/apps/v4/examples/radix/chart-bar-example.tsx
deleted file mode 100644
index 6d7d1e5a1e..0000000000
--- a/apps/v4/examples/radix/chart-bar-example.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
-
-const barChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const barChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartBarExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Bar Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={barChartConfig}>
-          <BarChart accessibilityLayer data={barChartData}>
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              tickMargin={10}
-              axisLine={false}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="dashed" />}
-            />
-            <Bar dataKey="desktop" fill="var(--color-desktop)" radius={4} />
-            <Bar dataKey="mobile" fill="var(--color-mobile)" radius={4} />
-          </BarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col items-start gap-2">
-        <div className="flex gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-demo.tsx b/apps/v4/examples/radix/chart-demo.tsx
new file mode 100644
index 0000000000..a74be7d3ce
--- /dev/null
+++ b/apps/v4/examples/radix/chart-demo.tsx
@@ -0,0 +1,160 @@
+"use client"
+
+import * as React from "react"
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts"
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/registry/new-york-v4/ui/card"
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  type ChartConfig,
+} from "@/registry/new-york-v4/ui/chart"
+
+export const description = "An interactive bar chart"
+
+const chartData = [
+  { date: "2024-04-01", desktop: 222, mobile: 150 },
+  { date: "2024-04-02", desktop: 97, mobile: 180 },
+  { date: "2024-04-03", desktop: 167, mobile: 120 },
+  { date: "2024-04-04", desktop: 242, mobile: 260 },
+  { date: "2024-04-05", desktop: 373, mobile: 290 },
+  { date: "2024-04-06", desktop: 301, mobile: 340 },
+  { date: "2024-04-07", desktop: 245, mobile: 180 },
+  { date: "2024-04-08", desktop: 409, mobile: 320 },
+  { date: "2024-04-09", desktop: 59, mobile: 110 },
+  { date: "2024-04-10", desktop: 261, mobile: 190 },
+  { date: "2024-04-11", desktop: 327, mobile: 350 },
+  { date: "2024-04-12", desktop: 292, mobile: 210 },
+  { date: "2024-04-13", desktop: 342, mobile: 380 },
+  { date: "2024-04-14", desktop: 137, mobile: 220 },
+  { date: "2024-04-15", desktop: 120, mobile: 170 },
+  { date: "2024-04-16", desktop: 138, mobile: 190 },
+  { date: "2024-04-17", desktop: 446, mobile: 360 },
+  { date: "2024-04-18", desktop: 364, mobile: 410 },
+  { date: "2024-04-19", desktop: 243, mobile: 180 },
+  { date: "2024-04-20", desktop: 89, mobile: 150 },
+  { date: "2024-04-21", desktop: 137, mobile: 200 },
+  { date: "2024-04-22", desktop: 224, mobile: 170 },
+  { date: "2024-04-23", desktop: 138, mobile: 230 },
+  { date: "2024-04-24", desktop: 387, mobile: 290 },
+  { date: "2024-04-25", desktop: 215, mobile: 250 },
+  { date: "2024-04-26", desktop: 75, mobile: 130 },
+  { date: "2024-04-27", desktop: 383, mobile: 420 },
+  { date: "2024-04-28", desktop: 122, mobile: 180 },
+  { date: "2024-04-29", desktop: 315, mobile: 240 },
+  { date: "2024-04-30", desktop: 454, mobile: 380 },
+]
+
+const chartConfig = {
+  views: {
+    label: "Page Views",
+  },
+  desktop: {
+    label: "Desktop",
+    color: "var(--chart-2)",
+  },
+  mobile: {
+    label: "Mobile",
+    color: "var(--chart-1)",
+  },
+} satisfies ChartConfig
+
+export function ChartDemo() {
+  const [activeChart, setActiveChart] =
+    React.useState<keyof typeof chartConfig>("desktop")
+
+  const total = React.useMemo(
+    () => ({
+      desktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),
+      mobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),
+    }),
+    []
+  )
+
+  return (
+    <Card className="py-0 pb-4">
+      <CardHeader className="flex flex-col items-stretch border-b !p-0 sm:flex-row">
+        <div className="flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0">
+          <CardTitle>Bar Chart - Interactive</CardTitle>
+          <CardDescription>
+            Showing total visitors for the last 3 months
+          </CardDescription>
+        </div>
+        <div className="flex">
+          {["desktop", "mobile"].map((key) => {
+            const chart = key as keyof typeof chartConfig
+            return (
+              <button
+                key={chart}
+                data-active={activeChart === chart}
+                className="data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6"
+                onClick={() => setActiveChart(chart)}
+              >
+                <span className="text-muted-foreground text-xs">
+                  {chartConfig[chart].label}
+                </span>
+                <span className="text-lg leading-none font-bold sm:text-3xl">
+                  {total[key as keyof typeof total].toLocaleString()}
+                </span>
+              </button>
+            )
+          })}
+        </div>
+      </CardHeader>
+      <CardContent className="px-2 sm:p-6">
+        <ChartContainer
+          config={chartConfig}
+          className="aspect-auto h-[250px] w-full"
+        >
+          <BarChart
+            accessibilityLayer
+            data={chartData}
+            margin={{
+              left: 12,
+              right: 12,
+            }}
+          >
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="date"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              minTickGap={32}
+              tickFormatter={(value) => {
+                const date = new Date(value)
+                return date.toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })
+              }}
+            />
+            <ChartTooltip
+              content={
+                <ChartTooltipContent
+                  className="w-[150px]"
+                  nameKey="views"
+                  labelFormatter={(value) => {
+                    return new Date(value).toLocaleDateString("en-US", {
+                      month: "short",
+                      day: "numeric",
+                      year: "numeric",
+                    })
+                  }}
+                />
+              }
+            />
+            <Bar dataKey={activeChart} fill={`var(--color-${activeChart})`} />
+          </BarChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  )
+}
diff --git a/apps/v4/examples/radix/chart-bar-demo-axis.tsx b/apps/v4/examples/radix/chart-example-axis.tsx
similarity index 100%
rename from apps/v4/examples/radix/chart-bar-demo-axis.tsx
rename to apps/v4/examples/radix/chart-example-axis.tsx
diff --git a/apps/v4/examples/radix/chart-bar-demo-grid.tsx b/apps/v4/examples/radix/chart-example-grid.tsx
similarity index 100%
rename from apps/v4/examples/radix/chart-bar-demo-grid.tsx
rename to apps/v4/examples/radix/chart-example-grid.tsx
diff --git a/apps/v4/examples/radix/chart-bar-demo-legend.tsx b/apps/v4/examples/radix/chart-example-legend.tsx
similarity index 100%
rename from apps/v4/examples/radix/chart-bar-demo-legend.tsx
rename to apps/v4/examples/radix/chart-example-legend.tsx
diff --git a/apps/v4/examples/radix/chart-bar-demo-tooltip.tsx b/apps/v4/examples/radix/chart-example-tooltip.tsx
similarity index 100%
rename from apps/v4/examples/radix/chart-bar-demo-tooltip.tsx
rename to apps/v4/examples/radix/chart-example-tooltip.tsx
diff --git a/apps/v4/examples/radix/chart-bar-demo.tsx b/apps/v4/examples/radix/chart-example.tsx
similarity index 96%
rename from apps/v4/examples/radix/chart-bar-demo.tsx
rename to apps/v4/examples/radix/chart-example.tsx
index 3dd36043a7..1127393464 100644
--- a/apps/v4/examples/radix/chart-bar-demo.tsx
+++ b/apps/v4/examples/radix/chart-example.tsx
@@ -23,7 +23,7 @@ const chartConfig = {
   },
 } satisfies ChartConfig
 
-export function ChartBarDemo() {
+export function ChartExample() {
   return (
     <ChartContainer config={chartConfig} className="min-h-[200px] w-full">
       <BarChart accessibilityLayer data={chartData}>
diff --git a/apps/v4/examples/radix/chart-line-example.tsx b/apps/v4/examples/radix/chart-line-example.tsx
deleted file mode 100644
index f9e0e66f8b..0000000000
--- a/apps/v4/examples/radix/chart-line-example.tsx
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { CartesianGrid, Line, LineChart, XAxis } from "recharts"
-
-const lineChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const lineChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartLineExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Line Chart - Multiple</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <ChartContainer config={lineChartConfig}>
-          <LineChart
-            accessibilityLayer
-            data={lineChartData}
-            margin={{
-              left: 12,
-              right: 12,
-            }}
-          >
-            <CartesianGrid vertical={false} />
-            <XAxis
-              dataKey="month"
-              tickLine={false}
-              axisLine={false}
-              tickMargin={8}
-              tickFormatter={(value) => value.slice(0, 3)}
-            />
-            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
-            <Line
-              dataKey="desktop"
-              type="monotone"
-              stroke="var(--color-desktop)"
-              strokeWidth={2}
-              dot={false}
-            />
-            <Line
-              dataKey="mobile"
-              type="monotone"
-              stroke="var(--color-mobile)"
-              strokeWidth={2}
-              dot={false}
-            />
-          </LineChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter>
-        <div className="flex w-full items-start gap-2">
-          <div className="grid gap-2">
-            <div className="flex items-center gap-2 leading-none font-medium">
-              Trending up by 5.2% this month{" "}
-              <TrendingUpIcon className="size-4" />
-            </div>
-            <div className="text-muted-foreground flex items-center gap-2 leading-none">
-              Showing total visitors for the last 6 months
-            </div>
-          </div>
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-pie-example.tsx b/apps/v4/examples/radix/chart-pie-example.tsx
deleted file mode 100644
index 705f08badc..0000000000
--- a/apps/v4/examples/radix/chart-pie-example.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-"use client"
-
-import * as React from "react"
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { Label, Pie, PieChart } from "recharts"
-
-const pieChartData = [
-  { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
-  { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
-  { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
-  { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
-  { browser: "other", visitors: 190, fill: "var(--color-other)" },
-]
-
-const pieChartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  chrome: {
-    label: "Chrome",
-    color: "var(--chart-1)",
-  },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
-  },
-  firefox: {
-    label: "Firefox",
-    color: "var(--chart-3)",
-  },
-  edge: {
-    label: "Edge",
-    color: "var(--chart-4)",
-  },
-  other: {
-    label: "Other",
-    color: "var(--chart-5)",
-  },
-} satisfies ChartConfig
-
-export function ChartPieExample() {
-  const totalVisitors = React.useMemo(() => {
-    return pieChartData.reduce((acc, curr) => acc + curr.visitors, 0)
-  }, [])
-
-  return (
-    <Card className="w-full">
-      <CardHeader className="items-center pb-0">
-        <CardTitle>Pie Chart - Donut with Text</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={pieChartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <PieChart>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent hideLabel />}
-            />
-            <Pie
-              data={pieChartData}
-              dataKey="visitors"
-              nameKey="browser"
-              innerRadius={60}
-              strokeWidth={5}
-            >
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-3xl font-bold"
-                        >
-                          {totalVisitors.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          Visitors
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </Pie>
-          </PieChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-radar-example.tsx b/apps/v4/examples/radix/chart-radar-example.tsx
deleted file mode 100644
index 7724cddd5d..0000000000
--- a/apps/v4/examples/radix/chart-radar-example.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import {
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-  type ChartConfig,
-} from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import { PolarAngleAxis, PolarGrid, Radar, RadarChart } from "recharts"
-
-const radarChartData = [
-  { month: "January", desktop: 186, mobile: 80 },
-  { month: "February", desktop: 305, mobile: 200 },
-  { month: "March", desktop: 237, mobile: 120 },
-  { month: "April", desktop: 73, mobile: 190 },
-  { month: "May", desktop: 209, mobile: 130 },
-  { month: "June", desktop: 214, mobile: 140 },
-]
-
-const radarChartConfig = {
-  desktop: {
-    label: "Desktop",
-    color: "var(--chart-1)",
-  },
-  mobile: {
-    label: "Mobile",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartRadarExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader className="items-center pb-4">
-        <CardTitle>Radar Chart - Multiple</CardTitle>
-        <CardDescription>
-          Showing total visitors for the last 6 months
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="pb-0">
-        <ChartContainer
-          config={radarChartConfig}
-          className="mx-auto aspect-square max-h-[250px]"
-        >
-          <RadarChart data={radarChartData}>
-            <ChartTooltip
-              cursor={false}
-              content={<ChartTooltipContent indicator="line" />}
-            />
-            <PolarAngleAxis dataKey="month" />
-            <PolarGrid />
-            <Radar
-              dataKey="desktop"
-              fill="var(--color-desktop)"
-              fillOpacity={0.6}
-            />
-            <Radar dataKey="mobile" fill="var(--color-mobile)" />
-          </RadarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground flex items-center gap-2 leading-none">
-          January - June 2024
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-radial-example.tsx b/apps/v4/examples/radix/chart-radial-example.tsx
deleted file mode 100644
index edef3934f9..0000000000
--- a/apps/v4/examples/radix/chart-radial-example.tsx
+++ /dev/null
@@ -1,103 +0,0 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/examples/radix/ui/card"
-import { ChartContainer, type ChartConfig } from "@/examples/radix/ui/chart"
-import { TrendingUpIcon } from "lucide-react"
-import {
-  Label,
-  PolarGrid,
-  PolarRadiusAxis,
-  RadialBar,
-  RadialBarChart,
-} from "recharts"
-
-const radialChartData = [
-  { browser: "safari", visitors: 1260, fill: "var(--color-safari)" },
-]
-
-const radialChartConfig = {
-  visitors: {
-    label: "Visitors",
-  },
-  safari: {
-    label: "Safari",
-    color: "var(--chart-2)",
-  },
-} satisfies ChartConfig
-
-export function ChartRadialExample() {
-  return (
-    <Card className="w-full">
-      <CardHeader>
-        <CardTitle>Radial Chart - Shape</CardTitle>
-        <CardDescription>January - June 2024</CardDescription>
-      </CardHeader>
-      <CardContent className="flex-1 pb-0">
-        <ChartContainer
-          config={radialChartConfig}
-          className="mx-auto aspect-square max-h-[210px]"
-        >
-          <RadialBarChart
-            data={radialChartData}
-            endAngle={100}
-            innerRadius={80}
-            outerRadius={140}
-          >
-            <PolarGrid
-              gridType="circle"
-              radialLines={false}
-              stroke="none"
-              className="first:fill-muted last:fill-background"
-              polarRadius={[86, 74]}
-            />
-            <RadialBar dataKey="visitors" background />
-            <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
-              <Label
-                content={({ viewBox }) => {
-                  if (viewBox && "cx" in viewBox && "cy" in viewBox) {
-                    return (
-                      <text
-                        x={viewBox.cx}
-                        y={viewBox.cy}
-                        textAnchor="middle"
-                        dominantBaseline="middle"
-                      >
-                        <tspan
-                          x={viewBox.cx}
-                          y={viewBox.cy}
-                          className="fill-foreground text-4xl font-bold"
-                        >
-                          {radialChartData[0].visitors.toLocaleString()}
-                        </tspan>
-                        <tspan
-                          x={viewBox.cx}
-                          y={(viewBox.cy || 0) + 24}
-                          className="fill-muted-foreground"
-                        >
-                          Visitors
-                        </tspan>
-                      </text>
-                    )
-                  }
-                }}
-              />
-            </PolarRadiusAxis>
-          </RadialBarChart>
-        </ChartContainer>
-      </CardContent>
-      <CardFooter className="flex-col gap-2">
-        <div className="flex items-center gap-2 leading-none font-medium">
-          Trending up by 5.2% this month <TrendingUpIcon className="size-4" />
-        </div>
-        <div className="text-muted-foreground leading-none">
-          Showing total visitors for the last 6 months
-        </div>
-      </CardFooter>
-    </Card>
-  )
-}
diff --git a/apps/v4/examples/radix/chart-tooltip-demo.tsx b/apps/v4/examples/radix/chart-tooltip.tsx
similarity index 93%
rename from apps/v4/examples/radix/chart-tooltip-demo.tsx
rename to apps/v4/examples/radix/chart-tooltip.tsx
index 483a0df986..ea524211ef 100644
--- a/apps/v4/examples/radix/chart-tooltip-demo.tsx
+++ b/apps/v4/examples/radix/chart-tooltip.tsx
@@ -4,7 +4,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-export default function Component() {
+export function ChartTooltipDemo() {
   return (
     <div className="text-foreground grid aspect-video w-full max-w-md justify-center md:grid-cols-2 [&>div]:relative [&>div]:flex [&>div]:h-[137px] [&>div]:w-[224px] [&>div]:items-center [&>div]:justify-center [&>div]:p-4">
       <div>
@@ -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]"
         />
diff --git a/apps/v4/mdx-components.tsx b/apps/v4/mdx-components.tsx
index aabc20874b..0d62bbc554 100644
--- a/apps/v4/mdx-components.tsx
+++ b/apps/v4/mdx-components.tsx
@@ -279,7 +279,7 @@ export const mdxComponents = {
   Step: ({ className, ...props }: React.ComponentProps<"h3">) => (
     <h3
       className={cn(
-        "font-heading mt-8 scroll-m-32 text-xl font-medium tracking-tight",
+        "font-heading mt-8 scroll-m-32 text-lg font-medium tracking-tight",
         className
       )}
       {...props}
diff --git a/apps/v4/styles/globals.css b/apps/v4/styles/globals.css
index 27dff70b66..500ea3558b 100644
--- a/apps/v4/styles/globals.css
+++ b/apps/v4/styles/globals.css
@@ -227,7 +227,7 @@
   counter-increment: step;
 
   &:before {
-    @apply border-background bg-muted mr-2 inline-flex size-8 items-center justify-center rounded-full border-4 text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9;
+    @apply border-background bg-muted mr-2 inline-flex size-6 items-center justify-center rounded-full text-center -indent-px font-mono text-sm font-medium md:absolute md:mt-[-4px] md:ml-[-50px] md:size-9 md:border-4;
     content: counter(step);
   }
 }