\n \n \n \n \n \n Option 1\n Option 2\n Option 3\n Option 4\n Option 5\n \n
\n \n\n```\n\nOur example at [CodeSandbox](https://codesandbox.io) shows usage with only CDN\nartifacts:\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/cdn)\n\n### Using ES imports\n\n#### How to install\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\n```\n\nIf you prefer [Yarn](https://yarnpkg.com/en/), use the following command\ninstead:\n\n```bash\nyarn add carbon-web-components\n```\n\n> NOTE: Carbon and Lit dependencies will be managed by Carbon Web Components\n> starting in `v1.19.0`. For earlier versions, these dependencies will have to\n> be installed separately:\n>\n> npm:\n>\n> ```bash\n> npm install --save carbon-components lit-html lit-element\n> ```\n>\n> Yarn:\n>\n> ```bash\n> yarn add 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/main/examples/codesandbox/basic)\n\nThe first thing you need is **setting up a module bundler** to resolve\nECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org),\nbut 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,\nfor 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\nsame 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\n### Other usage guides\n\n- [Having components participate in form](./docs/form.md)\n- [Using custom styles in components](./docs/styling.md)\n- [Using `carbon-web-components` with old build toolchain](./docs/old-build-toolchain.md)\n\n## JavaScript framework support\n\nIn addition to the available Web Component versions of Carbon components, this\nlibrary also supports usage with JavaScript frameworks like Angular, React, and\nVue if the desire is to use instead of the pure framework versions of Carbon\ncomponents. Specifically for React, this library comes with a wrapper\nimplementation around the Carbon Web Components for more seamless integration\nwith your React application.\n\nThis is achievable since Web Components is the modern browser standard, and\nworks well with other front-end frameworks that exist in the application. In\nturn, this also comes with the benefits of encapsulation within the Shadow DOM:\n\n### Angular\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/angular)\n\nAngular users can use our components in the same manner as native HTML tags,\ntoo, once you add\n[`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)\nschema to your Angular module, for example:\n\n```javascript\nimport { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\n\nimport { AppComponent } from './app.component';\n\n@NgModule({\n schemas: [CUSTOM_ELEMENTS_SCHEMA],\n declarations: [AppComponent],\n imports: [BrowserModule],\n bootstrap: [AppComponent],\n})\nexport class AppModule {}\n```\n\nThe `.d.ts` files in `carbon-web-components` package are compiled with\nTypeScript 3.7. You can use TypeScript 3.7 in your Angular application with\nupcoming Angular `9.0` release, or with the following instructions, so your\napplication can use those `.d.ts` files:\n\n- Set `true` to\n [`angularCompilerOptions.disableTypeScriptVersionCheck`](https://angular.io/guide/angular-compiler-options#disabletypescriptversioncheck)\n in `tsconfig.json`\n- In `polyfills.ts`, change\n [`__importDefault` TypeScript helper](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-7.html#example-8)\n as follows:\n `window.__importDefault = mod => (mod?.__esModule ? mod : { default: mod })`\n\n### React\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react)\n\nYou can use wrapper React components in\n`carbon-web-components/es/components-react` generated\n[automatically from the custom elements](./src/globals/wrappers/createReactCustomElementType.ts)\nwhich allows you to use our components seamlessly in your React code. Here's an\nexample:\n\n```javascript\nimport React from 'react';\nimport { render } from 'react-dom';\nimport BXDropdown from 'carbon-web-components/es/components-react/dropdown/dropdown.js';\nimport BXDropdownItem from 'carbon-web-components/es/components-react/dropdown/dropdown-item.js';\n\nconst App = () => (\n \n Option 1\n Option 2\n Option 3\n Option 4\n Option 5\n \n);\n\nrender(, document.getElementById('root'));\n```\n\nNote: Using the React wrapper requires an additional dependency,\n[`prop-types`](https://www.npmjs.com/package/prop-types).\n\nTo run the wrapper React components in SSR environment requires Node `12.16.3`\nor above that supports\n[\"conditional mapping\" feature](https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping):\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react-ssr)\n\nSame Node version requirement applies to Next.js:\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/next)\n\n### Vue\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/vue)\n\nVue users can use our components in the same manner as native HTML tags, without\nany additional steps!\n\n## Getting started with development\n\n1. Fork this repository and clone it\n2. `yarn install`\n3. `yarn wca && yarn storybook`\n\n## Running React/Angular/Vue Storybook demo\n\n- React: `yarn storybook:react` (Live demo:\n https://web-components.carbondesignsystem.com/react/index.html)\n- Angular: `yarn storybook:angular` (Live demo:\n https://web-components.carbondesignsystem.com/angular/index.html)\n- Vue: `yarn storybook:vue` (Live demo:\n https://web-components.carbondesignsystem.com/vue/index.html)\n\n## List of available components\n\nView available web components at:\nhttps://web-components.carbondesignsystem.com/. You can see usage information in\nseveral ways:\n\n1. Going to Docs tab, where it shows the usage and available attributes,\n properties and custom events.\n2. Clicking the **KNOBS** tab at the bottom and changing values there. Most\n knobs are shown as something like `Button kind (kind)`, where `kind` is the\n attribute name\n3. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the\n selected component. You may see something like `bx-modal-closed` which\n typically indicates that an event with such event type is fired. You can also\n expand the twistie to see the details of the event\n\n## Browser support\n\n- Latest Chrome/Safari/FF ESR\n- IE/Edge support is bast-effort basis\n - Some components may not be supported\n\nTo support IE, you need a couple additional setups:\n\n- Toolstack to re-transpile our code to ES5 (e.g. by specifying IE11 in\n [`@babel/preset-env`](https://babeljs.io/docs/en/babel-preset-env)\n configuration)\n- Polyfills, listed\n [here](https://github.com/carbon-design-system/carbon-web-components/blob/main/src/polyfills/index.ts)\n\nHere's an example code that shows such setup:\n\n[](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/ie)\n\n## Coding conventions\n\nCan be found at [here](./src/coding-conventions.md).\n\n## Creating build\n\n```\n> yarn clean\n> yarn build\n```\n\nYou'll see the build artifacts in `/path/to/carbon-web-components/es` directory.\n\n## Running unit test\n\nYou can run unit test by:\n\n```\n> gulp test:unit\n```\n\nYou can run specific test spec by:\n\n```\n> gulp test:unit -s tests/spec/dropdown_spec.ts\n```\n\nYou can choose a browser (instead of Headless Chrome) by:\n\n```\n> gulp test:unit -b Firefox\n```\n\nYou can keep the browser after the test (and re-run the test when files change)\nby:\n\n```\n> gulp test:unit -b Chrome -k\n```\n\nYou can prevent code coverate instrumentation code from being generated by:\n\n```\n> gulp test:unit -d\n```\n\nYou can update snapshots by:\n\n```\n> gulp test:unit --update-snapshot\n```\n\nAbove options can be used together. This is useful to debug your code as you\ntest:\n\n```\n> gulp test:unit -s tests/spec/dropdown_spec.ts -b Chrome -d -k\n```\n\n## Running build integration test\n\nYou can run build integration test by:\n\n```\n> yarn test:integration:build\n```\n\nYou can run a specific set of UI test steps (e.g. running\n`tests/integration/build/form-angular_steps.js` only) by:\n\n```\n> yarn test:integration:build form-angular_steps\n```\n\nBy default Chrome runs in headless mode. You can show Chrome UI by:\n\n```\n> CI=false yarn test:integration:build\n```\n\n## Running UI integration test\n\nYou can run UI integration test by:\n\n```\n> yarn test:integration:ui\n```\n\nYou can run a specific set of UI test steps (e.g. running\n`tests/integration/ui/dropdown_steps.js` only) by:\n\n```\n> yarn test:integration:ui dropdown_steps\n```\n\nBy default Chrome runs in headless mode. You can show Chrome UI by:\n\n```\n> CI=false yarn test:integration:ui\n```\n","exports":{"./es":"./es/index.js","./es/":"./es/","./lib/":"./lib/","./dist/":"./dist/","./es/globals/":{"node":"./lib/globals/","default":"./es/globals/"},"./package.json":"./package.json","./es/components/":{"node":"./lib/components/","default":"./es/components/"},"./custom-elements.json":"./custom-elements.json","./es/components-react/":{"node":"./lib/components-react-node/","default":"./es/components-react/"}},"gitHead":"74b4576822db39b78991b2783794d0b211e997be","scripts":{"wca":"web-component-analyzer analyze src --outFile custom-elements.json","test":"gulp test && yarn test:integration","build":"gulp build && yarn wca","clean":"gulp clean","reset":"yarn cache clean && yarn clean && rimraf node_modules && yarn install && yarn build","start":"yarn storybook","ci-check":"yarn wca && yarn typecheck && yarn build && yarn test:unit","storybook":"start-storybook -p 9000","test:unit":"gulp test:unit","typecheck":"tsc --noEmit -p tsconfig.json","build:dist":"gulp build:dist","build:dist:dev":"gulp build:dist:dev","visual-snapshot":"yarn build-storybook && percy storybook ./storybook-static","test:integration":"yarn test:integration:build && yarn test:integration:ui","test:integration:ui":"jest -c tests/integration/ui/jest.config.js --runInBand","test:integration:build":"jest -c tests/integration/build/jest.config.js --runInBand","test:unit:updateSnapshot":"gulp test:unit --update-snapshot"},"typings":"es/index.d.ts","_npmUser":{"name":"carbon-bot","email":"carbondesignsystem@gmail.com"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/carbon-design-system/carbon-for-ibm-dotcom.git#main","type":"git"},"_npmVersion":"lerna/4.0.0/node@v14.21.1+x64 (linux)","description":"Carbon for IBM.com Carbon web components","directories":{},"_nodeVersion":"14.21.1","dependencies":{"lit-html":"^1.4.1","flatpickr":"4.6.13","lodash-es":"^4.17.21","lit-element":"^2.5.1","@babel/runtime":"^7.16.3","carbon-components":"10.55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"del":"^6.0.0","gulp":"^4.0.2","jest":"25.5.4","sass":"~1.56.0","temp":"^0.9.0","execa":"^5.1.1","karma":"^6.0.0","react":"16.14.0","mkdirp":"^0.5.0","rollup":"^2.55.1","rtlcss":"^3.0.0","core-js":"^3.19.1","cssnano":"^5.0.0","gulp-if":"^3.0.0","postcss":"^8.2.10","tsickle":"~0.46.0","webpack":"^4.46.0","zone.js":"~0.12.0","fs-extra":"^10.0.0","react-is":"16.13.1","through2":"^3.0.0","commander":"^7.2.0","cross-env":"^7.0.0","gulp-sass":"^5.0.0","jest-diff":"25.5.0","puppeteer":"^13.0.0","react-dom":"16.14.0","ts-loader":"^6.0.0","async-done":"^1.3.0","css-loader":"^5.2.0","gulp-babel":"^8.0.0","playwright":"^1.0.0","prop-types":"^15.7.0","typescript":"~4.8.0","@babel/core":"~7.12.0","@types/jest":"^29.2.3","@types/node":"^18.11.9","es6-promise":"^4.2.8","file-loader":"^6.2.0","gulp-filter":"^7.0.0","gulp-header":"^2.0.9","gulp-rename":"^2.0.0","http-server":"~14.1.0","lint-staged":"^12.3.8","null-loader":"^4.0.0","read-pkg-up":"^7.0.0","replace-ext":"^2.0.0","sass-loader":"^10.0.0","autoprefixer":"^9.8.8","babel-eslint":"^10.0.3","babel-loader":"^8.0.0","cache-loader":"^4.1.0","custom-event":"^1.0.0","gulp-postcss":"^9.0.0","is-plain-obj":"^2.1.0","jasmine-core":"^4.0.0","magic-string":"^0.27.0","style-loader":"^2.0.0","use-debounce":"^3.2.0","@carbon/icons":"^10.48.0","gulp-prettier":"^4.0.0","karma-jasmine":"^4.0.1","karma-webpack":"^4.0.2","@types/jasmine":"^3.10.2","gulp-clean-css":"^4.3.0","karma-snapshot":"^0.6.0","postcss-loader":"^3.0.0","strip-comments":"^1.0.0","@babel/template":"~7.12.0","@babel/traverse":"~7.12.0","@types/bluebird":"^3.5.36","gulp-sourcemaps":"^3.0.0","gulp-typescript":"^5.0.1","jest-dev-server":"^6.0.0","@percy/storybook":"^4.3.3","@types/lodash-es":"^4.17.5","expect-puppeteer":"^6.0.0","@babel/preset-env":"~7.12.0","expect-playwright":"~0.8.0","is-port-reachable":"^3.1.0","@percy-io/in-percy":"^0.1.11","@types/webpack-env":"^1.16.3","@webcomponents/url":"~0.7.8","webpack-dev-server":"^4.0.0","@rollup/pluginutils":"^4.2.0","karma-spec-reporter":"0.0.34","@carbon/icon-helpers":"^10.28.0","@rollup/plugin-babel":"^5.3.1","rollup-plugin-terser":"^7.0.2","@babel/preset-modules":"~0.1.5","@storybook/addon-docs":"^6.5.12","child-process-promise":"^2.2.1","karma-chrome-launcher":"^3.1.0","terser-webpack-plugin":"^4.2.3","@rollup/plugin-replace":"^4.0.0","@storybook/addon-knobs":"^6.4.0","@storybook/addon-links":"^6.5.12","gulp-exclude-gitignore":"^1.2.0","jest-playwright-preset":"~0.2.0","karma-firefox-launcher":"^2.1.2","karma-sourcemap-loader":"^0.3.8","polymer-webpack-loader":"^2.0.0","web-component-analyzer":"1.2.0-next.0","@rollup/plugin-commonjs":"^21.0.3","@webcomponents/shadycss":"^1.11.0","@webcomponents/shadydom":"^1.9.0","@webcomponents/template":"^1.5.0","mini-css-extract-plugin":"~2.7.0","postcss-selector-parser":"^6.0.0","@storybook/addon-actions":"^6.5.12","@storybook/source-loader":"^6.5.12","resize-observer-polyfill":"^1.5.0","@storybook/web-components":"^6.5.12","rollup-plugin-multi-input":"^1.3.1","@open-wc/semantic-dom-diff":"~0.18.0","jest-environment-puppeteer":"^6.0.0","@rollup/plugin-node-resolve":"^8.4.0","@storybook/addon-essentials":"^6.5.12","@storybook/addon-storysource":"^6.5.12","istanbul-instrumenter-loader":"^3.0.1","@webcomponents/custom-elements":"^1.5.0","@babel/plugin-transform-runtime":"~7.12.0","karma-coverage-istanbul-reporter":"^2.0.0","@babel/plugin-proposal-decorators":"~7.12.0","@babel/plugin-transform-typescript":"~7.12.0","babel-plugin-template-html-minifier":"^4.1.0","@webcomponents/webcomponents-platform":"^1.0.1","@babel/plugin-proposal-class-properties":"~7.12.0","@babel/plugin-proposal-optional-chaining":"~7.12.0","@babel/plugin-transform-modules-commonjs":"~7.12.0","@babel/plugin-proposal-object-rest-spread":"~7.12.0","@babel/plugin-transform-template-literals":"~7.12.0","@babel/plugin-proposal-nullish-coalescing-operator":"~7.12.0"},"_npmOperationalInternal":{"tmp":"tmp/carbon-web-components_1.22.0-canary.3627202575.0_1670310634602_0.06076838356683001","host":"s3://npm-registry-packages"}}},"time":{"created":"2022-11-21T21:37:21.611Z","modified":"2026-08-21T15:36:03.420Z","1.22.0-canary.3518209924.0":"2022-11-21T21:37:21.955Z","1.22.0-canary.3518472525.0":"2022-11-21T22:25:31.237Z","1.22.0-canary.3518610368.0":"2022-11-21T22:44:08.971Z","1.22.0-nightly.3519568891.0":"2022-11-22T01:50:05.839Z","1.22.0-canary.3519755449.0":"2022-11-22T02:31:06.956Z","1.22.0-canary.3524319215.0":"2022-11-22T14:50:01.662Z","1.22.0-rc.0":"2022-11-22T15:43:19.704Z","1.22.0-canary.3524884684.0":"2022-11-22T16:01:21.756Z","1.22.0-canary.3525609678.0":"2022-11-22T17:39:47.734Z","1.22.0-nightly.3528481157.0":"2022-11-23T01:48:17.780Z","1.22.0-rc.1":"2022-11-23T21:11:52.742Z","1.22.0-nightly.3536956052.0":"2022-11-24T01:55:09.213Z","1.22.0-nightly.3544654216.0":"2022-11-25T01:50:02.390Z","1.22.0-canary.3551826056.0":"2022-11-26T02:47:37.047Z","1.22.0-nightly.3560921284.0":"2022-11-28T01:49:10.748Z","1.22.0-nightly.3570165639.0":"2022-11-29T01:48:31.682Z","1.22.0-canary.3577313501.0":"2022-11-29T19:41:25.255Z","1.22.0-nightly.3579496828.0":"2022-11-30T01:58:30.312Z","1.22.0-canary.3587824640.0":"2022-11-30T23:29:33.353Z","1.22.0-canary.3588565159.0":"2022-12-01T01:42:37.540Z","1.22.0-nightly.3588612585.0":"2022-12-01T01:56:44.683Z","1.22.0-canary.3590928308.0":"2022-12-01T09:08:06.841Z","1.22.0-canary.3591624458.0":"2022-12-01T10:40:52.970Z","1.22.0-canary.3592511576.0":"2022-12-01T12:41:22.195Z","1.22.0-canary.3594689443.0":"2022-12-01T17:09:50.445Z","1.22.0-canary.3595999136.0":"2022-12-01T20:08:54.932Z","1.22.0-canary.3597496406.0":"2022-12-02T00:02:00.378Z","1.22.0-canary.3598059624.0":"2022-12-02T01:51:29.735Z","1.22.0-nightly.3598060968.0":"2022-12-02T02:03:20.755Z","1.22.0-canary.3600971275.0":"2022-12-02T11:08:41.109Z","1.22.0-canary.3603056002.0":"2022-12-02T16:02:27.591Z","1.22.0-nightly.3616067003.0":"2022-12-05T01:50:55.883Z","1.22.0-rc.2":"2022-12-05T21:55:55.739Z","1.22.0-nightly.3625588014.0":"2022-12-06T01:50:41.118Z","1.22.0-canary.3626652975.0":"2022-12-06T05:28:39.700Z","1.22.0-canary.3627202575.0":"2022-12-06T07:10:34.945Z"},"bugs":{"url":"https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues"},"license":"Apache-2.0","homepage":"https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main#readme","keywords":["carbon","component","components","pattern","patterns","style guide","carbon-design-system","web components"],"repository":{"url":"git+https://github.com/carbon-design-system/carbon-for-ibm-dotcom.git#main","type":"git"},"description":"Carbon for IBM.com Carbon web components","maintainers":[{"email":"carbon@us.ibm.com","name":"carbon-design-system"},{"email":"carbondesignsystem@gmail.com","name":"carbon-bot"},{"email":"leechase@live.com","name":"leechase"},{"email":"jeff.chew@gmail.com","name":"jeffreychew"},{"email":"sstrubberg@gmail.com","name":"sstrubberg"}],"readme":"","readmeFilename":""}![\"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