@music-vine/cadence

> View full documentation →

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

Installation

``bash
npm install @music-vine/cadence
`

Usage

$3

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

function App() {
return (



);
}
`

$3

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

function Player() {
return (



);
}
`

$3

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

function App() {
return (
<>
toast.success('Success!')}>Show Toast


);
}
`

Tailwind Configuration

Extend your Tailwind config with the Cadence theme:

`js
// 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+:

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

Development

$3

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

`bash


Build the package

npm run build:packages

Watch mode for development

npm run dev:packages
`

$3

View and develop components in isolation:

`bash
cd packages/cadence
npm run storybook
`

$3

1. Create a changeset when making changes:
`bash
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.