carbon-components-react
A collection of Carbon Components implemented using React.
Getting Started
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.
Usage
List of Available Components
View available React Components here. You can see usage information in several ways:
- Clicking the blue Show Info icon in the top right corner of the selected component. You can see the list of available React props
- Clicking the STORY tab at the bottom. This tab contains the code that shows how the component is being used
- Clicking the KNOBS tab at the bottom and changing values there. Most knobs are shown as something like
Button kind (kind), wherekindis the name of React prop - Clicking the ACTION LOGGER tab at the bottom and interacting with the selected component. You may see something like
onClickwhich typically indicates that the event handler (React prop) with the same name is called. You can also expand the twistie to see the details of the event - Clicking the README tab at the bottom. You can see some more document for some components
📚 Documentation
- See our documentation site here for full how-to docs and guidelines
- Contributing: Guidelines for making contributions to this repo
🏃♀️ Migration Guides
Contributing
Please check out our Contribution Guidelines for detailed information on how you can lend a hand.
To update the Contributors section, follow these instructions
Contributors
Thanks goes to these wonderful people:
