Open-source design system
for tomorrow's music apps.
For designers, developers, and vibe coders —
on every screen.
Overview
RDS (Reba Design System) is a comprehensive component library and design language built specifically for the music industry. It provides consistent, accessible, and performant interfaces for music applications.
For Developers
Copy-paste components built on shadcn/ui and Tailwind CSS. Full TypeScript support with predictable APIs.
For Designers
Consistent design tokens and patterns that translate directly from Figma to code. No guesswork.
For Vibe Coders
Using AI assistants like Claude or Cursor? RDS is designed with clear naming conventions and documentation that AI tools understand.
Design System Structure
RDS follows atomic design methodology. Start with foundations, build primitives, compose patterns, and apply guidelines for consistent implementation.
Principles
The 10 guiding philosophies that shape every RDS decision. Start here to understand our approach.
- Atomic First
- Music-Business Native
- Accessible by Default
Tokens
Design tokens that define the visual language: colors, typography, spacing, and icons.
- Colors & Themes
- Typography Scale
- Spacing System
Primitives
The atomic building blocks. Single-purpose components that compose into larger patterns.
- RdsLogo
- Button
- Input
- Badge
Patterns
Higher-level compositions that combine primitives into reusable layouts and workflows.
- Page Layouts
- Form Patterns
- Data Tables
Core Systems
Specialized component systems for common music industry needs. These are built on top of primitives with domain-specific logic.
Media System
Unified audio, video, and MIDI playback components with consistent state management via MediaCore. Timeline comments, waveform visualization, and cross-platform casting support.
VideoEmbed - YouTube, Vimeo, MP4
AudioPlayer - Native HTML5 audio
MidiPlayer - Skeleton (Phase 2)
MediaCore - Unified state management
Comment System
Generic, data-agnostic comment UI components. Works with any backend and integrates with Media components for timeline comments (SoundCloud-style markers).
CommentList - Display comments with avatars
CommentForm - Submit new comments
MediaComment utilities - Type conversion
AI Elements
AI assistant UI components designed for conversational interfaces. Built for integration with Vercel AI SDK and streaming responses. Chat panels, message bubbles, and prompt inputs.
RdsAiChat - Complete chat interface
RdsAiMessage - Streaming message display
RdsAiPrompt - Input with suggestions
Charts
Data visualization components built on Recharts. Consistent theming with RDS design tokens, responsive sizing, and accessible tooltips. Perfect for analytics dashboards and metrics.
RdsChartContainer - Responsive wrapper
RdsChartTooltip - Themed tooltips
RdsChartLegend - Customizable legends
Component Library
All available components organized by category. Built on shadcn/ui with custom extensions for music industry needs.
Layout Components
Page structure and navigation components for consistent app layouts.
UI Components
Core shadcn/ui components: buttons, inputs, dialogs, and more.
Media Components
Audio, video, and MIDI players with unified MediaCore state.
AI Elements
Chat interfaces, message components, and prompt inputs for AI features.
Charts
Data visualization with Recharts: bar, line, area, pie, and more.
Form Patterns
Complex form compositions for settings, releases, and uploads.
Guidelines
Role-specific guidance for getting the most out of RDS. Whether you're vibing with AI, designing screens, or shipping code.
For Vibe Coders
Using AI assistants to build with RDS? This guide covers prompting patterns, component discovery, and how to leverage documentation effectively with Claude, Cursor, and other AI tools.
- Naming conventions & folder structure
- AI prompting best practices
- Proposing new components
For Designers
Design with RDS foundations in Figma. Understand token mapping, component variants, and how to hand off designs that translate directly to production code.
- Using foundations & primitives
- Figma library workflow
- Design-to-code handoff
For Developers
Technical deep-dives into RDS architecture. Learn about composition patterns, performance optimization, accessibility implementation, and extending components.
- Importing RDS components
- Contribution workflow
- Code standards & PR checklist
Quick Reference
Jump to commonly used resources and external documentation.
Ready to build?
Start with the principles to understand our approach, then dive into the component library to find what you need.