# bytes-design-system

> This skill should be used when working with the LiveKit bytes design system. It provides comprehensive reference for the three-tier component hierarchy, design tokens, component catalog, CVA patterns, and Radix UI composition patterns.

- Author: ddotolo-live
- Repository: ddotolo-live/compound-engineering-kit
- Version: 20260208215425
- Stars: 0
- Forks: 0
- Last Updated: 2026-02-09
- Source: https://github.com/ddotolo-live/compound-engineering-kit
- Web: https://mule.run/skillshub/@@ddotolo-live/compound-engineering-kit~bytes-design-system:20260208215425

---

---
name: bytes-design-system
description: This skill should be used when working with the LiveKit bytes design system. It provides comprehensive reference for the three-tier component hierarchy, design tokens, component catalog, CVA patterns, and Radix UI composition patterns.
---

# Bytes Design System

This skill provides comprehensive reference documentation for the LiveKit bytes design system, a three-tier component library built with React, Radix UI, CVA, and Tailwind CSS 4.

## When to Use This Skill

Use this skill when:
- Creating new components for the design system
- Looking up existing component APIs and props
- Understanding design token naming conventions
- Implementing CVA variant patterns
- Composing components with Radix UI primitives
- Setting up theming with `data-lk-theme`

## Three-Tier Architecture

### Tier 1: `@repo/bytes-core` (Design Tokens)
CSS custom properties defining the visual foundation. No React code.
- See [DESIGN_TOKENS.md](./references/DESIGN_TOKENS.md) for the complete token reference.

### Tier 2: `@repo/bytes-react` (Generic Components)
52 reusable React components with no LiveKit business logic.
- See [COMPONENT_CATALOG.md](./references/COMPONENT_CATALOG.md) for the full component list with props.

### Tier 3: `@repo/bytes-oss` (LiveKit-Specific Components)
Components with LiveKit business logic, built on bytes-react.

## Key References

- [COMPONENT_CATALOG.md](./references/COMPONENT_CATALOG.md) — All 52 bytes-react components with props and usage
- [DESIGN_TOKENS.md](./references/DESIGN_TOKENS.md) — CSS variable naming, color system, typography, spacing
- [COMPOSITION_PATTERNS.md](./references/COMPOSITION_PATTERNS.md) — Radix composition, CVA patterns, tailwind-merge usage

## Quick Start

```tsx
import { Button } from "@repo/bytes-react";

export function MyComponent() {
  return (
    <Button variant="default" size="md">
      Click me
    </Button>
  );
}
```

## Development

```bash
# Start Storybook for component development
pnpm --filter @repo/bytes-core storybook    # Port 6001
pnpm --filter @repo/bytes-react storybook   # Port 6002
pnpm --filter @repo/bytes-oss storybook     # Port 6003
```