https://github.com/downbeat-academy/cadence-design-system
https://github.com/downbeat-academy/cadence-design-system
Last synced: 3 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/downbeat-academy/cadence-design-system
- Owner: downbeat-academy
- Created: 2021-11-12T02:33:47.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2022-07-02T18:28:49.000Z (almost 3 years ago)
- Last Synced: 2025-03-18T16:58:05.406Z (3 months ago)
- Language: TypeScript
- Homepage: https://cadence.downbeatacademy.com
- Size: 4.95 MB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Cadence Design System
Design system and component library for the Cadence design system. Built and developed by Downbeat Academy to accelerate the development of new applications and products empower music education.
Find out more information about Downbeat Academy [here](https://downbeatacademy.com).
See usage and documentation in the Cadence [Storybook](https://cadence.downbeatacademy.com) instance.
## Built with
- [NextJS starter](https://nextjs.org/)
- TypeScript
- [Stitches styled library](https://stitches.dev/)
- [Radix component primitives](https://www.radix-ui.com/)
- [Storybook](https://storybook.js.org/)
## Beta status
This library is still in Beta, star it on Github to stay informed on updates. Here's the current status and tasks that are in progress to make this library production-ready for Downbeat Academy.
- Inputs and data handling
- Checkbox and radio buttons
- Status badge
- Music notation rendering
- Feedback and notifications
- Button grouping
Cadence Design System is open source, if you want to contribute reach out! Downbeat Academy and the Cadence Design System are labors of love for me, but I hope to expand the footprint, content, and product offering of Downbeat Academy to reach more musicians, students, and educators to help them advance as creators.
# Installing & Usage
Install using your package manager of choice.
```
// yarn
yarn add cadence-design-system
// npm
npm install cadence-design-system
```
Import individual components as named imports:
```
import { Button, Flex, Paragraph } from 'cadence-design-system'
export default function Page() {
return (
This is a button.
console.log('You clicked the button!')}>Click the button
)
}
```
## Styling
Cadence Design System uses Stitches by default for styling and is currently tied to Downbeat Academy brand foundations and styling by default. I'm working to make the styling more library-agnostic and allow custom styling of components.