@carbon/web-components
Advanced tools
@carbon/web-componentsWeb components for the Carbon Design System
To install @carbon/web-components in your project, you will need to run the
following command using npm:
npm install -S @carbon/web-components
If you prefer Yarn, use the following command instead:
yarn add @carbon/web-components
The @carbon/web-components package provides components for the Carbon Design
System.
To use a component, you can import it directly from the package:
import '@carbon/web-components/es/components/dropdown/dropdown.js';
import '@carbon/web-components/es/components/dropdown/dropdown-item.js';
Once you've imported the component modules, you can use the components in the same manner as native HTML tags:
<cds-dropdown trigger-content="Select an item">
<cds-dropdown-item value="all">Option 1</cds-dropdown-item>
<cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
<cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
<cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
<cds-dropdown-item value="router">Option 5</cds-dropdown-item>
</cds-dropdown>
CDN artifacts are also available and can be added directly to the page (starting
at version v1.16.0):
<!doctype html>
<html>
<head>
<script
type="module"
src="https://1.www.s81c.com/common/carbon/web-components/version/v2.24.0/dropdown.min.js"></script>
<style type="text/css">
<!-- hide custom element until it has been defined //-->
cds-dropdown:not(:defined),
cds-dropdown-item:not(:defined) {
visibility: hidden;
}
</style>
</head>
<body>
<div id="app">
<cds-dropdown trigger-content="Select an item">
<cds-dropdown-item value="all">Option 1</cds-dropdown-item>
<cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
<cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
<cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
<cds-dropdown-item value="router">Option 5</cds-dropdown-item>
</cds-dropdown>
</div>
</body>
</html>
If you're looking for @carbon/web-components API documentation, check out:
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.
This package uses IBM Telemetry to collect de-identified and anonymized metrics data. By installing this package as a dependency you are agreeing to telemetry collection. To opt out, see Opting out of IBM Telemetry data collection. For more information on the data being collected, please see the IBM Telemetry documentation.
FAQs
Web components for the Carbon Design System
We found that @carbon/web-components demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
A flawed sandbox in @nestjs/devtools-integration lets attackers run code on your machine via CSRF, leading to full Remote Code Execution (RCE).
Product
Customize license detection with Socket’s new license overlays: gain control, reduce noise, and handle edge cases with precision.
Product
Socket now supports Rust and Cargo, offering package search for all users and experimental SBOM generation for enterprise projects.