A collection of Carbon Components implemented using React.
View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.
Run the following command using npm:
npm install -S carbon-components-react carbon-components carbon-iconsIf you prefer Yarn, use the following command instead:
yarn add carbon-components-react carbon-components carbon-icons-
These components require the use of Webpack in your project. See our
webpack.config.jsfor an example configuration. -
Components do not import any of the styles themselves, use the scss or css from
carbon-componentsto bring in styling. You can also use theunpkgcdn to bring in the styles wholesale -unpkg.com/carbon-components/css/carbon-components.cssaliases the latest css file. -
For older browsers (e.g. IE11), polyfills listed in
carbon-components-react/.storybook/polyfills.jsfile is required.
If you just want to try out carbon-components-react, you can also use Codesandbox.
Please refer to the Contribution Guidelines before starting any work.
We recommend the use of React Storybook for developing components.
-
(Optional) Set environment variables:
-
truetoCARBON_USE_EXPERIMENTAL_FEATURESenvironment variable to test some of the experimental features:$ export CARBON_USE_EXPERIMENTAL_FEATURES=true -
truetoCARBON_REACT_STORYBOOK_USE_EXTERNAL_CSSenvironment variable to use external CSS, making style source link usable in DOM inspector:$ export CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=true -
truetoCARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAPenvironment variable to use Sass source map, making style source link point to the original Sass code:$ export CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true
-
Caveats:
CARBON_REACT_STORYBOOK_USE_EXTERNAL_CSS=trueandCARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=truemake WebPack builds slightly slower.- With
CARBON_REACT_STORYBOOK_USE_STYLE_SOURCEMAP=true, the source map (hitting style source link in DOM inspector) sometimes leads you to a mix-in, instead of a style rule calling the mix-in, which may get you lost.
-
Start the server:
$ yarn storybook -
Open browser to
http://localhost:9000/. -
Develop components in their respective folders (
/componentsor/internal). -
Write stories for your components in
/.storybook.
Please check out our Contribution Guidelines for detailed information on how you can lend a hand.
To update the Contributors section, follow these instructions
Thanks goes to these wonderful people:
