---
name: "@audiocn-solid"
slug: "audiocn-solid"
description: "Audio components for Solid, distributed as source through shadcn."
category: "Animated components"
tags: ["animation", "audio", "buttons", "cards", "forms", "hooks", "navigation", "overlays"]
framework: "react"
license: null
author: "jhomra21"
website: "https://audiocn-solid.jhonra121.workers.dev"
github: "https://github.com/jhomra21/audiocn-solid"
registry: "https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json"
pro: false
pro_url: null
github_stars: 0
component_count: 65
generated_at: "2026-10-17T06:30:14.294Z"
---

# @audiocn-solid

Audio components for Solid, distributed as source through shadcn.

## Links

- Website: https://audiocn-solid.jhonra121.workers.dev
- GitHub: https://github.com/jhomra21/audiocn-solid
- Registry JSON: https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/audiocn-solid
- This file: https://sh4dcn.vercel.app/md/audiocn-solid.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
pnpm dlx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
bunx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
# clone the source repo
git clone https://github.com/jhomra21/audiocn-solid.git
# fetch the raw registry index
curl -s https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
```

## Components (65)

| name | type | description | install |
| --- | --- | --- | --- |
| core | registry:lib | Framework-neutral audio primitives plus the Solid compatibility helpers used by the installable components. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/core.json` |
| button | registry:ui | Solid button primitive using the same base-rhea styling as the site. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/button.json` |
| use-frame-source | registry:hook | Subscribe to a frame source with automatic Solid lifecycle cleanup. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-frame-source.json` |
| use-clip-hold | registry:hook | Clip detection with hold time, count, and reset. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-clip-hold.json` |
| use-reduced-motion | registry:hook | Tracks the operating system reduced-motion preference. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-reduced-motion.json` |
| use-visibility | registry:hook | Tracks whether an element intersects the viewport. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-visibility.json` |
| use-demo-signal | registry:hook | Synthetic speech, music, tone, or noise frame sources for demos and tests. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-demo-signal.json` |
| use-audio-context | registry:hook | A shared AudioContext with a provider for supplying an existing context. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-audio-context.json` |
| use-audio-analyser | registry:hook | Meter and visual frame sources backed by Web Audio AnalyserNode. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-audio-analyser.json` |
| use-microphone | registry:hook | Open a microphone MediaStream with browser processing disabled by default. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-microphone.json` |
| use-audio-config | registry:hook | Shared meter and control configuration context. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-audio-config.json` |
| db-scale | registry:ui | Tick marks and labels for a decibel range. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/db-scale.json` |
| db-readout | registry:ui | A stable-width numeric level readout. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/db-readout.json` |
| clip-indicator | registry:ui | A clip light with hold, count, and reset behavior. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/clip-indicator.json` |
| level-meter | registry:ui | Composable peak and RMS level meter with stereo, hold, scale, readout, and clip indication. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/level-meter.json` |
| fader | registry:ui | A composable decibel fader with tapering, detents, keyboard stepping, reset, editable values, and optional wheel control. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/fader.json` |
| parameter-slider | registry:ui | A labelled parameter slider with a numeric input, units, marks, reset, linear or log scaling, and unit scrubbing. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/parameter-slider.json` |
| knob | registry:ui | A composable rotary parameter control with linear or circular dragging, keyboard and wheel input, editable values, scales, metal caps, and optional detent clic… | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/knob.json` |
| pan-control | registry:ui | A left/right pan slider with a center fill, center detent, keyboard controls, accessible pan text, and double-click reset. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/pan-control.json` |
| channel-toggle | registry:ui | Audio channel toggle buttons with neutral, mute, solo, and monitor tones plus inherited disabled state. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/channel-toggle.json` |
| volume-control | registry:ui | A composable volume control with mute restore, perceptual or linear curves, horizontal and vertical sliders, and accessible level text. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/volume-control.json` |
| badge | registry:ui | A compact status badge with default, secondary, destructive, outline, ghost, and link variants. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/badge.json` |
| channel-strip | registry:ui | A composable horizontal or console-style channel strip with shared audio config, status parts, responsive layout, and clipping reflection. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/channel-strip.json` |
| mixer | registry:ui | A horizontal or console-style mixer layout with shared audio configuration, empty state, master area, and keyboard focus navigation between channel controls. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/mixer.json` |
| popover | registry:ui | Accessible popover with focus restoration and outside dismissal. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/popover.json` |
| bar-visualizer | registry:ui | Frequency-band bars with idle, loading and mirrored modes. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/bar-visualizer.json` |
| smooth-waveform | registry:ui | A smooth frequency-band wave or oscilloscope trace. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/smooth-waveform.json` |
| live-waveform | registry:ui | Live signal canvas with scrolling history, bars, mirrors and lines. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/live-waveform.json` |
| electric | registry:lib | Shared electric canvas colors, sparks and geometry. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/electric.json` |
| electric-bar-visualizer | registry:ui | Frequency-band bars drawn as crackling filaments. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/electric-bar-visualizer.json` |
| electric-waveform | registry:ui | An electric wave or oscilloscope trace with forks and sparks. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/electric-waveform.json` |
| spectrum | registry:ui | A frequency spectrum analyser with axes, grid and peak hold. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/spectrum.json` |
| waveform | registry:ui | A clip waveform with seeking, hover, regions and markers. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/waveform.json` |
| track-list | registry:ui | Track rows with active, playing and disabled states. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/track-list.json` |
| kbd | registry:ui | Keyboard shortcut labels and groups. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/kbd.json` |
| sound-pad | registry:ui | Sound triggers with modes, hotkeys and progress. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/sound-pad.json` |
| use-audio-player | registry:hook | Owned media playback with reactive controls and smooth time frames. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-audio-player.json` |
| use-sound | registry:hook | Cached decoding and low-latency short sound playback. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-sound.json` |
| use-waveform-data | registry:hook | Decode files or audio buffers into cached waveform peaks. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-waveform-data.json` |
| use-web-audio-mixer | registry:hook | Mixer graph with gain, pan, monitoring, limiting and ducking. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-web-audio-mixer.json` |
| use-level | registry:hook | Samples a meter source for reactive level labels. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-level.json` |
| use-gain-node | registry:hook | Stable gain routing with click-free changes and connection cleanup. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-gain-node.json` |
| use-audio-devices | registry:hook | Audio devices and permission state with live updates. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-audio-devices.json` |
| use-system-audio | registry:hook | Capture system or tab audio with cancellation and track cleanup. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-system-audio.json` |
| use-mixer | registry:hook | Mixer state controller for channel gain, mute, solo, pan, monitoring, master controls, audibility, dynamic channels, reset, controlled state, and optional loca… | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/use-mixer.json` |
| select | registry:ui | Accessible selection with Kobalte keyboard navigation. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/select.json` |
| audio-device-select | registry:ui | Audio device picker with permission, loading and disconnected states. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/audio-device-select.json` |
| audio-player | registry:ui | Composable transport, seeking, time, volume, rate and loop controls. | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/audio-player.json` |
| card | registry:ui | Card | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/card.json` |
| alert | registry:ui | Alert | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/alert.json` |
| empty | registry:ui | Empty | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/empty.json` |
| label | registry:ui | Label | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/label.json` |
| separator | registry:ui | Separator | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/separator.json` |
| switch | registry:ui | Switch | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/switch.json` |
| toggle | registry:ui | Toggle | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/toggle.json` |
| field | registry:ui | Field | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/field.json` |
| kobalte-dom-collection | registry:lib | Kobalte Dom Collection | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/kobalte-dom-collection.json` |
| context-menu | registry:ui | Context Menu | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/context-menu.json` |
| tabs | registry:ui | Tabs | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/tabs.json` |
| music-player | registry:block | Music Player | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/music-player.json` |
| soundboard | registry:block | Soundboard | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/soundboard.json` |
| mic-setup | registry:block | Mic Setup | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/mic-setup.json` |
| system-audio-settings | registry:block | System Audio Settings | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/system-audio-settings.json` |
| quick-audio-popover | registry:block | Quick Audio Popover | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/quick-audio-popover.json` |
| system-audio-mixer | registry:block | System Audio Mixer | `npx shadcn@latest add https://audiocn-solid.jhonra121.workers.dev/r/solid1/system-audio-mixer.json` |

## For AI agents

```text
You are adding components from @audiocn-solid to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/audiocn-solid.md) for the component list.
2. Fetch the machine-readable index: https://audiocn-solid.jhonra121.workers.dev/r/solid1/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: audiocn-solid).
```