Skip to content

dash-ui/design-system

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation


A command line tool for creating design systems with Dash and Storybook

# 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

Storybook preview image

What's in the box?

  • UI component starter pack Alerts, badges, buttons, checkboxes, switches, and spinners, inputs, textareas, and icons.
  • Layout components exported from @dash-ui/react-layout: Box, Grid, Row, Column, and more!
  • Tailwind design tokens
  • Beautiful typography out of the box
  • Responsive props and styles from @dash-ui/responsive
  • Modern CSS reset
  • Accessibility
  • Auto-documentation with Storybook
  • Semantic versioning
  • Strongly typed with TypeScript
  • 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 For testing components and hooks
Prettier For formatting code, READMEs, and configs
ESLint For linting the design system
Standard Version Semantic releases made easy
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 <name> [--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