Components / Data visualization
Chart
Dependency-free accessible bar and line charts.
Preview
1import { Chart } from "@/components/ui/chart"2
3export function ChartDemo() {4 return <Chart type="bar" data={[{ label: "Mon", value: 32 }, { label: "Tue", value: 58 }]} />5}line
The line style of this component.
1import { Chart } from "@/components/ui/chart"2
3export function ChartDemo() {4 return <Chart type="line" data={[{ label: "Mon", value: 32 }, { label: "Tue", value: 58 }]} />5}Installation
Add the source directly to your project with the shadcn CLI.
npx shadcn@latest add qentrah/DUI/chartUsage
Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.