# Carbon Design System > Carbon is IBM's open source design system for products and digital experiences. Built on the IBM Design Language, it provides working code, design tools, resources, and guidelines for creating consistent UI. ## Getting Started - [Overview](https://carbondesignsystem.com/): Introduction to Carbon Design System - [All Systems](https://carbondesignsystem.com/all-systems/): Overview of all IBM design systems - [Designing](https://carbondesignsystem.com/designing/get-started/): Getting started for designers - [Developing](https://carbondesignsystem.com/developing/get-started/): Getting started for developers ## Foundations - [Color](https://carbondesignsystem.com/foundations/color/overview/): Color usage and tokens - [Grid](https://carbondesignsystem.com/foundations/grid/overview/): Layout grid system - [Icons](https://carbondesignsystem.com/foundations/icons/library/): Icon library - [Motion](https://carbondesignsystem.com/foundations/motion/overview/): Animation and motion guidelines - [Pictograms](https://carbondesignsystem.com/foundations/pictograms/library/): Pictogram library - [Shape](https://carbondesignsystem.com/foundations/shape/overview/): Shape tokens and usage - [Spacing](https://carbondesignsystem.com/foundations/spacing/overview/): Spacing scale and tokens - [Themes](https://carbondesignsystem.com/foundations/themes/overview/): Theming and tokens - [Typography](https://carbondesignsystem.com/foundations/typography/overview/): Type scale and usage - [2x Grid](https://carbondesignsystem.com/foundations/2x-grid/overview/): 2x Grid system ## Components - [Overview](https://carbondesignsystem.com/components/overview/components/): All components overview - [Accordion](https://carbondesignsystem.com/components/accordion/usage/): Expandable/collapsible sections - [AI Label](https://carbondesignsystem.com/components/ai-label/usage/): AI-generated content label - [AI Skeleton](https://carbondesignsystem.com/components/ai-skeleton/usage/): Skeleton loader for AI content - [Breadcrumb](https://carbondesignsystem.com/components/breadcrumb/usage/): Navigation breadcrumb trail - [Button](https://carbondesignsystem.com/components/button/usage/): Button variants and usage - [Checkbox](https://carbondesignsystem.com/components/checkbox/usage/): Checkbox input - [Code Snippet](https://carbondesignsystem.com/components/code-snippet/usage/): Inline and block code display - [Combobox](https://carbondesignsystem.com/components/combobox/usage/): Searchable dropdown - [Content Switcher](https://carbondesignsystem.com/components/content-switcher/usage/): Toggle between content views - [Context Menu](https://carbondesignsystem.com/components/context-menu/usage/): Right-click context menu - [Data Table](https://carbondesignsystem.com/components/data-table/usage/): Tabular data display - [Date Picker](https://carbondesignsystem.com/components/date-picker/usage/): Date selection input - [Dropdown](https://carbondesignsystem.com/components/dropdown/usage/): Select from a list - [File Uploader](https://carbondesignsystem.com/components/file-uploader/usage/): File upload component - [Form](https://carbondesignsystem.com/components/form/usage/): Form layout and structure - [Inline Loading](https://carbondesignsystem.com/components/inline-loading/usage/): Inline loading state - [Link](https://carbondesignsystem.com/components/link/usage/): Hyperlink component - [List](https://carbondesignsystem.com/components/list/usage/): Ordered and unordered lists - [Loading](https://carbondesignsystem.com/components/loading/usage/): Loading spinner - [Menu](https://carbondesignsystem.com/components/menu/usage/): Menu and menu items - [Modal](https://carbondesignsystem.com/components/modal/usage/): Dialog overlay - [Multiselect](https://carbondesignsystem.com/components/multi-select/usage/): Select multiple items - [Notification](https://carbondesignsystem.com/components/notification/usage/): Alert and notification banners - [Number Input](https://carbondesignsystem.com/components/number-input/usage/): Numeric input field - [Overflow Menu](https://carbondesignsystem.com/components/overflow-menu/usage/): Additional options menu - [Pagination](https://carbondesignsystem.com/components/pagination/usage/): Page navigation - [Popover](https://carbondesignsystem.com/components/popover/usage/): Floating content panel - [Progress Bar](https://carbondesignsystem.com/components/progress-bar/usage/): Task progress indicator - [Progress Indicator](https://carbondesignsystem.com/components/progress-indicator/usage/): Multi-step progress - [Radio Button](https://carbondesignsystem.com/components/radio-button/usage/): Single-select radio input - [Search](https://carbondesignsystem.com/components/search/usage/): Search input field - [Select](https://carbondesignsystem.com/components/select/usage/): Native select dropdown - [Side Panel](https://carbondesignsystem.com/components/side-panel/usage/): Sliding side panel - [Skeleton](https://carbondesignsystem.com/components/skeleton/usage/): Loading skeleton placeholder - [Slider](https://carbondesignsystem.com/components/slider/usage/): Range slider input - [Stack](https://carbondesignsystem.com/components/stack/usage/): Layout stack utility - [Structured List](https://carbondesignsystem.com/components/structured-list/usage/): Structured data list - [Tabs](https://carbondesignsystem.com/components/tabs/usage/): Tabbed content navigation - [Tag](https://carbondesignsystem.com/components/tag/usage/): Label and category tags - [Text Area](https://carbondesignsystem.com/components/text-area/usage/): Multi-line text input - [Text Input](https://carbondesignsystem.com/components/text-input/usage/): Single-line text input - [Tile](https://carbondesignsystem.com/components/tile/usage/): Clickable tile component - [Time Picker](https://carbondesignsystem.com/components/time-picker/usage/): Time selection input - [Toggle](https://carbondesignsystem.com/components/toggle/usage/): On/off toggle switch - [Toggletip](https://carbondesignsystem.com/components/toggletip/usage/): Interactive tooltip - [Toolbar](https://carbondesignsystem.com/components/toolbar/usage/): Action toolbar - [Tooltip](https://carbondesignsystem.com/components/tooltip/usage/): Hover tooltip - [Tree View](https://carbondesignsystem.com/components/tree-view/usage/): Hierarchical tree navigation - [UI Shell](https://carbondesignsystem.com/components/UI-shell-header/usage/): App shell header, side nav, and footer ## Patterns - [Common Actions](https://carbondesignsystem.com/patterns/common-actions/): Standard UI actions - [Dialogs](https://carbondesignsystem.com/patterns/dialog-patterns/): Dialog and modal patterns - [Disclosures](https://carbondesignsystem.com/patterns/disclosures/): Disclosure patterns - [Empty States](https://carbondesignsystem.com/patterns/empty-states-pattern/): No content state handling - [Filtering](https://carbondesignsystem.com/patterns/filtering/): Data filtering patterns - [Forms](https://carbondesignsystem.com/patterns/forms-pattern/): Form design patterns - [Global Header](https://carbondesignsystem.com/patterns/global-header/): Site-wide header pattern - [Loading](https://carbondesignsystem.com/patterns/loading-pattern/): Loading state patterns - [Login](https://carbondesignsystem.com/patterns/login-pattern/): Authentication patterns - [Notifications](https://carbondesignsystem.com/patterns/notification-pattern/): Notification patterns - [Overflow Content](https://carbondesignsystem.com/patterns/overflow-content/): Handling overflow - [Pagination](https://carbondesignsystem.com/patterns/pagination-pattern/): Pagination patterns - [Placeholder Loading](https://carbondesignsystem.com/patterns/placeholder-loading-pattern/): Skeleton loading - [Search](https://carbondesignsystem.com/patterns/search-pattern/): Search UX patterns - [Status Indicators](https://carbondesignsystem.com/patterns/status-indicator-pattern/): Status display patterns ## Data Visualization - [Overview](https://carbondesignsystem.com/data-visualization/getting-started/): Data viz overview - [Chart Types](https://carbondesignsystem.com/data-visualization/chart-types/): Available chart types - [Color Palettes](https://carbondesignsystem.com/data-visualization/color-palettes/): Viz color system - [Axes & Labels](https://carbondesignsystem.com/data-visualization/axes-and-labels/): Chart axes guidance ## Carbon Charts - [Overview](https://charts.carbondesignsystem.com/): Carbon Charts component library (React, Vue, Angular, Svelte, Vanilla) ## Frameworks - [React (@carbon/react)](https://carbondesignsystem.com/developing/frameworks/react/): React implementation - [Web Components (@carbon/web-components)](https://carbondesignsystem.com/developing/frameworks/web-components/): Web Components implementation - [Angular](https://angular.carbondesignsystem.com/documentation/): Angular implementation - [Vue](https://carbondesignsystem.com/developing/frameworks/vue/): Community Vue implementation ## Source Code — carbon-design-system/carbon > Core Carbon packages: React components, Web Components, icons, pictograms, tokens, and styles. - [Repository](https://github.com/carbon-design-system/carbon): Main monorepo - [React (@carbon/react)](https://github.com/carbon-design-system/carbon/tree/main/packages/react): React component source code - [Web Components (@carbon/web-components)](https://github.com/carbon-design-system/carbon/tree/main/packages/web-components): Web Components source code - [Icons (@carbon/icons)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons): Icon SVG source files - [Icons React (@carbon/icons-react)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react): React icon components - [Icons Web Components (@carbon/icons-element)](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-element): Web Component icon elements - [Pictograms (@carbon/pictograms)](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms): Pictogram SVG source files - [Pictograms React (@carbon/pictograms-react)](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms-react): React pictogram components - [Styles (@carbon/styles)](https://github.com/carbon-design-system/carbon/tree/main/packages/styles): CSS and Sass styles - [Tokens (@carbon/tokens)](https://github.com/carbon-design-system/carbon/tree/main/packages/tokens): Design tokens - [Motion (@carbon/motion)](https://github.com/carbon-design-system/carbon/tree/main/packages/motion): Motion tokens - [Type (@carbon/type)](https://github.com/carbon-design-system/carbon/tree/main/packages/type): Typography tokens and utilities - [Layout (@carbon/layout)](https://github.com/carbon-design-system/carbon/tree/main/packages/layout): Spacing and grid tokens - [Themes (@carbon/themes)](https://github.com/carbon-design-system/carbon/tree/main/packages/themes): Theme definitions (White, G10, G90, G100) - [Examples](https://github.com/carbon-design-system/carbon/tree/main/examples): Framework usage examples ## Source Code — carbon-design-system/ibm-products > Extended Carbon-powered component library for IBM product teams, including advanced patterns and enterprise-grade components. - [Repository](https://github.com/carbon-design-system/ibm-products): IBM Products monorepo - [IBM Products React (@carbon/ibm-products)](https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products): React components for IBM Products - [IBM Products Web Components (@carbon/ibm-products-web-components)](https://github.com/carbon-design-system/ibm-products/tree/main/packages/ibm-products-web-components): Web Components for IBM Products - [Storybook](https://ibm-products.carbondesignsystem.com): Interactive component demos ## Source Code — carbon-design-system/carbon-ai-chat > Carbon AI Chat component library for building AI-powered chat interfaces, with React and Web Component implementations. - [Repository](https://github.com/carbon-design-system/carbon-ai-chat): Carbon AI Chat monorepo - [Packages](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/packages): React and Web Component chat packages - [Examples](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/examples): Usage examples for React and Web Components - [Demo](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/demo): Live demo source - [Docs](https://github.com/carbon-design-system/carbon-ai-chat/tree/main/docs): Documentation source - [Storybook](https://chat.carbondesignsystem.com/tag/latest/docs/documents/Overview.html): Interactive AI chat component docs ## Resources - [GitHub](https://github.com/carbon-design-system/carbon): Source code - [Storybook (React)](https://react.carbondesignsystem.com/): Interactive component demos - [FAQ](https://carbondesignsystem.com/help/faq/): Frequently asked questions - [Changelog](https://github.com/carbon-design-system/carbon/releases): Release notes - [Community Assets](https://carbondesignsystem.com/community/component-index/): Community components