Cadence Design System - UI components and icons for Uppbeat
npm install @music-vine/cadenceCadence Design System - UI components and icons for Uppbeat applications.
``bash`
npm install @music-vine/cadence
`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 (
<>
>
);
}
`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:packagesWatch 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 summary3. 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
Private package for Music Vine applications.