{"id":44515536,"url":"https://github.com/cutoff/audio-ui","last_synced_at":"2026-02-13T17:06:23.843Z","repository":{"id":334205868,"uuid":"780900343","full_name":"cutoff/audio-ui","owner":"cutoff","description":"React component library for building audio software UIs. Performance-focused controls for DAWs, plugins, and Audio/MIDI apps with Web UIs.","archived":false,"fork":false,"pushed_at":"2026-02-02T17:34:23.000Z","size":7917,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-02T22:28:45.289Z","etag":null,"topics":["audio","audio-ui","components","cutoff","elements","kit","react","ui","webview"],"latest_commit_sha":null,"homepage":"https://cutoff.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cutoff.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"github":"cutoff","patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"lfx_crowdfunding":null,"polar":null,"buy_me_a_coffee":"cutoff","thanks_dev":null,"custom":null}},"created_at":"2024-04-02T11:26:02.000Z","updated_at":"2026-02-02T21:35:01.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/cutoff/audio-ui","commit_stats":null,"previous_names":["cutoff/audio-ui"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/cutoff/audio-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutoff%2Faudio-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutoff%2Faudio-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutoff%2Faudio-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutoff%2Faudio-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cutoff","download_url":"https://codeload.github.com/cutoff/audio-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cutoff%2Faudio-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29412677,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-13T06:24:03.484Z","status":"ssl_error","status_checked_at":"2026-02-13T06:23:12.830Z","response_time":78,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["audio","audio-ui","components","cutoff","elements","kit","react","ui","webview"],"created_at":"2026-02-13T17:06:23.206Z","updated_at":"2026-02-13T17:06:23.833Z","avatar_url":"https://github.com/cutoff.png","language":"TypeScript","readme":"# AudioUI by Cutoff\n\n\u003ca href=\"https://playground.cutoff.dev\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Playground-Try%20It%20Live-blue?style=for-the-badge\" alt=\"Playground\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://discord.gg/7RB6t2xqYW\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\u003cimg src=\"https://img.shields.io/badge/Discord-Join%20Community-5865F2?style=for-the-badge\u0026logo=discord\u0026logoColor=white\" alt=\"Discord\" /\u003e\u003c/a\u003e\n\nAudioUI is a professional, open-source React component library for building high-performance user interfaces for audio and MIDI applications. It provides a meticulously crafted set of components designed to meet the demanding needs of music software, digital audio workstations (DAWs), audio plugins with a web UI, and other audio-centric web applications.\n\n## Design Philosophy\n\nAudioUI is built on a few core principles designed to address the unique challenges of building audio software:\n\n- **Performance First**: Audio applications have strict performance requirements. Components are optimized for minimal re-renders and low-latency interactions to ensure the UI never stutters, even under heavy load.\n- **Hybrid Architecture**: We provide both **opinionated components** for rapid development and **non-opinionated primitives** for deep customization.\n  - _Opinionated Components_ (Knob, Slider, Button, CycleButton, Keys): Ready-to-use components with carefully designed APIs, multiple visual variants and sensible defaults, based on a thorough analysis of existing audio plugins and apps.\n  - _Non-Opinionated Components_ (Generic controls, primitives): Full customization through generic control components, SVG primitives, and base building blocks. Ideal for creating unique visual designs that match your brand or existing plugin aesthetics.\n- **Universal Access**: Designed from the ground up to be fully accessible (ARIA support, keyboard navigation) and mobile-ready (responsive, touch-optimized).\n- **Developer Experience**: Written entirely in TypeScript for type safety and provides a flexible theming system based on CSS variables.\n\n## Project Status\n\n**Developer Preview** — AudioUI is currently in active development. The core components and APIs are functional and ready for use, but the library is still evolving. During this phase:\n\n- ✅ Core components APIs (Knob, Slider, Button, CycleButton, Keys) are stable and production-ready (more visual variants are being added to cover 90% of real-life apps and plugin visuals)\n- ✅ Comprehensive audio parameters model with support for Continuous, Discrete and Boolean controls\n- ✅ Generic film strips and bitmap images components for each type of audio parameter\n- ✅ Comprehensive interaction system for each type of parameter (drag, wheel, keyboard)\n- ✅ Layout system (Adaptive Box with CSS-based sizing system or adaptive size)\n- ✅ Theming and customization system with SVG primitives and base components\n- ✅ Built-in support for dark and light mode\n- ✅ Ready for mobile devices (responsive, touch ready)\n- 🔄 Additional visual variants, components and primitives are being added\n- 🔄 Size system is being improved\n- 🔄 Documentation is being expanded\n\n**Note:** As a Developer Preview release, breaking changes may occur as we refine the API and architecture. We recommend pinning to specific versions for production use.\n\n**We're eager for community feedback before the first stable release!** Your input on APIs, features, and use cases is invaluable in shaping AudioUI. Join our [Discord server](https://discord.gg/7RB6t2xqYW) to share your thoughts, report issues, or request features.\n\n## Core Components\n\nAudioUI provides a range of components essential for building audio applications:\n\n### Built-in Controls\n\n- **Knob:** A versatile rotary knob for parameter control.\n- **Slider:** A linear slider for horizontal or vertical adjustments.\n- **Button:** A customizable button with styles suited for audio interfaces.\n- **CycleButton:** A discrete control for cycling through a set of options. Supports multiple visual variants (rotary knob-style, LED indicators, etc.).\n\n### Device Components\n\n- **Keys:** A responsive and interactive piano keyboard.\n\n### Generic Components\n\n- **FilmStrip Controls:** Bitmap sprite sheet-based controls (FilmStripContinuousControl, FilmStripDiscreteControl, FilmStripBooleanControl) for industry-standard control representation.\n- **Image-Based Controls:** Image-based knobs and switches (ImageKnob, ImageRotarySwitch, ImageSwitch) for custom visual designs.\n\n### Primitives\n\n- **Control Primitives:** Low-level control components (ContinuousControl, DiscreteControl, BooleanControl) for building custom controls.\n- **SVG Primitives:** SVG view primitives (ValueRing, RotaryImage, RadialImage, RadialText, TickRing, LabelRing) for composing custom radial controls.\n\n## Packages\n\nThis monorepo contains the following packages:\n\n| Package / Path                               | Description                                                                                                                                                                                                                                            |\n| -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `@cutoff/audio-ui-react` (`packages/react`)  | The React component library implementation, published to npm. Provides React components, hooks, and React-specific adapters that wrap the framework-agnostic core.                                                                                     |\n| `@cutoff/audio-ui-core` (`packages/core`)    | Framework-agnostic core package. Contains all business logic, models, controllers, utilities, and styles that are independent of any UI framework. Can be used by any framework implementation (React, Solid, Vue, etc.) or in non-framework contexts. |\n| `playground-react` (`apps/playground-react`) | A [Next.js](https://nextjs.org/) app for developing and testing components.                                                                                                                                                                            |\n\n**Architecture Note**: The library is designed with a clear separation between framework-agnostic core logic (`packages/core/`) and framework-specific implementations (`packages/react/`). The framework-agnostic architecture enables potential implementations for other frameworks that would share the same core logic.\n\n## Getting Started\n\n### Using the Component Library\n\nTo use AudioUI components in your project, install the `@cutoff/audio-ui-react` package from npm using the `preview` tag:\n\n```bash\npnpm add @cutoff/audio-ui-react@preview\n```\n\nYou will also need to install its peer dependencies:\n\n```bash\npnpm add react@^19.0.0 react-dom@^19.0.0\n```\n\n**Note**: AudioUI is currently in Developer Preview phase. The `preview` tag provides access to the latest preview releases with timestamped versions. For production use, we recommend pinning to a specific version once the first Developer Preview (dp.0) is released.\n\nHere is a basic example of how to use a component:\n\n```tsx\nimport React, { useState } from \"react\";\nimport { Knob } from \"@cutoff/audio-ui-react\";\nimport \"@cutoff/audio-ui-react/style.css\";\n\nfunction MyAudioModule() {\n  const [cutoff, setCutoff] = useState(75);\n\n  return (\n    \u003cdiv\u003e\n      \u003cKnob value={cutoff} onChange={setCutoff} label=\"Cutoff\" min={0} max={100} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Developing Locally\n\nTo develop AudioUI locally, clone the repository and install the dependencies:\n\n```bash\ngit clone https://github.com/cutoff/audio-ui.git\ncd audio-ui\npnpm install\n```\n\nThis monorepo uses `pnpm` workspaces. The primary packages are:\n\n- `@cutoff/audio-ui-react`: The React component library.\n- `@cutoff/audio-ui-core`: The framework-agnostic core logic.\n- `playground-react`: The Next.js playground application.\n\nTo start the development server, run:\n\n```bash\npnpm dev\n```\n\nThis command will start the Next.js playground application, which is used to develop and visually test the components from the library. The playground is the recommended environment for most development tasks.\n\n## Key Scripts\n\n- `pnpm dev`: Starts the playground application for local development.\n- `pnpm build`: Builds the `@cutoff/audio-ui-react` component library.\n- `pnpm typecheck`: Runs TypeScript checks across the entire monorepo.\n- `pnpm lint`: Lints the codebase.\n- `pnpm test`: Runs the test suite for the component library.\n\n## Licensing\n\nAudioUI by Cutoff is a dual-licensed project.\n\n- **Open Source (GPL-3.0):** You may use this library for free in open-source projects under the terms of the GNU General Public License v3.0.\n- **Commercial License:** For use in proprietary, closed-source applications, you must purchase a commercial license. This license removes the copyleft restrictions of the GPL and includes professional support.\n\nCommercial licenses are available at **[cutoff.dev](https://cutoff.dev)**.\n\nFor full details, please see the [LICENSE.md](license-telf/LICENSE.md) file and the documents within the [license-telf](license-telf/) directory.\n\n## Contributing\n\nWe welcome contributions to AudioUI. If you would like to contribute, please fork the repository and submit a pull request. All contributors must sign our Contributor License Agreement (CLA), which can be found in the `license-telf/` directory.\n\n## Community\n\nJoin our [Discord server](https://discord.gg/7RB6t2xqYW) for:\n\n- **Support**: Get help with using AudioUI in your projects\n- **Wish List**: Share feature requests and vote on upcoming additions\n- **General Discussions**: Connect with other developers building audio applications\n- **Announcements**: Stay updated on new releases and important updates\n","funding_links":["https://github.com/sponsors/cutoff","https://buymeacoffee.com/cutoff"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcutoff%2Faudio-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcutoff%2Faudio-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcutoff%2Faudio-ui/lists"}