No Preview

Sorry, but you either have no stories or none are selected somehow.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

The component failed to render properly, likely due to a configuration issue in Storybook. Here are some common causes and how you can address them:

  1. Missing Context/Providers: You can use decorators to supply specific contexts or providers, which are sometimes necessary for components to render correctly. For detailed instructions on using decorators, please visit the Decorators documentation.
  2. Misconfigured Webpack or Vite: Verify that Storybook picks up all necessary settings for loaders, plugins, and other relevant parameters. You can find step-by-step guides for configuring Webpack or Vite with Storybook.
  3. Missing Environment Variables: Your Storybook may require specific environment variables to function as intended. You can set up custom environment variables as outlined in the Environment Variables documentation.

Colors

Used for two main cases:

  • text: use prefix has-text- (for example has-text-white)
  • background: use prefix has-background- (for example has-background-white)
Name
Swatches
Monochromatic
black-bis#121212
black-ter#242424
grey-darker#363636
grey-dark#4a4a4a
grey#7a7a7a
grey-light#b5b5b5
grey-lighter#dbdbdb
white-ter#f5f5f5
white-bis#fafafa
Solid
white#ffffff
black#0a0a0a
light#f5f5f5
dark#363636
primary#00d1b2
link#3273dc
info#209cee
success#23d160
warning#ffdd57
danger#ff3860
Light
primary-light#ebfffc
link-light#eef3fc
info-light#eef6fc
success-light#effaf3
warning-light#fffbeb
danger-light#feecf0
primary-dark#00947e
link-dark#2160c4
info-dark#1d72aa
success-dark#257942
warning-dark#947600
danger-dark#cc0f35