AudioUI Playground
Interactive testing environment for AudioUI components
Getting Started
Essential tips for exploring the playground
Navigation
Use the sidebar to explore all components and examples. Each section contains detailed demonstrations with live, interactive controls.
Theme Customization
Click the icon in the header to customize colors and roundness for vector components.
Note: Raster components and primitives use custom visuals and are not controlled by theme settings.
Light / Dark Mode
Toggle between System, Light, and Dark modes using the theme toggle in the header.
Interactive Controls
All components are fully interactive. Try dragging with your mouse or finger, scrolling with the mouse wheel, and using keyboard arrow keys for precise control.
Explore Components
Vector Components
6 production-ready components (Knob, Slider, Button, etc.) that respond to theme settings.
Raster Components
Image and filmstrip-based controls with custom visuals (not theme-controlled).
Primitives
Low-level building blocks for composing custom controls.
Layout & Sizing
Size system and grid layout demonstrations.
Examples
Live demos: Control Surface, WebAudio, Customization, and more.