https://github.com/carbon-design-system/carbon-labs
An innovation space for the creation of components leveraging Carbon Design System
https://github.com/carbon-design-system/carbon-labs
design-system hacktoberfest react web-components
Last synced: 3 months ago
JSON representation
An innovation space for the creation of components leveraging Carbon Design System
- Host: GitHub
- URL: https://github.com/carbon-design-system/carbon-labs
- Owner: carbon-design-system
- License: apache-2.0
- Created: 2023-09-26T20:11:24.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2025-10-07T18:08:29.000Z (8 months ago)
- Last Synced: 2025-10-07T20:25:01.016Z (8 months ago)
- Topics: design-system, hacktoberfest, react, web-components
- Language: TypeScript
- Homepage: http://labs.carbondesignsystem.com/
- Size: 77.9 MB
- Stars: 33
- Watchers: 9
- Forks: 43
- Open Issues: 60
-
Metadata Files:
- Readme: README.md
- Contributing: .github/CONTRIBUTING.md
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
- Support: .github/SUPPORT.md
Awesome Lists containing this project
README
Carbon Labs
> A community-driven incubation space enabling rapid prototyping, development,
> and deployment of Carbon-based components.
## Getting started
Carbon Labs is a collection of components, offered in React and Web Component
packages. Individual components are their own package, which helps to remove any
bottlenecks in publishing and deployments. Here are some available components:
### React
| Package name | Description |
| ---------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------- |
| [`@carbon-labs/react-animated-header`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/AnimatedHeader) | Animated header component |
| [`@carbon-labs/react-processing`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/Processing) | Processing |
| [`@carbon-labs/split-panel`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/SplitPanel) | Split panel component |
| [`@carbon-labs/react-text-highlighter`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/TextHighlighter) | Text highlighter component |
| [`@carbon-labs/react-theme-switcher`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/ThemeSettings) | Theme settings |
| [`@carbon-labs/react-ui-shell`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/UIShell) | UI shell components |
| [`@carbon-labs/react-whats-new`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/WhatsNew) | What's new |
| [`@carbon-labs/mdx-components`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/react/src/components/MDXComponents) | MDX Components |
### Web Components
| Package name | Description |
| ------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------- |
| [`@carbon-labs/ai-chat`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/web-components/src/components/chat) | AI Chat component |
| [`@carbon-labs/ai-tag`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/web-components/src/components/tag) | AI Tag component |
| [`@carbon-labs/empty-state`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/web-components/src/components/empty-state) | Empty state component |
| [`@carbon-labs/style-picker`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/web-components/src/components/style-picker) | Style picker component |
### Shared
| Package name | Description |
| ------------------------------------------------------------------------------------------------------------ | ---------------------------------------- |
| [`@carbon-labs/utilities`](https://github.com/carbon-design-system/carbon-labs/tree/main/packages/utilities) | Common utilities shared amongst packages |
### Storybook
You can view the current state of all components in
[Storybook](https://labs.carbondesignsystem.com). You can also view the
individual storybooks for
[Web Components](https://labs.carbondesignsystem.com/web-components/) and
[React](https://labs.carbondesignsystem.com/react/).
## 🙌 Contributing
Want to add an asset to `@carbon-labs`? Read through the Carbon Labs
[contribution section](https://pages.github.ibm.com/carbon/ibm-products/contributing/carbon-labs/#carbon-labs-in-code)
before diving into our developer guide:
- [Developer Guide](https://github.com/carbon-design-system/carbon-labs/blob/main/docs/developing.md)
## 📝 License
Licensed under the
[Apache 2.0 License](https://github.com/carbon-design-system/carbon-labs/blob/main/LICENSE).
## 
IBM Telemetry
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](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).
For more information on the data being collected, please see the
[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).