Data & feedback@neumorphism-ui/chart

Chart

Compose Recharts axes and series directly. Data marks stay flat and legible; neumorphic depth belongs to the surrounding surface.

@neumorphism-ui/chart

Registry JSON

Preview

Visits over time

Use the original data table for exact values.

View exact data

Visits over time
Date	Visits
09-01	140
09-02	220
09-03	175

Installation

npx shadcn@latest add @neumorphism-ui/chart

The CLI resolves npm dependencies, base tokens, utilities, and component source in order.

New to this Registry? Set up the namespace before continuing.

Usage

Import

"use client";
import { Bar, BarChart, XAxis } from "recharts";
import { ChartContainer, ChartTooltip } from "@/components/ui/chart";

Example

export default function Example() {
  const data = [{ date: "09-01", visits: 140 }, { date: "09-02", visits: 220 }, { date: "09-03", visits: 175 }];
  return <ChartContainer title="Daily visits" description="Illustrative data. Exact values are available in the table." tableLabel="View data" table={<table><caption>Daily visits</caption><thead><tr><th scope="col">Date</th><th scope="col">Visits</th></tr></thead><tbody>{data.map(row => <tr key={row.date}><th scope="row">{row.date}</th><td>{row.visits}</td></tr>)}</tbody></table>}>
    <BarChart data={data} accessibilityLayer><XAxis dataKey="date" /><ChartTooltip /><Bar dataKey="visits" name="Visits" fill="var(--primary)" isAnimationActive={false} /></BarChart>
  </ChartContainer>;
}

API Reference

Component	Prop	Type	Default	Description
`ChartContainer`	`title / description`required	`string`	`—`	Readable chart title and description.
`ChartContainer`	`table / tableLabel`required	`ReactNode / string`	`—`	A table from the same data and its disclosure label.
`ChartContainer`	`empty / emptyLabel`	`boolean / string`	`—`	The state to display when no records are available.
`ChartTooltip`	`props`	`Recharts Tooltip props`	`—`	Pass ordinary Recharts Tooltip options.