diff --git a/components/retroui/charts/StackedBarChart.tsx b/components/retroui/charts/StackedBarChart.tsx
new file mode 100644
index 0000000..32c4367
--- /dev/null
+++ b/components/retroui/charts/StackedBarChart.tsx
@@ -0,0 +1,182 @@
+"use client"
+
+import { cn } from "@/lib/utils"
+import React from "react"
+import {
+  Bar,
+  BarChart as RechartsBarChart,
+  CartesianGrid,
+  ResponsiveContainer,
+  Tooltip,
+  XAxis,
+  YAxis,
+  Legend,
+} from "recharts"
+
+interface StackedBarChartProps extends React.HTMLAttributes<HTMLDivElement> {
+  data: Record<string, any>[]
+  index: string
+  categories: string[]
+  strokeColors?: string[]
+  fillColors?: string[]
+  tooltipBgColor?: string
+  tooltipBorderColor?: string
+  gridColor?: string
+  valueFormatter?: (value: number) => string
+  showGrid?: boolean
+  showTooltip?: boolean
+  showLegend?: boolean
+  alignment?: "vertical" | "horizontal"
+  className?: string
+}
+
+const StackedBarChart = React.forwardRef<HTMLDivElement, StackedBarChartProps>(
+  (
+    {
+      data = [],
+      index,
+      categories = [],
+      strokeColors = ["var(--foreground)"],
+      fillColors = ["var(--primary)", "var(--secondary)", "var(--accent)"],
+      tooltipBgColor = "var(--background)",
+      tooltipBorderColor = "var(--border)",
+      gridColor = "var(--muted)",
+      valueFormatter = (value: number) => value.toString(),
+      showGrid = true,
+      showTooltip = true,
+      showLegend = true,
+      alignment = "vertical",
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <div ref={ref} className={cn("h-80 w-full", className)} {...props}>
+        <ResponsiveContainer width="100%" height="100%">
+          <RechartsBarChart
+            data={data}
+            layout={alignment === "horizontal" ? "vertical" : undefined}
+            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}
+          >
+            {showGrid && (
+              <CartesianGrid strokeDasharray="3 3" stroke={gridColor} />
+            )}
+
+            {alignment === "horizontal" ? (
+              <>
+                <XAxis
+                  type="number"
+                  axisLine={false}
+                  tickLine={false}
+                  className="text-xs fill-muted-foreground"
+                  tickFormatter={valueFormatter}
+                />
+
+                <YAxis
+                  type="category"
+                  dataKey={index}
+                  axisLine={false}
+                  tickLine={false}
+                  className="text-xs fill-muted-foreground"
+                  width={80}
+                />
+              </>
+            ) : (
+              <>
+                <XAxis
+                  dataKey={index}
+                  axisLine={false}
+                  tickLine={false}
+                  className="text-xs fill-muted-foreground"
+                />
+
+                <YAxis
+                  axisLine={false}
+                  tickLine={false}
+                  className="text-xs fill-muted-foreground"
+                  tickFormatter={valueFormatter}
+                />
+              </>
+            )}
+
+            {showTooltip && (
+              <Tooltip
+                content={({ active, payload, label }) => {
+                  if (!active || !payload?.length) return null
+
+                  return (
+                    <div
+                      className="border p-2 shadow"
+                      style={{
+                        backgroundColor: tooltipBgColor,
+                        borderColor: tooltipBorderColor
+                      }}
+                    >
+                      <div className="flex flex-col gap-2">
+                        <div className="flex flex-col">
+                          <span className="text-[0.70rem] uppercase text-muted-foreground">
+                            {index}
+                          </span>
+                          <span className="font-bold text-muted-foreground">
+                            {label}
+                          </span>
+                        </div>
+                        <div className="grid gap-1">
+                          {payload.map((entry, idx) => (
+                            <div key={idx} className="flex items-center justify-between gap-4">
+                              <div className="flex items-center gap-2">
+                                <div
+                                  className="h-2 w-2 rounded-full"
+                                  style={{ backgroundColor: entry.fill }}
+                                />
+                                <span className="text-xs text-muted-foreground">
+                                  {entry.dataKey}
+                                </span>
+                              </div>
+                              <span className="text-xs font-bold">
+                                {entry.value != null ? valueFormatter(entry.value as number) : '-'}
+                              </span>
+                            </div>
+                          ))}
+                        </div>
+                      </div>
+                    </div>
+                  )
+                }}
+              />
+            )}
+
+            {showLegend && (
+              <Legend
+                wrapperStyle={{ paddingTop: '20px' }}
+                iconType="circle"
+                iconSize={8}
+              />
+            )}
+
+            {categories.map((category, i) => {
+              const fillColor = fillColors[i % fillColors.length]
+              const strokeColor = strokeColors[i % strokeColors.length] || strokeColors[0]
+
+              return (
+                <Bar
+                  key={category}
+                  dataKey={category}
+                  stackId="stack"
+                  fill={fillColor}
+                  stroke={strokeColor}
+                  strokeWidth={1}
+                />
+              )
+            })}
+          </RechartsBarChart>
+        </ResponsiveContainer>
+      </div>
+    )
+  }
+)
+
+StackedBarChart.displayName = "StackedBarChart"
+
+export { StackedBarChart, type StackedBarChartProps }
diff --git a/config/components.ts b/config/components.ts
index 0128975..301410a 100644
--- a/config/components.ts
+++ b/config/components.ts
@@ -60,6 +60,10 @@ export const componentConfig: {
       name: "barChart",
       filePath: "components/retroui/charts/BarChart.tsx",
     },
