Empty Chart, animated React component

A chart with no data yet, drawn as a dashed placeholder line that breathes on the grid. Connect a source and the same line bends into the real numbers while the area fills in and the total counts up.

Pro
Dashboards
Hover
Spring
Glow

Taps when you connect a source and plays a soft finished chime when the numbers arrive and the line bends into place; hovering the chart is silent. Sound is off on this site until you switch it on.

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Revenue, last 12 months

Connect a source

Your numbers show up here in about a minute.

Props

Prop	Type	Default	What it does
data	number[]	EMPTY_CHART_DATA	One value per point, oldest first, at least two. The total counts these up. Defaults to twelve months of revenue in thousands.
labels	string[]	EMPTY_CHART_MONTHS	A label per point, used for the axis (every second one) and the hover readout.
sources	string[]	["Payments", "Spreadsheet", "Database"]	The sources offered while the chart is empty.
title	string	"Revenue, last 12 months"	Caption above the total.
prefix	string	"$"	Put before the total and the hover values.
suffix	string	"k"	Put after the total and the hover values.
onConnect	(source: string) => void	undefined	Called with the source name when one is connected. The autoplay demo never calls it.
onDisconnect	() => void	undefined	Called when Disconnect is pressed.
autoplay	boolean	false	Connects a source, reads a month and disconnects on a loop until someone touches it. Pauses off screen and never runs under reduced motion.
className	string	""	Extra classes for the card.
enableSound	boolean	true	Plays interface sounds on interaction. They follow the sound switch (setSoundsEnabled, on by default) and stay silent on hover. Autoplay makes the same sounds once the visitor has used the page. Pass false to silence this component.

Add it to your project

Prepare your project

You need Tailwind CSS and the @/import alias. If shadcn isn't set up yet, initialise it once:

npx shadcn@latest init

Then add the Nexus registry to your components.json (the registries key is the part that matters):

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": "https://www.nexus-ui.com/api/registry/{name}"
  }
}

2
Add the component
Run this from your project root. It adds the component, the utilities it uses and its packages.
```
npx shadcn@latest add @nexus-labs/empty-chart
```
3
Check what was added
With the standard aliases, these files land in your project:
components/
empty-chart/
empty-chart.tsx
index.ts
4
Copying by hand? Install the packages
Skip this if you used the command above.
```
npm install framer-motion
```

Use it in a page

Import it and render it. The Code tab above has the full example.

// app/page.tsx
import { EmptyChart } from "@/components/empty-chart";

export default function Page() {
  return (
    <main>
      <EmptyChart />
    </main>
  );
}

Empty Chart questions

Does it make sound, and how do I turn it off?

Taps when you connect a source and plays a soft finished chime when the numbers arrive and the line bends into place; hovering the chart is silent. Sounds are synthesised with the Web Audio API, so there are no audio files, and they only play after a click or key press. Pass `enableSound={false}` to silence this component, or call `setSoundsEnabled(false)` from `@/lib/ui-sounds` to switch every sound off at once. The CLI installs `@/lib/ui-sounds` with the component.

Pro
New
Traffic Bars
Pro
New
Stock Line
Pro
New
Pulse Monitor
Pro
New
Spend Donut