Carbon Components React

A collection of Carbon Components implemented using React.

Usage

List of Available Components

View available React Components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.

Getting Started

npm install -S carbon-react-agave carbon-components carbon-icons
# Or, with yarn
yarn add carbon-react-agave carbon-components carbon-icons

1. These components require the use of Webpack in your project. See our webpack.config.js for an example configuration.

2. Components do not import any of the styles themselves, use the scss or css from carbon-components to bring in styling. You can also use the unpkg cdn to bring in the styles wholesale - unpkg.com/carbon-components/css/carbon-components.css aliases the latest css file.

3. For older browsers (e.g. IE11), polyfills listed in carbon-components-react/.storybook/polyfills.js file is required.

If you just want to try out carbon-components-react, you can also use Codesandbox.

Development

Please refer to the Contribution Guidelines before starting any work.

Using the server

We recommend the use of React Storybook for developing components.

1. (Optional) Set true to CARBON_USE_EXPERIMENTAL_FEATURES environment variable to test some of the experimental features:

   $ export CARBON_USE_EXPERIMENTAL_FEATURES=true

2. Start the server:

   $ yarn storybook

3. Open browser to http://localhost:9000/.

4. Develop components in their respective folders (/components or /internal).

5. Write stories for your components in /.storybook.

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:

| Brian Han💻 | Chris Dhanaraj💻 | Nick Sandonato💻 | TJ Egan💻 | Mari Johannessen💻 | Sam Doyle💻 | alex weidner💻 | | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | | Ciaran Hannigan💻 | Ian Fleming💻 | Eddie Monge💻 | Reinaldo Cruz💻 | Yu Cao💻 | Megan Becvarik💻 | Astha💻 | | Jason Lengstorf💻 | Nathan Friedly💻 | Matt Hamann💻 | Greg💻 | Anthony Oliveri💻 | Jorge Padilla💻 | German Attanasio💻 | | Ritchie Martori💻 | Akira Sudoh💻 | holmansze💻 | Josh Black💻 📖 💡 🚇 | Tayler Aitken🎨 📖 | Bethany Sonefeld🎨 | Dmitri Wolf💻 | | James💻 | Kade Keith💻 | Mira Murali💻 | alisonemiller💻 | bjones526💻 | sandhya-r-reddy💻 | Alison Joseph💻 | | Dogukan💻 | Erika Dsouza💻 | Jeroen Schaftenaar💻 | Joseph Meis💻 | Paul Sachs💻 | Ryan Mackey💻 | Toni💻 | | shyfruan💻 | Joseph Gordon💻 | Logan McCaul💻 | Matt Chapman💻 | Scott Dickerson💻 | Darío Hereñú💻 | James Zhang💻 | | Simone Riccardelli💻 | Tom💻 | Zeus Courtois💻 | Andrew Daniel🐛 💻 | Andy🐛 💻 | Nicholas Lee💻 | David Menendez💻 | | Prashant Farkya💻 | Tibor Cz📖 | Xixiang Chen💻 | s100💻 | Becca Ellsworth💻 | Zack Grossbart💻 | Yohanna Gadelrab💻 🐛 ⚠️ 📖 |