Installation

1. npm i @riskchallenger/open-components
2. Import main.css in your application, here are some options depending on your bundler
   1. @import "@riskchallenger/open-components/main.css";
   2. @import "npm:@riskchallenger/open-components/main.css";
   3. @import "/node_modules/@riskchallenger/open-components/main.css";
3. That's it 😄

Getting started

Brand color

All you need to do is set a brand color. Hover over the options above to get the color name. Check out the Usage-tab to have a preview of the components in your brands color. These options are from the color-scheme on Open Props. However, feel free to use any other color you like.

Border radius

If you want a straight corner look, simply set the default border radius to 0. Check the example below

Font size

If you want to change the font-size, simply do so as in the below examples.

Examples

These are the default values in Open Components.

html {
  --brand: var(--cyan-6);
  --default-radius: var(--radius-2);
  --default-font-size: 16px;
}

Here's an example for a pink theme with straight corners and smaller text.

html {
  --brand: var(--pink-6);
  --default-radius: 0;
  --default-font-size: 12px;
}