Waveform

Displays a live signal as a moving trace, showing that a feed is running.

Configurations

Supported configurations for this component.

4 examples

Bars

Line only

No centreline

Paused

One command adds this component to your project.

Run the following command. New project? Run npx shadcn@latest init first to set up Tailwind and path aliases.

npx shadcn@latest add @aicanvas/••••••••••••

Light and dark both come with the install and follow the dark class on <html>, the shadcn dark mode setup (next-themes with attribute="class").

Every prop this component accepts. Any other prop is forwarded to the underlying element.

Prop	Type	Default	Description
samples	`number`	120	Number of points sampled across the waveform.
speed	`number`	0.6	Animation time-scale multiplier.
amplitude	`number`	0.4	Peak height as a fraction of the SVG height.
height	`number`	120	Fluid SVG height in pixels.
color	`string`	tokens.color.text.primary	Polyline stroke color only.
showBars	`boolean`	true	Whether to render mirrored level bars.
showCenterline	`boolean`	true	Whether to render the dashed centre reference.
paused	`boolean`	false	Whether to hold the current or initial static frame.
className	`string`	''	Root element class name.
style	`React.CSSProperties`	{}	Root element inline styles.

Displays a status message in the flow of the page, at a severity from note to fault.

Represents a person as a square image tile that falls back to their initials.

Displays the state a row or cell reports, such as online, queued, or fault.