paschalidi / carbon-components-react

React components for the Carbon Design System

Home Page:http://react.carbondesignsystem.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

carbon-components-react

Carbon Components is released under the Apache-2.0 license CircleCI All Contributors PRs welcome!

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-icons

If you prefer Yarn, use the following command instead:

yarn add carbon-components-react 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.

Edit carbon-components-react

Usage

List of Available Components

View available React Components here. You can see usage information in several ways:

  1. Clicking the blue Show Info icon in the top right corner of the selected component. You can see the list of available React props
  2. Clicking the STORY tab at the bottom. This tab contains the code that shows how the component is being used
  3. Clicking the KNOBS tab at the bottom and changing values there. Most knobs are shown as something like Button kind (kind), where kind is the name of React prop
  4. Clicking the ACTION LOGGER tab at the bottom and interacting with the selected component. You may see something like onClick which 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
  5. Clicking the README tab at the bottom. You can see some more document for some components

πŸ“š Documentation

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

πŸ’» πŸ› ⚠️ πŸ“–

Carlos Eduardo Monti

πŸ’» πŸ“–

Thomas Brown

πŸ’»

About

React components for the Carbon Design System

http://react.carbondesignsystem.com

License:Apache License 2.0


Languages

Language:JavaScript 99.9%Language:HTML 0.1%Language:CSS 0.0%