rds
Back to Design System

Primitives

The atomic building blocks of the Reba Design System

Atomic Components
shadcn/ui
Radix UI

Overview

Primitives are single-purpose, low-level components that serve as the foundation for all higher-level patterns. They're designed to be composed together to create more complex UI. Each primitive does one thing well and provides a predictable API.

Philosophy: Composition over configuration

Styling: Tailwind CSS with CSS variables

Accessibility: Built on Radix UI primitives

API: Predictable props, consistent patterns

Buttons

Interactive elements for triggering actions. Available in multiple variants and sizes.

Variants

Sizes

States

Usage

import { Button } from "@/components/ui/button"

/* Basic usage */
<Button>Click me</Button>

/* With variant and size */
<Button variant="outline" size="lg">Large Outline</Button>

/* With icon */
<Button>
  Continue <ArrowRight className="ml-2 h-4 w-4" />
</Button>

/* Disabled state */
<Button disabled>Disabled</Button>

Inputs

Text input fields for collecting user data. Supports various types and states.

Basic Input

With Labels

States

Usage

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

/* Basic usage */
<Input placeholder="Enter text..." />

/* With label */
<div className="space-y-2">
  <Label htmlFor="email">Email</Label>
  <Input id="email" type="email" placeholder="email@example.com" />
</div>

/* Disabled */
<Input disabled placeholder="Disabled" />

Cards

Container component for grouping related content. The foundation for many patterns.

Basic Card

Card Title

This is a basic card with some content. Cards provide a consistent container for grouping related information.

Variations

Default Card

Standard card with border

Muted Background

Card with subtle background

With Shadow

Elevated card with shadow

Accent Border

Card with brand border

Usage

import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card"

/* Simple card */
<Card className="p-6">
  <h3 className="font-semibold">Title</h3>
  <p>Content goes here</p>
</Card>

/* Structured card */
<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card description</CardDescription>
  </CardHeader>
  <CardContent>
    Main content here
  </CardContent>
</Card>

Form Elements

Additional form controls for boolean values and selections.

Checkbox

Switch

Usage

import { Checkbox } from "@/components/ui/checkbox"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

/* Checkbox */
<div className="flex items-center space-x-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms</Label>
</div>

/* Switch */
<div className="flex items-center space-x-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Enable notifications</Label>
</div>

Layout Primitives

Building blocks for creating consistent page structures and component layouts.

Separator

Content above separator

Content below separator

Badge

Default
Secondary
Destructive
Outline

Planned Primitives

!

TODO: Additional Primitives

  • Avatar - User profile pictures with fallback
  • Skeleton - Loading placeholders
  • Tooltip - Contextual help on hover
  • Progress - Progress indicators
  • Slider - Range input control

Usage

import { Badge } from "@/components/ui/badge"
import { Separator } from "@/components/ui/separator"

/* Badge */
<Badge>New</Badge>
<Badge variant="destructive">Error</Badge>

/* Separator */
<div>
  Content above
  <Separator className="my-4" />
  Content below
</div>

RDS-Specific Primitives

Custom primitives unique to the Reba Design System.

RDSLogo

40px

60px

80px

!

TODO: Music-Industry Primitives

  • ArtworkImage - Album/release artwork with fallback
  • TrackNumber - Formatted track position display
  • Duration - Time duration formatter
  • ISRC - ISRC code display with validation
  • TerritoryBadge - Country/territory indicators

Usage

import { RDSLogo } from "@/components/primitives/rds-logo"

/* RDS Logo in different sizes */
<RDSLogo size="sm" />  {/* 32px */}
<RDSLogo size="md" />  {/* 48px */}
<RDSLogo size="lg" />  {/* 64px */}

/* With custom color */
<RDSLogo className="text-gray-950" />

Component Index

Quick reference for all primitive components and their file locations.

Button

Ready

src/components/ui/button.tsx

Input

Ready

src/components/ui/input.tsx

Card

Ready

src/components/ui/card.tsx

Checkbox

Ready

src/components/ui/checkbox.tsx

Switch

Ready

src/components/ui/switch.tsx

Badge

Ready

src/components/ui/badge.tsx

Label

Ready

src/components/ui/label.tsx

RDSLogo

Ready

src/components/primitives/rds-logo.tsx