Docs at https://riskchallenger.github.io/open-components/
npm i @riskchallenger/open-components
Import main.css in your application, here are some options depending on your bundler:
@import "@riskchallenger/open-components/main.css";
@import "npm:@riskchallenger/open-components/main.css";
@import "/node_modules/@riskchallenger/open-components/main.css";
That's it 😄
All you need to do is set a brand color. Go to the Usage-tab to have a preview of the components in your brand color. These options are from the color-scheme on Open Props. However, feel free to use any other color you like.
If you want a straight corner look, simply set the default border radius to 0. Check the example below
If you want to change the font-size, simply do so as in the below 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;
}
To learn how to use the components, simply check out the Usage tab on the Open Components website where you can see them all in action with code samples as well. Check here: https://riskchallenger.github.io/open-components/
- Buttons
- Inputs (including autocomplete)
- Selects
- Checkboxes / radios
- Textareas
- Icons
- Tabs / tab-menu
- Modals
- Tooltips
- Toasts
- Progress bars?
- Pills?
- Suggestions are welcome! Please do make an issue 😄