a

2026-07-03 16:58:28 +08:00
commit 32b43f85bd
6240 changed files with 1987678 additions and 0 deletions
@@ -0,0 +1,148 @@
+---
+title: Area Chart
+description: A customizable area chart component to visualize your data with gradient fills and smooth curves. 📈
+lastUpdated: 12 Aug, 2025
+links:
+  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/AreaChart.tsx
+---
+
+<ComponentShowcase name="area-chart-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/area-chart.json'" />
+  <ComponentInstall.Manual>
+
+#### 1. Install dependencies:
+
+```sh
+npm install recharts
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="areaChart" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="area-chart-style-default" />
+<br />
+<br />
+
+### Multiple Categories
+
+<ComponentShowcase name="area-chart-style-multiple" />
+<br />
+<br />
+
+### Stacked Areas
+
+<ComponentShowcase name="area-chart-style-stacked" />
+<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 display as areas</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">fill</Table.Cell>
+      <Table.Cell className="*:text-xs">`"gradient" | "solid"`</Table.Cell>
+      <Table.Cell className="*:text-xs">`"gradient"`</Table.Cell>
+      <Table.Cell>Fill style for the areas</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 areas</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)"]`</Table.Cell>
+      <Table.Cell>Array of fill colors for the areas</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">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>
@@ -0,0 +1,160 @@
+---
+title: Bar Chart
+description: A customizable bar chart component to visualize your data with support for multiple categories, custom colors, and horizontal alignment. 📊
+lastUpdated: 02 Jan, 2026
+links:
+  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/BarChart.tsx
+---
+
+<ComponentShowcase name="bar-chart-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/bar-chart.json'" />
+  <ComponentInstall.Manual>
+
+#### 1. Install dependencies:
+
+```sh
+npm install recharts
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="barChart" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="bar-chart-style-default" />
+<br />
+<br />
+
+### Grouped Data
+
+<ComponentShowcase name="bar-chart-style-grouped" />
+<br />
+<br />
+
+### Stacked Data
+
+<ComponentShowcase name="bar-chart-style-stacked" />
+<br />
+<br />
+
+### Horizontal Alignment
+
+<ComponentShowcase name="bar-chart-style-horizontal" />
+<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 display as 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)"]`</Table.Cell>
+      <Table.Cell>Array of fill colors for the 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">stacked</Table.Cell>
+      <Table.Cell className="*:text-xs">`boolean`</Table.Cell>
+      <Table.Cell className="*:text-xs">`false`</Table.Cell>
+      <Table.Cell>Whether to stack the bars</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>
@@ -0,0 +1,142 @@
+---
+title: Line Chart
+description: A customizable line chart component to visualize trends and data over time with smooth curves and data points. 📉
+lastUpdated: 12 Aug, 2025
+links:
+  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/LineChart.tsx
+---
+
+<ComponentShowcase name="line-chart-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/line-chart.json'" />
+  <ComponentInstall.Manual>
+
+#### 1. Install dependencies:
+
+```sh
+npm install recharts
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="lineChart" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="line-chart-style-default" />
+<br />
+<br />
+
+### Multiple Lines
+
+<ComponentShowcase name="line-chart-style-multiple" />
+<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 display as lines</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 lines</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">strokeWidth</Table.Cell>
+      <Table.Cell className="*:text-xs">`number`</Table.Cell>
+      <Table.Cell className="*:text-xs">`2`</Table.Cell>
+      <Table.Cell>Width of the line strokes</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">dotSize</Table.Cell>
+      <Table.Cell className="*:text-xs">`number`</Table.Cell>
+      <Table.Cell className="*:text-xs">`4`</Table.Cell>
+      <Table.Cell>Size of the data point dots</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">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>
@@ -0,0 +1,130 @@
+---
+title: Pie Chart
+description: A customizable pie chart component to visualize proportional data with support for donut charts. 🍰
+lastUpdated: 12 Aug, 2025
+links:
+  source: https://github.com/logging-studio/RetroUI/blob/main/components/retroui/charts/PieChart.tsx
+---
+
+<ComponentShowcase name="pie-chart-style-default" />
+<br />
+<br />
+
+## Installation
+
+<ComponentInstall>
+  <ComponentInstall.Cli npmCommand="npx shadcn@latest add 'https://retroui.dev/r/pie-chart.json'" />
+  <ComponentInstall.Manual>
+
+#### 1. Install dependencies:
+
+```sh
+npm install recharts
+```
+
+<br />
+
+#### 2. Copy the code 👇 into your project:
+
+<ComponentSource name="pieChart" />
+
+  </ComponentInstall.Manual>
+</ComponentInstall>
+
+<br />
+<br />
+
+## Examples
+
+### Default
+
+<ComponentShowcase name="pie-chart-style-default" />
+<br />
+<br />
+
+### Donut Chart
+
+<ComponentShowcase name="pie-chart-style-donut" />
+<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">dataKey</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">-</Table.Cell>
+      <Table.Cell>Key for the data values</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">nameKey</Table.Cell>
+      <Table.Cell className="*:text-xs">`string`</Table.Cell>
+      <Table.Cell className="*:text-xs">-</Table.Cell>
+      <Table.Cell>Key for the category names</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">colors</Table.Cell>
+      <Table.Cell className="*:text-xs">`string[]`</Table.Cell>
+      <Table.Cell className="*:text-xs">`["var(--chart-1)", ...]`</Table.Cell>
+      <Table.Cell>Array of colors for the pie segments</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">innerRadius</Table.Cell>
+      <Table.Cell className="*:text-xs">`number`</Table.Cell>
+      <Table.Cell className="*:text-xs">`0`</Table.Cell>
+      <Table.Cell>Inner radius (use > 0 for donut chart)</Table.Cell>
+    </Table.Row>
+    <Table.Row>
+      <Table.Cell className="font-medium">outerRadius</Table.Cell>
+      <Table.Cell className="*:text-xs">`number`</Table.Cell>
+      <Table.Cell className="*:text-xs">`80`</Table.Cell>
+      <Table.Cell>Outer radius of the pie</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">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">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">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>