@music-vine/cadence

View full documentation →

Cadence Design System - UI components and icons for Uppbeat applications.

Installation

npm install @music-vine/cadence

Usage

Components

import { Button, Text, Heading } from '@music-vine/cadence/ui';

function App() {
  return (
    <div>
      <Heading>Welcome</Heading>
      <Text>Hello world</Text>
      <Button>Click me</Button>
    </div>
  );
}

Icons

import { Play, Pause, Music } from '@music-vine/cadence/icons';

function Player() {
  return (
    <button>
      <Play />
    </button>
  );
}

Toast Notifications

import { toast, Toaster } from '@music-vine/cadence/ui';

function App() {
  return (
    <>
      <button onClick={() => toast.success('Success!')}>Show Toast</button>
      <Toaster />
    </>
  );
}

Tailwind Configuration

Extend your Tailwind config with the Cadence theme:

// tailwind.config.js
import cadenceConfig from '@music-vine/cadence/tailwind.config';

export default {
  presets: [cadenceConfig],
  content: [
    './src/**/*.{js,ts,jsx,tsx}',
    './node_modules/@music-vine/cadence/dist/**/*.js',
  ],
};

Available Exports

| Export | Description | |--------|-------------| | @music-vine/cadence/ui | React UI components (Button, Text, Card, etc.) | | @music-vine/cadence/icons | Lucide icons + custom Uppbeat icons | | @music-vine/cadence/styles | Base CSS styles | | @music-vine/cadence/tailwind.config | Tailwind CSS preset with Uppbeat theme |

Components

The following components are available:

• Layout: Card, Separator, ScrollArea
• Typography: Text, Heading
• Forms: Button, Input, Textarea, Checkbox, RadioGroup, Select, Slider, Label
• Feedback: Toast, Badge, Skeleton
• Overlay: Dialog, Drawer, Popover, ContextMenu
• Navigation: Tabs, Accordion, Carousel, Breadcrumb

Peer Dependencies

This package requires React 19+:

{
  "react": "^19.0.0",
  "react-dom": "^19.0.0"
}

Development

Local Development

For local development within the monorepo, the package is automatically linked via npm workspaces.

# Build the package
npm run build:packages

# Watch mode for development
npm run dev:packages

Storybook

View and develop components in isolation:

cd packages/cadence
npm run storybook

Creating a Release

1. Create a changeset when making changes:

   npx changeset

2. Select @music-vine/cadence, choose semver bump, write summary

3. Commit the changeset file with your changes

4. When merged to develop/main, GitHub Actions will create a release PR

5. Merging the release PR publishes to npm automatically

License

Private package for Music Vine applications.