A Carbon Design System variant built with Web Components, offering framework-agnostic UI components with native HTML element ease.
Carbon Web Components is an open-source UI component library that implements the IBM Carbon Design System using native Web Components. It provides a set of reusable, accessible components like buttons, dropdowns, and modals that work directly in the browser as custom HTML elements. The project solves the problem of framework lock-in by offering a design system that can be used with any JavaScript framework or with no framework at all.
Frontend developers and teams building web applications who want to use the Carbon Design System but need framework flexibility, especially those working in multi-framework environments or prioritizing web standards.
Developers choose Carbon Web Components because it delivers the proven Carbon Design System without tying them to a specific framework like React or Angular. Its native Web Components foundation ensures long-term browser compatibility and eliminates the overhead of framework-specific wrappers while maintaining full design system compliance.
Carbon Design System variant on top of Web Components
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Components work as native HTML elements, usable in vanilla HTML, React, Angular, Vue, or any framework without a 'framework tax,' demonstrated in the basic usage examples with CDN and ES imports.
Implements IBM's Carbon Design System, ensuring consistent, accessible UI patterns suitable for enterprise applications, as highlighted in the project description and key features.
Leverages Shadow DOM v1 for encapsulation, preventing CSS conflicts, which is a core feature mentioned in the README for robust component isolation.
Available via CDN for quick prototyping without build tools, shown in the CDN usage section with specific script tags for each component.
Includes RTL versions of all components for internationalization, as noted in the key features, with artifacts like .rtl.min.js files.
The README states that Carbon Web Components v2 will reach feature parity with Carbon React throughout 2023, meaning some components or features may be missing or lagging in the meantime.
IE and older Edge support is on a best-effort basis, with some components potentially unsupported, requiring additional polyfills and setup, as admitted in the browser support section.
While framework-agnostic, integrating with Angular requires CUSTOM_ELEMENTS_SCHEMA, and React needs prop-types and specific Node versions for SSR, adding complexity compared to native framework components.
The project has moved to a monorepo and is undergoing major upgrades (to Carbon v11, Lit v2, TypeScript v4), which could lead to instability or breaking changes during the transition, as noted in the README warning.