# New Chart

Replace this description with a one-line summary of what the chart visualizes.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).





<ComponentThemeTabs>
  <ThemeTab name="mint">
    <PreviewWithCode name="new-chart">
      <NewChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="berries">
    <PreviewWithCode name="new-chart">
      <NewChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="citrine">
    <PreviewWithCode name="new-chart">
      <NewChartDemo />
    </PreviewWithCode>
  </ThemeTab>

  <ThemeTab name="cinnamon">
    <PreviewWithCode name="new-chart">
      <NewChartDemo />
    </PreviewWithCode>
  </ThemeTab>
</ComponentThemeTabs>

## Props [#props]

| Prop        | Type              | Default | Description              |
| ----------- | ----------------- | ------- | ------------------------ |
| `className` | `string`          | —       | Additional CSS classes   |
| `children`  | `React.ReactNode` | —       | Content inside the chart |

## Usage [#usage]

```tsx
import { NewChart } from "@/components/ui/new-chart";

<NewChart>Content</NewChart>
```

## Specs [#specs]

```md
# c-new-chart — Chart Specs

## Component
- name: new-chart
- file: registry/mint/new-chart.tsx
- installs to: components/ui/new-chart.tsx
- dependencies: (none — add if needed, e.g. recharts)
- registryDependencies: (none — add if needed, e.g. chart)

## What is it
Replace this with a description of what the chart visualizes, when to use it,
and what problem it solves. Charts communicate trends, comparisons, or
distributions in structured data — prefer them over tables when the shape
of the data matters more than exact values.

## Visual identity
Describe the visual character of this chart in this theme.
- Layout: (e.g. flex flex-col gap-6 p-6, fixed aspect ratio)
- Surface: (e.g. transparent, --card, --background)
- Weight: (e.g. dominant, contained within a card)
- Key trait: (the one thing that makes it recognisable)

## Design tokens
--background: oklch(1 0 0)
--foreground: oklch(0.145 0 0)
--card: oklch(1 0 0)
--card-foreground: oklch(0.145 0 0)
--primary: oklch(0.5 0.14 155)
--primary-foreground: oklch(1 0 0)
--secondary: oklch(0.95 0.04 155)
--secondary-foreground: oklch(0.32 0.1 155)
--muted: oklch(0.96 0.02 155)
--muted-foreground: oklch(0.52 0.06 155)
--accent: oklch(0.92 0.05 155)
--accent-foreground: oklch(0.32 0.1 155)
--destructive: oklch(0.55 0.25 15)
--border: oklch(0.88 0.04 155 / 60%)
--input: oklch(0.88 0.04 155 / 60%)
--ring: oklch(0.5 0.14 155)
--radius: 1.25rem

## shadcn config (components.json)
- style: new-york
- rsc: false  (charts use "use client" by default — Recharts requires the browser)
- tsx: true
- baseColor: neutral
- cssVariables: true
- iconLibrary: lucide
- aliases:
  - components → @/components
  - ui → @/components/ui
  - utils → @/lib/utils
  - lib → @/lib
  - hooks → @/hooks

## Sub-components
- NewChart → root layout wrapper; data-slot="new-chart"
- (add sub-components as the chart grows, e.g. legend, tooltip)

## States
- default:  (describe the resting appearance)
- loading:  (skeleton placeholder while data loads)
- empty:    (no data to plot)
- error:    (data fetch or malformed data)

## Conventions
- Use cn() from @/lib/utils for all conditional classNames
- Charts use the c- prefix to distinguish from elements (e-) and blocks (b-)
- "use client" directive required — charting relies on browser measurement
- Built on top of the base `chart` component (ChartContainer, ChartTooltip)
- Tailwind CSS 4 utility classes only — no inline styles
- No external dependencies unless declared in registry.json
- data-slot attribute on the root for targeted CSS overrides
```

## Installation [#installation]

<CommandBox componentName="new-chart" className="mt-2" />