carbon-components/README.md

# carbon-components

[![Carbon Components is released under the Apache-2.0 license](https://img.shields.io/badge/license-Apache--2.0-blue.svg)](./LICENSE)
[![Build Status](https://travis-ci.org/IBM/carbon-components.svg?branch=master)](https://travis-ci.org/IBM/carbon-components)
[![PRs welcome!](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](./.github/CONTRIBUTING.md)

The Carbon Design System is a series of individual styles and components, that when combined make beautiful, intuitive designs. These designs are systemic and logical, as they all follow the same universal principles.

The component library gives developers a collection of re-usable HTML and SCSS partials for building their products.

## Getting started

To install `carbon-components` in your project, you will need to run the
following command using [npm](https://www.npmjs.com/):

```bash
npm install -S carbon-components
```

If you prefer [Yarn](https://yarnpkg.com/en/), use the following
command instead:

```bash
yarn add carbon-components
```

If you just want to try out `carbon-components`, you can also use [CodeSandbox](https://codesandbox.io).

[![Edit carbon-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/IBM/carbon-components/tree/master/examples/codesandbox)

(**Important note**: `src` directory in the package has been deprecated and subject to breaking changes. Please use `es`/`umd`/`scss` directories instead)

# :books: Documentation

- See our documentation site [here](http://carbondesignsystem.com/getting-started/developers) for full how-to docs and guidelines
- [Contributing](/.github/CONTRIBUTING.md): Guidelines for making contributions to this repo.
- [🏃‍♀️ Migration Guides](./docs/migration)
  - [v9 to v10](./docs/migration/migrate-to-10.x.md)

## Contributors

<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
<!-- prettier-ignore -->
| [<img src="https://avatars3.githubusercontent.com/u/4185382?v=4" width="100px;"/><br /><sub><b>Brian Han</b></sub>](https://github.com/hellobrian)<br />[💻](https://github.com/IBM/carbon-components/commits?author=hellobrian "Code") [📖](https://github.com/IBM/carbon-components/commits?author=hellobrian "Documentation") [👀](#review-hellobrian "Reviewed Pull Requests") [✅](#tutorial-hellobrian "Tutorials") | [<img src="https://avatars1.githubusercontent.com/u/11928039?v=4" width="100px;"/><br /><sub><b>TJ Egan</b></sub>](http://tjegan.com/)<br />[💻](https://github.com/IBM/carbon-components/commits?author=tw15egan "Code") [📖](https://github.com/IBM/carbon-components/commits?author=tw15egan "Documentation") [👀](#review-tw15egan "Reviewed Pull Requests") [✅](#tutorial-tw15egan "Tutorials") | [<img src="https://avatars0.githubusercontent.com/u/5447411?v=4" width="100px;"/><br /><sub><b>Mari Johannessen</b></sub>](http://www.marijohannessen.com)<br />[💻](https://github.com/IBM/carbon-components/commits?author=marijohannessen "Code") [📖](https://github.com/IBM/carbon-components/commits?author=marijohannessen "Documentation") [👀](#review-marijohannessen "Reviewed Pull Requests") [✅](#tutorial-marijohannessen "Tutorials") | [<img src="https://avatars2.githubusercontent.com/u/2753488?s=400&v=4" width="100px;"/><br /><sub><b>Alison Joseph</b></sub>](https://github.com/alisonjoseph)<br />[💻](https://github.com/IBM/carbon-components/commits?author=alisonjoseph "Code") [📖](https://github.com/IBM/carbon-components/commits?author=alisonjoseph "Documentation") [👀](#review-alisonjoseph "Reviewed Pull Requests") [✅](#tutorial-alisonjoseph "Tutorials") | [<img src="https://avatars3.githubusercontent.com/u/3901764?s=400&v=4" width="100px;"/><br /><sub><b>Josh Black</b></sub>](https://github.com/joshblack)<br />[💻](https://github.com/IBM/carbon-components/commits?author=joshblack "Code") [📖](https://github.com/IBM/carbon-components/commits?author=joshblack "Documentation") [👀](#review-joshblack "Reviewed Pull Requests") [✅](#tutorial-joshblack "Tutorials") | [<img src="https://avatars2.githubusercontent.com/u/12533409?s=460&v=4" width="100px;"/><br /><sub><b>Alessandra Davila</b></sub>](https://github.com/aledavila)<br />[💻](https://github.com/IBM/carbon-components/commits?author=aledavila "Code") [📖](https://github.com/IBM/carbon-components/commits?author=aledavila "Documentation") [👀](#review-aledavila "Reviewed Pull Requests") [✅](#tutorial-aledavila "Tutorials") | [<img src="https://avatars2.githubusercontent.com/u/1266014?v=4" width="100px;"/><br /><sub><b>Chris Dhanaraj</b></sub>](http://twitter.com/chrisdhanaraj)<br />[💻](https://github.com/IBM/carbon-components/commits?author=chrisdhanaraj "Code") [📖](https://github.com/IBM/carbon-components/commits?author=chrisdhanaraj "Documentation") [👀](#review-chrisdhanaraj "Reviewed Pull Requests") [✅](#tutorial-chrisdhanaraj "Tutorials") [🔧](#tool-chrisdhanaraj "Tools") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars2.githubusercontent.com/u/5481782?v=4" width="100px;"/><br /><sub><b>Ian Fleming</b></sub>](http://ianfleming.me/)<br />[💻](https://github.com/IBM/carbon-components/commits?author=iangfleming "Code") [📖](https://github.com/IBM/carbon-components/commits?author=iangfleming "Documentation") [👀](#review-iangfleming "Reviewed Pull Requests") [✅](#tutorial-iangfleming "Tutorials") | [<img src="https://avatars3.githubusercontent.com/u/11670886?v=4" width="100px;"/><br /><sub><b>Anna Gonzales</b></sub>](https://github.com/aagonzales)<br />[🎨](#design-aagonzales "Design") [📖](https://github.com/IBM/carbon-components/commits?author=aagonzales "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/29312997?v=4" width="100px;"/><br /><sub><b>Tayler Aitken</b></sub>](https://github.com/tay-aitken)<br />[🎨](#design-tay-aitken "Design") [📖](https://github.com/IBM/carbon-components/commits?author=tay-aitken "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/11233508?v=4" width="100px;"/><br /><sub><b>Bethany Sonefeld</b></sub>](http://www.bethanysonefeld.com)<br />[🎨](#design-bsonefeld "Design") [📝](#blog-bsonefeld "Blogposts") [📖](https://github.com/IBM/carbon-components/commits?author=bsonefeld "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/25189046?v=4" width="100px;"/><br /><sub><b>tsaitsaitsai</b></sub>](https://github.com/tsaitsaitsai)<br />[🎨](#design-tsaitsaitsai "Design") [📖](https://github.com/IBM/carbon-components/commits?author=tsaitsaitsai "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/1259051?v=4" width="100px;"/><br /><sub><b>Akira Sudoh</b></sub>](http://streetphoto.jp/)<br />[💻](https://github.com/IBM/carbon-components/commits?author=asudoh "Code") [👀](#review-asudoh "Reviewed Pull Requests") [🔧](#tool-asudoh "Tools") | [<img src="https://avatars1.githubusercontent.com/u/1693164?v=4" width="100px;"/><br /><sub><b>Una Kravets</b></sub>](http://una.im)<br />[💻](https://github.com/IBM/carbon-components/commits?author=una "Code") |
| [<img src="https://avatars2.githubusercontent.com/u/6686963?v=4" width="100px;"/><br /><sub><b>Jefferson Lam</b></sub>](http://jefferson.im)<br />[💻](https://github.com/IBM/carbon-components/commits?author=jeffersonlam "Code") | [<img src="https://avatars3.githubusercontent.com/u/9454408?v=4" width="100px;"/><br /><sub><b>Dan Zaharia</b></sub>](http://www.danzaharia.com)<br />[💻](https://github.com/IBM/carbon-components/commits?author=dzaharia1 "Code") | [<img src="https://avatars3.githubusercontent.com/u/6444889?v=4" width="100px;"/><br /><sub><b>Bobby Smith</b></sub>](http://bobbysmith.io)<br />[💻](https://github.com/IBM/carbon-components/commits?author=bobbysmith "Code") | [<img src="https://avatars0.githubusercontent.com/u/870668?v=4" width="100px;"/><br /><sub><b>Lee Reamsnyder</b></sub>](http://leereamsnyder.com)<br />[💻](https://github.com/IBM/carbon-components/commits?author=leereamsnyder "Code") | [<img src="https://avatars0.githubusercontent.com/u/181819?v=4" width="100px;"/><br /><sub><b>Nick Sandonato</b></sub>](https://github.com/nsand)<br />[💻](https://github.com/IBM/carbon-components/commits?author=nsand "Code") | [<img src="https://avatars1.githubusercontent.com/u/825457?v=4" width="100px;"/><br /><sub><b>Robin Cannon</b></sub>](http://shinytoyrobots.com)<br />[📖](https://github.com/IBM/carbon-components/commits?author=shinytoyrobots "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/1265379?v=4" width="100px;"/><br /><sub><b>Preston Pham</b></sub>](http://preston.io)<br />[💻](https://github.com/IBM/carbon-components/commits?author=prestonp "Code") |
| [<img src="https://avatars0.githubusercontent.com/u/8884298?v=4" width="100px;"/><br /><sub><b>Colby Williams</b></sub>](http://www.colbycheeze.com)<br />[💻](https://github.com/IBM/carbon-components/commits?author=colbycheeze "Code") | [<img src="https://avatars2.githubusercontent.com/u/7519029?v=4" width="100px;"/><br /><sub><b>James Y Rauhut</b></sub>](http://www.seejamescode.com)<br />[📖](https://github.com/IBM/carbon-components/commits?author=seejamescode "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/6788995?v=4" width="100px;"/><br /><sub><b>Chris Johnson</b></sub>](https://github.com/jhnsnc)<br />[💻](https://github.com/IBM/carbon-components/commits?author=jhnsnc "Code") | [<img src="https://avatars3.githubusercontent.com/u/114976?v=4" width="100px;"/><br /><sub><b>Nathan Friedly</b></sub>](http://nfriedly.com/)<br />[💻](https://github.com/IBM/carbon-components/commits?author=nfriedly "Code") | [<img src="https://avatars1.githubusercontent.com/u/13006634?v=4" width="100px;"/><br /><sub><b>asahlin</b></sub>](https://github.com/asahlin)<br />[💻](https://github.com/IBM/carbon-components/commits?author=asahlin "Code") | [<img src="https://avatars0.githubusercontent.com/u/10215203?v=4" width="100px;"/><br /><sub><b>Matthew Gallo</b></sub>](http://www.matthewdgallo.com)<br />[📖](https://github.com/IBM/carbon-components/commits?author=matthewgallo "Documentation") | [<img src="https://avatars3.githubusercontent.com/u/4438261?v=4" width="100px;"/><br /><sub><b>Reinaldo Cruz</b></sub>](http://www.reicruz.com/)<br />[💻](https://github.com/IBM/carbon-components/commits?author=reicruz "Code") |
| [<img src="https://avatars3.githubusercontent.com/u/2699599?v=4" width="100px;"/><br /><sub><b>Bethany Schwanke</b></sub>](https://github.com/bschwanke)<br />[📖](https://github.com/IBM/carbon-components/commits?author=bschwanke "Documentation") | [<img src="https://avatars0.githubusercontent.com/u/6370760?s=460&v=4" width="100px;"/><br /><sub><b>David Menendez</b></sub>](https://github.com/davidmenendez)<br />[💻](https://github.com/IBM/carbon-components/commits?author=davidmenendez "Code") | [<img src="https://avatars1.githubusercontent.com/u/1183515?s=400&v=4" width="100px;"/><br /><sub><b>Derick Montague</b></sub>](https://github.com/derick-montague)<br />[💻](https://github.com/IBM/carbon-components/commits?author=derick-montague "Code") | [<img src="https://avatars2.githubusercontent.com/u/940113?s=400&v=4" width="100px;"/><br /><sub><b>Michael Vendivel</b></sub>](https://github.com/mven)<br />[💻](https://github.com/IBM/carbon-components/commits?author=mven "Code") | [<img src="https://avatars0.githubusercontent.com/u/20052710?s=400&v=4" width="100px;"/><br /><sub><b>James Clements</b></sub>](https://github.com/jamesvclements)<br />[💻](https://github.com/IBM/carbon-components/commits?author=jamesvclements "Code") | [<img src="https://avatars3.githubusercontent.com/u/163561?s=400&v=4" width="100px;"/><br /><sub><b>Jason Lengstorf</b></sub>](https://github.com/jlengstorf)<br />[💻](https://github.com/IBM/carbon-components/commits?author=jlengstorf "Code") | [<img src="https://avatars2.githubusercontent.com/u/2932484?s=400&v=4" width="100px;"/><br /><sub><b>Rahul Radhakrishnan</b></sub>](https://github.com/rahulrkr08)<br />[💻](https://github.com/IBM/carbon-components/commits?author=rahulrkr08 "Code") [📖](https://github.com/IBM/carbon-components/commits?author=rahulrkr08 "Documentation") |
| [<img src="https://avatars2.githubusercontent.com/u/11317322?s=400&v=4" width="100px;"/><br /><sub><b>Adriana Rios</b></sub>](https://github.com/stpCollabr8nLstn)<br />[💻](https://github.com/IBM/carbon-components/commits?author=stpCollabr8nLstn "Code") | [<img src="https://avatars1.githubusercontent.com/u/15326526?s=400&v=4" width="100px;"/><br /><sub><b>Chris de Almeida</b></sub>](https://github.com/ctcpip)<br />[💻](https://github.com/IBM/carbon-components/commits?author=ctcpip "Code") | [<img src="https://avatars2.githubusercontent.com/u/11449728?s=400&v=4" width="100px;"/><br /><sub><b>Paul Sachs</b></sub>](https://github.com/psachs21)<br />[💻](https://github.com/IBM/carbon-components/commits?author=psachs21 "Code") | [<img src="https://avatars1.githubusercontent.com/u/17710824?s=400&v=4" width="100px;"/><br /><sub><b>Ryan Mackey</b></sub>](https://github.com/ryanomackey)<br />[💻](https://github.com/IBM/carbon-components/commits?author=ryanomackey "Code") | [<img src="https://avatars3.githubusercontent.com/u/5316797?s=400&v=4" width="100px;"/><br /><sub><b>Sae</b></sub>](https://github.com/srlim)<br />[💻](https://github.com/IBM/carbon-components/commits?author=srlim "Code") | [<img src="https://avatars1.githubusercontent.com/u/6663002?s=400&v=4" width="100px;"/><br /><sub><b>Scott Dickerson</b></sub>](https://github.com/scottdickerson)<br />[💻](https://github.com/IBM/carbon-components/commits?author=scottdickerson "Code") | [<img src="https://avatars1.githubusercontent.com/u/4836277?s=400&v=4" width="100px;"/><br /><sub><b>Alicia Hickman</b></sub>](https://github.com/aliciahickman)<br />[💻](https://github.com/IBM/carbon-components/commits?author=aliciahickman "Code") |
| [<img src="https://avatars2.githubusercontent.com/u/12685163?s=400&v=4" width="100px;"/><br /><sub><b>j1mie</b></sub>](https://github.com/j1mie)<br />[💻](https://github.com/IBM/carbon-components/commits?author=j1mie "Code") | [<img src="https://avatars3.githubusercontent.com/u/8265238?v=4" width="100px;"/><br /><sub><b>emyarod</b></sub>](https://github.com/emyarod)<br />[💻](https://github.com/IBM/carbon-components/commits?author=emyarod "Code") [📖](https://github.com/IBM/carbon-components/commits?author=emyarod "Documentation") |

<!-- ALL-CONTRIBUTORS-LIST:END -->

Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds/all-contributors#emoji-key)):

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!