Docs / Introduction
Introduction
Reba Design System (RDS) is an open-source component library built for multimedia platforms — podcasting apps, streaming tools, audio dashboards, and video experiences. It’s built on shadcn/ui and Tailwind CSS with copy-paste components, full TypeScript support, and documentation designed to work with AI coding tools like Cursor and Claude.
RDS is not a traditional npm package you import. It’s a copy-paste system — you own the code.
Highlights
63+ Components
UI, Media, AI, Charts, Layouts
Built on shadcn/ui
Radix primitives, Tailwind CSS, TypeScript
AI-native docs
Works out of the box with Cursor, Claude, Copilot
Quick Install
npx shadcn@latest initnpx shadcn@latest add buttonWhat’s in RDS
RDS is organized into four layers — design tokens, elements, patterns, and full-page templates.
Tokens
Color, typography, spacing, radius, shadows, motion
Elements — UI Core
27 shadcn/ui primitives with RDS defaults
Elements — Media
AudioPlayer, VideoPlayer, WaveformDisplay, TransportBar
Elements — AI
AiChat, AiMessage, AiPrompt components
Elements — Charts
Data visualization on Recharts with RDS tokens
Composition
Layouts, Patterns, Templates — assembled from primitives
Principles
Five ideas that shape every component, token, and documentation decision in RDS.
1. Copy-paste first
You own the code. No black-box abstractions.
RDS components are designed to be copied directly into your project. There's no library to update, no breaking changes to absorb — just code you control.
2. Composable by design
Small pieces that combine cleanly.
Every component does one thing well. Compose them together to build complex interfaces without fighting the system.
3. Accessible by default
ARIA, keyboard navigation, and focus management — built in.
RDS components are built on Radix UI primitives, which handle the hard parts of accessibility so you don't have to think about it. Keyboard navigation, screen reader support, and focus trapping come standard.
4. AI-native documentation
Your AI tools understand RDS out of the box.
Every component page is written for both humans and AI assistants. The naming conventions, prop descriptions, and code examples are structured so Cursor, Claude, and Copilot can suggest the right component without extra prompting.
5. Multimedia-aware
Built for the use cases most design systems ignore.
RDS includes first-class components for audio players, waveform displays, timeline comments, and media transport controls — the building blocks of podcasting apps, streaming platforms, and audio tools.
Guidelines
Practical rules for building with RDS consistently.
Typography
Use the three-font system intentionally:
font-display(Instrument Serif) — hero headings, large display text only. Don’t use for body copy.font-mono(DM Mono) — code blocks, labels, tags, timestamps, numeric data.font-sans(DM Sans) — everything else: body, UI text, captions.
Color
RDS uses a single ink color at varying opacities for hierarchy:
text-foreground— primary text (full ink)text-muted-foreground— secondary text (~60% opacity)text-muted-foreground/60— disabled / hint text
Avoid introducing custom colors. Use semantic tokens: bg-background, bg-card, border-border.
Spacing
gap-2(8px) — tight groups (icon + label)gap-4(16px) — form fields, card internalsgap-6(24px) — section contentgap-8(32px) — between major sections
Component Rules
- Always use
asChildon triggers when passing a custom element (e.g. Next.js Link inside Button) - Always pair inputs with a Label using matching
id/htmlFor - Use
cn()utility for conditional classNames — never string concatenation
Do / Don’t
| Do | Don’t |
|---|---|
| Use font-mono for timestamps and numeric data | Use serif fonts for body copy |
| Use semantic color tokens | Hardcode hex values in className |
| Use asChild to forward props to custom elements | Wrap components in unnecessary divs |
| Use Sonner (toast) for notifications | Use the legacy Toast component |
| Show skeleton while content loads | Show empty space or layout shift |