https://github.com/dash-ui/design-system
A command line tool for creating design systems with @dash-ui and @storybookjs
https://github.com/dash-ui/design-system
component-library dash dash-ui design-system design-system-kit react-component-library react-design-system storybook storybook-design-system storybookjs
Last synced: 29 days ago
JSON representation
A command line tool for creating design systems with @dash-ui and @storybookjs
- Host: GitHub
- URL: https://github.com/dash-ui/design-system
- Owner: dash-ui
- Created: 2020-08-09T17:08:06.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2021-09-26T23:05:56.000Z (over 4 years ago)
- Last Synced: 2025-11-04T00:20:37.241Z (6 months ago)
- Topics: component-library, dash, dash-ui, design-system, design-system-kit, react-component-library, react-design-system, storybook, storybook-design-system, storybookjs
- Language: TypeScript
- Homepage:
- Size: 345 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
> A command line tool for creating design systems with [Dash](https://github.com/dash-ui) and [Storybook](https://github.com/storybookjs)
```sh
# Using npx
npx @dash-ui/design-system my-design-system
# OR using a global install
yarn global add @dash-ui/design-system
create-design-system my-design-system
# Start Storybook in the design system directory
cd my-design-system
yarn storybook
```
## Preview
- Check out the [Storybook stories](https://dash-design-system.now.sh) generated by the default design system created by this command
- View an [example of the library](https://github.com/dash-ui/examples/tree/main/design-system) created by this command
## What's in the box?
- [x] **UI component starter pack** Alerts, badges, buttons, checkboxes, switches,
and spinners, inputs, textareas, and icons.
- [x] **Layout components** exported from [`@dash-ui/react-layout`](https://github.com/dash-ui/react-layout):
Box, Grid, Row, Column, and more!
- [x] [**Tailwind**](https://tailwindcss.com/) design tokens
- [x] **Beautiful typography** out of the box
- [x] **Responsive props and styles** from [`@dash-ui/responsive`](https://github.com/dash-ui/responsive)
- [x] **Modern CSS reset**
- [x] **Accessibility**
- [x] **Auto-documentation** with [Storybook](https://github.com/storybookjs)
- [x] **Semantic versioning**
- [x] **Strongly typed** with TypeScript
- [x] **Modern build system** automatically generates ESM, UMD, CJS, modules, and types based
upon the `"exports"` field in the package.json
### Build tools
The design system comes with a variety of build tools that allow you to release with confidence
| Tool | Description |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
| React | This starter pack is built in React |
| TypeScript | Your design system should have strong types and autocomplete |
| Storybook | Write your documentation as you code and build bulletproof UI components |
| Yarn | Because I said so |
| Jest + [@testing-library](https://github.com/testing-library) | For testing components and hooks |
| Prettier | For formatting code, READMEs, and configs |
| ESLint | For linting the design system |
| [Standard Version](https://github.com/conventional-changelog/standard-version) | Semantic releases made easy |
| [Commitlint](https://github.com/conventional-changelog/commitlint) | Lints your commit messages |
| Lundle | A build tool that automatically generates UMD, ESM, CJS, modules, and types based upon the `"exports"` field in the package.json |
| Travis CI | (Optional) For continuous integration |
## Usage
#### `create-design-system [--user=githubUsername] [--org=githubOrg] [--scope=npmOrg] [--no-git]`
| Argument | Type | Required | Description |
| -------- | --------- | -------- | --------------------------------------------------------------------------------------------------------------- |
| name | `string` | Yes | The name of the package you're creating. This is also the name of the directory the package will be created in. |
| user | `string` | No | Your GitHub username |
| org | `string` | No | A GitHub organization name where the repo should live |
| scope | `string` | No | An npm organization |
| no-git | `boolean` | No | Create the package without initializing a `git` repo |
## LICENSE
MIT