A ring of rounded bars that jumps like an audio visualizer, each beat lifting a cluster of bars into a peak.
Set your access key from API keys as NEXTUI_TOKEN in .env.local and add the @nextui namespace below to components.json once. Then every item installs by name. Each install counts as a copy on a free account.
$pnpm dlx shadcn@latest add @nextui/sound-ring
1{2"registries": {3"@nextui": {4"url": "https://nextui.dev/r/{name}.json",5"headers": { "Authorization": "Bearer ${NEXTUI_TOKEN}" }6}7}8}
1import { SoundRing } from "@/components/nextui/sound-ring";23export function Listening() {4return <SoundRing size={240} className="text-muted-foreground" />;5}
| Prop | Type | Default | Description |
|---|---|---|---|
| size | number | 280 | Width and height of the ring, in px |
| bars | number | 96 | Number of bars around the ring |
| intensity | number | 1 | How often and how hard it pulses; 1 is the default |
| label | string | "Animated sound ring" | Description read by screen readers |
| className | string | – | Extra class on the canvas; a text color class sets the bar color |
Sign in to see the code
Preview it freely. A free account copies code and prompts a few times a day.