+    stackedBarChart: {
+      name: "stackedBarChart",
+      filePath: "components/retroui/charts/StackedBarChart.tsx",
+    },
     carousel: {
       name: "carousel",
       filePath: "components/retroui/Carousel.tsx",
@@ -260,6 +264,26 @@ export const componentConfig: {
         () => import("@/preview/charts/bar-chart-style-horizontal"),
       ),
     },
+    "stacked-bar-chart-style-default": {
+      name: "stacked-bar-chart-style-default",
+      filePath: "preview/charts/stacked-bar-chart-style-default.tsx",
+      preview: lazy(() => import("@/preview/charts/stacked-bar-chart-style-default")),
+    },
+    "stacked-bar-chart-style-horizontal": {
+      name: "stacked-bar-chart-style-horizontal",
+      filePath: "preview/charts/stacked-bar-chart-style-horizontal.tsx",
+      preview: lazy(() => import("@/preview/charts/stacked-bar-chart-style-horizontal")),
+    },
+    "stacked-bar-chart-style-no-legend": {
+      name: "stacked-bar-chart-style-no-legend",
+      filePath: "preview/charts/stacked-bar-chart-style-no-legend.tsx",
+      preview: lazy(() => import("@/preview/charts/stacked-bar-chart-style-no-legend")),
+    },
+    "stacked-bar-chart-style-formatted": {
+      name: "stacked-bar-chart-style-formatted",
+      filePath: "preview/charts/stacked-bar-chart-style-formatted.tsx",
+      preview: lazy(() => import("@/preview/charts/stacked-bar-chart-style-formatted")),
+    },
     "button-style-default": {
       name: "button-style-default",
       filePath: "preview/components/button-style-default.tsx",
diff --git a/config/navigation.ts b/config/navigation.ts
index 070f7bb..d36cd60 100644
--- a/config/navigation.ts
+++ b/config/navigation.ts
@@ -97,6 +97,7 @@ export const navConfig: INavigationConfig = {
       title: "Chart",
       children: [
         { title: "Bar Chart", href: `${chartsRoute}/bar-chart` },
+        { title: "Stacked Bar Chart", href: `${chartsRoute}/stacked-bar-chart` },
         { title: "Line Chart", href: `${chartsRoute}/line-chart` },
         { title: "Area Chart", href: `${chartsRoute}/area-chart` },
         { title: "Pie Chart", href: `${chartsRoute}/pie-chart` },
diff --git a/content/docs/charts/stacked-bar-chart.mdx b/content/docs/charts/stacked-bar-chart.mdx
new file mode 100644
index 0000000..25214ae
--- /dev/null
+++ b/content/docs/charts/stacked-bar-chart.mdx
@@ -0,0 +1,160 @@
+---
+title: Stacked Bar Chart
+description: A customizable stacked bar chart component to visualize comparative data across categories with support for stacking, custom colors, and horizontal alignment. 📊
+lastUpdated: 03 Dec, 2025
+links:
+  source: https://github.com/Logging-Studio/RetroUI/blob/main/components/retroui/charts/StackedBarChart.tsx
+---
+
+<ComponentShowcase name="stacked-bar-chart-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/stacked-bar-chart.json'" />
+  <ComponentInstall.Manual>
+
+#### 1. Install dependencies:
+
+```sh
+npm install recharts
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="stackedBarChart" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="stacked-bar-chart-style-default" />
+<br />
+<br />
+
+### Horizontal Alignment
+
+<ComponentShowcase name="stacked-bar-chart-style-horizontal" />
+<br />
+<br />
+
+### Without Legend
+
+<ComponentShowcase name="stacked-bar-chart-style-no-legend" />
+<br />
+<br />
+
+### With Formatted Values
+
+<ComponentShowcase name="stacked-bar-chart-style-formatted" />
+<br />
+<br />
+
+## API Reference
+
+<Table>
+  <Table.Header>
+    <Table.Row>
+      <Table.Head>Prop</Table.Head>
+      <Table.Head>Type</Table.Head>
+      <Table.Head>Default</Table.Head>
+      <Table.Head>Description</Table.Head>
+    </Table.Row>
+  </Table.Header>
+  <Table.Body>
+    <Table.Row>
+      <Table.Cell className="font-medium">data</Table.Cell>
+      <Table.Cell className="*:text-xs">`Record<string, any>[]`</Table.Cell>
+      <Table.Cell className="*:text-xs">`[]`</Table.Cell>
+      <Table.Cell>Array of data objects to display</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">index</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">-</Table.Cell>
+      <Table.Cell>Key for the x-axis (category) data</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">categories</Table.Cell>
+      <Table.Cell className="*:text-xs">`string[]`</Table.Cell>
+      <Table.Cell className="*:text-xs">`[]`</Table.Cell>
+      <Table.Cell>Array of keys for the data values to stack in bars</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">alignment</Table.Cell>
+      <Table.Cell className="*:text-xs">`"vertical" | "horizontal"`</Table.Cell>
+      <Table.Cell className="*:text-xs">`"vertical"`</Table.Cell>
+      <Table.Cell>Orientation of the bars</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">strokeColors</Table.Cell>
+      <Table.Cell className="*:text-xs">`string[]`</Table.Cell>
+      <Table.Cell className="*:text-xs">`["var(--foreground)"]`</Table.Cell>
+      <Table.Cell>Array of stroke colors for the bars</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">fillColors</Table.Cell>
+      <Table.Cell className="*:text-xs">`string[]`</Table.Cell>
+      <Table.Cell className="*:text-xs">`["var(--primary)", "var(--secondary)", "var(--accent)"]`</Table.Cell>
+      <Table.Cell>Array of fill colors for the stacked bars</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">tooltipBgColor</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">`"var(--background)"`</Table.Cell>
+      <Table.Cell>Background color for tooltips</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">tooltipBorderColor</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">`"var(--border)"`</Table.Cell>
+      <Table.Cell>Border color for tooltips</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">gridColor</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">`"var(--muted)"`</Table.Cell>
+      <Table.Cell>Color for the grid lines</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">valueFormatter</Table.Cell>
+      <Table.Cell className="*:text-xs">`(value: number) => string`</Table.Cell>
+      <Table.Cell className="*:text-xs">`(value) => value.toString()`</Table.Cell>
+      <Table.Cell>Function to format values</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">showGrid</Table.Cell>
+      <Table.Cell className="*:text-xs">`boolean`</Table.Cell>
+      <Table.Cell className="*:text-xs">`true`</Table.Cell>
+      <Table.Cell>Whether to show grid lines</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">showTooltip</Table.Cell>
+      <Table.Cell className="*:text-xs">`boolean`</Table.Cell>
+      <Table.Cell className="*:text-xs">`true`</Table.Cell>
+      <Table.Cell>Whether to show tooltips on hover</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">showLegend</Table.Cell>
+      <Table.Cell className="*:text-xs">`boolean`</Table.Cell>
+      <Table.Cell className="*:text-xs">`true`</Table.Cell>
+      <Table.Cell>Whether to show the legend for categories</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">className</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">-</Table.Cell>
+      <Table.Cell>Additional CSS classes</Table.Cell>
+    </Table.Row>
+  </Table.Body>
+</Table>
\ No newline at end of file
diff --git a/preview/charts/stacked-bar-chart-style-default.tsx b/preview/charts/stacked-bar-chart-style-default.tsx
new file mode 100644
index 0000000..c89bd03
--- /dev/null
+++ b/preview/charts/stacked-bar-chart-style-default.tsx
@@ -0,0 +1,21 @@
+import { StackedBarChart } from "@/components/retroui/charts/StackedBarChart";
+
+const data = [
+  { name: 'Jan', sales: 12, marketing: 9, support: 5 },
+  { name: 'Feb', sales: 32, marketing: 19, support: 8 },
+  { name: 'Mar', sales: 19, marketing: 8, support: 12 },
+  { name: 'Apr', sales: 35, marketing: 14, support: 6 },
+  { name: 'May', sales: 40, marketing: 12, support: 9 },
+  { name: 'Jun', sales: 25, marketing: 5, support: 15 }
+];
+
+export default function StackedBarChartStyleDefault() {
+  return (
+    <StackedBarChart
+      data={data}
+      index="name"
+      categories={["sales", "marketing", "support"]}
+      fillColors={["var(--primary)", "var(--secondary)", "var(--accent)"]}
+    />
+  )
+}
diff --git a/preview/charts/stacked-bar-chart-style-formatted.tsx b/preview/charts/stacked-bar-chart-style-formatted.tsx
new file mode 100644
index 0000000..bf379c8
--- /dev/null
+++ b/preview/charts/stacked-bar-chart-style-formatted.tsx
@@ -0,0 +1,23 @@
+import { StackedBarChart } from "@/components/retroui/charts/StackedBarChart";
+
+const data = [
+  { name: 'Mon', active: 4000, inactive: 2400, pending: 1400 },
+  { name: 'Tue', active: 3000, inactive: 1398, pending: 2210 },
+  { name: 'Wed', active: 2000, inactive: 9800, pending: 2290 },
+  { name: 'Thu', active: 2780, inactive: 3908, pending: 2000 },
+  { name: 'Fri', active: 1890, inactive: 4800, pending: 2181 },
+  { name: 'Sat', active: 2390, inactive: 3800, pending: 2500 },
+  { name: 'Sun', active: 3490, inactive: 4300, pending: 2100 }
+];
+
+export default function StackedBarChartStyleFormatted() {
+    return (
+        <StackedBarChart
+            data={data}
+            index="name"
+            categories={["active", "inactive", "pending"]}
+            fillColors={["var(--primary)", "var(--destructive)", "var(--muted)"]}
+            valueFormatter={(value) => `${(value / 1000).toFixed(1)}k`}
+        />
+    )
+}
diff --git a/preview/charts/stacked-bar-chart-style-horizontal.tsx b/preview/charts/stacked-bar-chart-style-horizontal.tsx
new file mode 100644
index 0000000..daba6ed
--- /dev/null
+++ b/preview/charts/stacked-bar-chart-style-horizontal.tsx
@@ -0,0 +1,21 @@
+import { StackedBarChart } from "@/components/retroui/charts/StackedBarChart";
+
+const data = [
+  { category: 'Q1', revenue: 400, expenses: 240, profit: 160 },
+  { category: 'Q2', revenue: 300, expenses: 139, profit: 161 },
+  { category: 'Q3', revenue: 200, expenses: 100, profit: 100 },
+  { category: 'Q4', revenue: 500, expenses: 300, profit: 200 }
+];
+
+export default function StackedBarChartStyleHorizontal() {
+    return (
+        <StackedBarChart
+            data={data}
+            index="category"
+            categories={["revenue", "expenses", "profit"]}
+            alignment="horizontal"
+            fillColors={["var(--primary)", "var(--destructive)", "var(--accent)"]}
+            className="h-96"
+        />
+    )
+}
diff --git a/preview/charts/stacked-bar-chart-style-no-legend.tsx b/preview/charts/stacked-bar-chart-style-no-legend.tsx
new file mode 100644
index 0000000..e38982a
--- /dev/null
+++ b/preview/charts/stacked-bar-chart-style-no-legend.tsx
@@ -0,0 +1,22 @@
+import { StackedBarChart } from "@/components/retroui/charts/StackedBarChart";
+
+const data = [
+  { month: 'Jan', product_a: 45, product_b: 32, product_c: 23 },
+  { month: 'Feb', product_a: 52, product_b: 41, product_c: 18 },
+  { month: 'Mar', product_a: 38, product_b: 29, product_c: 31 },
+  { month: 'Apr', product_a: 61, product_b: 38, product_c: 25 },
+  { month: 'May', product_a: 55, product_b: 45, product_c: 20 },
+  { month: 'Jun', product_a: 48, product_b: 36, product_c: 28 }
+];
+
+export default function StackedBarChartStyleNoLegend() {
+    return (
+        <StackedBarChart
+            data={data}
+            index="month"
+            categories={["product_a", "product_b", "product_c"]}
+            fillColors={["var(--primary)", "var(--secondary)", "var(--accent)"]}
+            showLegend={false}
+        />
+    )
+}
diff --git a/public/r/stacked-bar-chart.json b/public/r/stacked-bar-chart.json
new file mode 100644
index 0000000..b7ab2f6
--- /dev/null
+++ b/public/r/stacked-bar-chart.json
@@ -0,0 +1,18 @@
+{
+  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
+  "name": "stacked-bar-chart",
+  "type": "registry:component",
+  "title": "Stacked Bar Chart",
+  "description": "Beautiful stacked bar chart for data visualization with retro styling",
+  "dependencies": [
+    "recharts"
+  ],
+  "files": [
+    {
+      "path": "components/retroui/charts/StackedBarChart.tsx",
+      "content": "\"use client\"\n\nimport { cn } from \"@/lib/utils\"\nimport React from \"react\"\nimport {\n  Bar,\n  BarChart as RechartsBarChart,\n  CartesianGrid,\n  ResponsiveContainer,\n  Tooltip,\n  XAxis,\n  YAxis,\n  Legend,\n} from \"recharts\"\n\ninterface StackedBarChartProps extends React.HTMLAttributes<HTMLDivElement> {\n  data: Record<string, any>[]\n  index: string\n  categories: string[]\n  strokeColors?: string[]\n  fillColors?: string[]\n  tooltipBgColor?: string\n  tooltipBorderColor?: string\n  gridColor?: string\n  valueFormatter?: (value: number) => string\n  showGrid?: boolean\n  showTooltip?: boolean\n  showLegend?: boolean\n  alignment?: \"vertical\" | \"horizontal\"\n  className?: string\n}\n\nconst StackedBarChart = React.forwardRef<HTMLDivElement, StackedBarChartProps>(\n  (\n    {\n      data = [],\n      index,\n      categories = [],\n      strokeColors = [\"var(--foreground)\"],\n      fillColors = [\"var(--primary)\", \"var(--secondary)\", \"var(--accent)\"],\n      tooltipBgColor = \"var(--background)\",\n      tooltipBorderColor = \"var(--border)\",\n      gridColor = \"var(--muted)\",\n      valueFormatter = (value: number) => value.toString(),\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      alignment = \"vertical\",\n      className,\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <div ref={ref} className={cn(\"h-80 w-full\", className)} {...props}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <RechartsBarChart\n            data={data}\n            layout={alignment === \"horizontal\" ? \"vertical\" : undefined}\n            margin={{ top: 10, right: 30, left: 0, bottom: 0 }}\n          >\n            {showGrid && (\n              <CartesianGrid strokeDasharray=\"3 3\" stroke={gridColor} />\n            )}\n\n            {alignment === \"horizontal\" ? (\n              <>\n                <XAxis\n                  type=\"number\"\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n\n                <YAxis\n                  type=\"category\"\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  width={80}\n                />\n              </>\n            ) : (\n              <>\n                <XAxis\n                  dataKey={index}\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                />\n\n                <YAxis\n                  axisLine={false}\n                  tickLine={false}\n                  className=\"text-xs fill-muted-foreground\"\n                  tickFormatter={valueFormatter}\n                />\n              </>\n            )}\n\n            {showTooltip && (\n              <Tooltip\n                content={({ active, payload, label }) => {\n                  if (!active || !payload?.length) return null\n\n                  return (\n                    <div\n                      className=\"border p-2 shadow\"\n                      style={{\n                        backgroundColor: tooltipBgColor,\n                        borderColor: tooltipBorderColor\n                      }}\n                    >\n                      <div className=\"flex flex-col gap-2\">\n                        <div className=\"flex flex-col\">\n                          <span className=\"text-[0.70rem] uppercase text-muted-foreground\">\n                            {index}\n                          </span>\n                          <span className=\"font-bold text-muted-foreground\">\n                            {label}\n                          </span>\n                        </div>\n                        <div className=\"grid gap-1\">\n                          {payload.map((entry, idx) => (\n                            <div key={idx} className=\"flex items-center justify-between gap-4\">\n                              <div className=\"flex items-center gap-2\">\n                                <div\n                                  className=\"h-2 w-2 rounded-full\"\n                                  style={{ backgroundColor: entry.fill }}\n                                />\n                                <span className=\"text-xs text-muted-foreground\">\n                                  {entry.dataKey}\n                                </span>\n                              </div>\n                              <span className=\"text-xs font-bold\">\n                                {valueFormatter(entry.value as number)}\n                              </span>\n                            </div>\n                          ))}\n                        </div>\n                      </div>\n                    </div>\n                  )\n                }}\n              />\n            )}\n\n            {showLegend && (\n              <Legend\n                wrapperStyle={{ paddingTop: '20px' }}\n                iconType=\"circle\"\n                iconSize={8}\n              />\n            )}\n\n            {categories.map((category, index) => {\n              const fillColor = fillColors[index % fillColors.length]\n              const strokeColor = strokeColors[index % strokeColors.length] || strokeColors[0]\n\n              return (\n                <Bar\n                  key={category}\n                  dataKey={category}\n                  stackId=\"stack\"\n                  fill={fillColor}\n                  stroke={strokeColor}\n                  strokeWidth={1}\n                />\n              )\n            })}\n          </RechartsBarChart>\n        </ResponsiveContainer>\n      </div>\n    )\n  }\n)\n\nStackedBarChart.displayName = \"StackedBarChart\"\n\nexport { StackedBarChart, type StackedBarChartProps }\n",
+      "type": "registry:component",
+      "target": "components/retroui/charts/StackedBarChart.tsx"
+    }
+  ]
+}
\ No newline at end of file