/design-system

FireHydrant flavored React component library, built using Chakra UI

Primary LanguageJavaScript


🌈 FireHydrant Design System 🦄

FireHydrant flavored React component library, built using Chakra UI, and a custom theme layer.

Storybook playroom

latest release chromatic playroom

installation

The package is registered on GitHub's package registry, added via .npmrc

Access to this registry requires authentication with GitHub tokens. These tokens are private and should not be committed to any project, accessed instead via environment variable.

GitHub token as environment variable

  1. Go to https://github.com/settings/tokens and create a token with at least read:package access

  2. Set the token (paste into either ~/.zshrc OR ~/.bashrc)

    export GITHUB_TOKEN=<your token>

  3. Open a new terminal window (or source the edited .*rc file)

Add to project

yarn add @firehydrant/design-system

or

npm i @firehydrant/design-system --save

usage

Our components require a ThemeProvider to wrap your application. By default the FireHydrant theme is included with our provider.

// import themeprovider from our package
import { ThemeProvider } from '@firehydrant/design-system';

// wrap your application
<ThemeProvider>
  <App />
</ThemeProvider>;

For a list of all components & properties, refer to Storybook ↗️

Storybook

contributors

7 Contributors

💡 Want to contribute? Check out the Contributing Guidelines

Contributions of any kind are welcome!

Thanks goes to these wonderful people (emoji key):


Casey Hunt
🚧
Jax Engel
🎨
Josh Hamilton
💻
Robert Ross
📖 💻
Hilary Beck
💻
Brian Han
💻
Tristan Free
🎨

This project follows the all-contributors specification.

changelog

Interested in what changed lately? Check out the CHANGELOG

acknowledgements

Thank you to the following projects, upon which this Design System is built: