\n\n> Carbon is an open-source design system built by IBM. With the IBM Design\n> Language as its foundation, the system consists of working code, design tools\n> and resources, human interface guidelines, and a vibrant community of\n> contributors.\n\n
\n\n# `carbon-web-components`\n\n`carbon-web-components` is a variant of Carbon Design System with Custom Elements v1 and Shadow DOM v1 specs.\n\nThe effort stems from https://github.com/carbon-design-system/issue-tracking/issues/121. If you are interested in this project, adding 👍 to the description of that GH issue, or even contributing, will be greatly appreciated!\n\n\n\n\n- [Getting started](#getting-started)\n - [Basic usage](#basic-usage)\n - [Other usage guides](#other-usage-guides)\n- [JavaScript framework support](#javascript-framework-support)\n - [Angular](#angular)\n - [React](#react)\n - [Vue](#vue)\n- [Getting started with development](#getting-started-with-development)\n- [Running React/Angular/Vue Storybook demo](#running-reactangularvue-storybook-demo)\n- [List of available components](#list-of-available-components)\n- [Browser support](#browser-support)\n- [Coding conventions](#coding-conventions)\n- [Creating build](#creating-build)\n- [Running unit test](#running-unit-test)\n- [Running build integration test](#running-build-integration-test)\n- [Running UI integration test](#running-ui-integration-test)\n\n\n\n## Getting started\n\nTo install `carbon-web-components` in your project, you will need to run the\nfollowing command using [npm](https://www.npmjs.com/):\n\n```bash\nnpm install --save carbon-web-components carbon-components lit-html lit-element\n```\n\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command\ninstead:\n\n```bash\nyarn add carbon-web-components carbon-components lit-html lit-element\n```\n\n### Basic usage\n\nOur example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/master/examples/codesandbox/basic)\n\nThe first thing you need is **setting up a module bundler** to resolve ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org), but you can use other bundlers like [Rollup](https://rollupjs.org/) too.\n\nOnce you set up a module bundler, you can start importing our component modules, for example:\n\n```javascript\nimport 'carbon-web-components/es/components/dropdown/dropdown.js';\nimport 'carbon-web-components/es/components/dropdown/dropdown-item.js';\n```\n\nOnce you've imported the component modules, you can use our components in the same manner as native HTML tags, for example:\n\n```html\n\n Option 1\n Option 2\n Option 3\n Option 4\n Option 5\n\n```\n\nIf you just want to try our components for demonstrations and so on, you can use CDNs that support module mapping (for example, [JSPM](https://jspm.org)). With CDNs, you can import just our modules in `\n \n \n \n
![\"Carbon](\"https://user-images.githubusercontent.com/3901764/57545698-ce5f2380-7320-11e9-8682-903df232d7b0.png\")
\n \n![\"Carbon](\"https://img.shields.io/badge/license-Apache--2.0-blue.svg\"){kind=icon}
\n \n![\"This](\"https://percy.io/static/images/percy-badge.svg\"){kind=icon}
\n \n