{"id":13405972,"url":"https://github.com/carbon-design-system/carbon-components-svelte","last_synced_at":"2026-06-06T01:02:45.851Z","repository":{"id":37027687,"uuid":"228229631","full_name":"carbon-design-system/carbon-components-svelte","owner":"carbon-design-system","description":"Svelte implementation of the Carbon Design System","archived":false,"fork":false,"pushed_at":"2026-05-29T18:20:23.000Z","size":31984,"stargazers_count":2874,"open_issues_count":58,"forks_count":260,"subscribers_count":37,"default_branch":"master","last_synced_at":"2026-05-29T19:06:06.994Z","etag":null,"topics":["carbon","carbon-design-system","component-library","design-system","svelte","svelte-components","typescript","ui-components","ui-library"],"latest_commit_sha":null,"homepage":"https://svelte.carbondesignsystem.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/carbon-design-system.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":"metonym"}},"created_at":"2019-12-15T18:16:39.000Z","updated_at":"2026-05-29T18:20:26.000Z","dependencies_parsed_at":"2022-07-10T16:03:04.352Z","dependency_job_id":"7b8e9532-d383-4783-adf9-af852d4c9a6c","html_url":"https://github.com/carbon-design-system/carbon-components-svelte","commit_stats":{"total_commits":1681,"total_committers":104,"mean_commits":16.16346153846154,"dds":"0.23914336704342654","last_synced_commit":"c3dd705539cb1c4dba34bfd495bc828841babbb7"},"previous_names":["ibm/carbon-components-svelte"],"tags_count":320,"template":false,"template_full_name":null,"purl":"pkg:github/carbon-design-system/carbon-components-svelte","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-components-svelte","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-components-svelte/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-components-svelte/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-components-svelte/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/carbon-design-system","download_url":"https://codeload.github.com/carbon-design-system/carbon-components-svelte/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/carbon-design-system%2Fcarbon-components-svelte/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33965591,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["carbon","carbon-design-system","component-library","design-system","svelte","svelte-components","typescript","ui-components","ui-library"],"created_at":"2024-07-30T19:02:17.430Z","updated_at":"2026-06-06T01:02:45.824Z","avatar_url":"https://github.com/carbon-design-system.png","language":"TypeScript","funding_links":["https://github.com/sponsors/metonym"],"categories":["Svelte","TypeScript","typescript"],"sub_categories":[],"readme":"# carbon-components-svelte\n\n[![NPM][npm]][npm-url]\n![npm downloads to date](https://img.shields.io/npm/dt/carbon-components-svelte?color=262626\u0026style=for-the-badge)\n\u003ca href=\"https://discord.gg/J7JEUEkTRX\"\u003e\n\u003cimg src=\"https://img.shields.io/discord/689212587170201628?color=5865F2\u0026style=for-the-badge\" alt=\"Chat with us on Discord\"\u003e\n\u003c/a\u003e\n\nCarbon Components Svelte is a [Svelte](https://github.com/sveltejs/svelte) component library that implements the [Carbon Design System](https://github.com/carbon-design-system), an open source design system by IBM.\n\nDesign systems facilitate design and development through reuse, consistency, and extensibility.\n\nThe Carbon Svelte portfolio also includes:\n\n- **[Carbon Icons Svelte](https://github.com/carbon-design-system/carbon-icons-svelte)**: 2,600+ Carbon icons as Svelte components\n- **[Carbon Pictograms Svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)**: 1,500+ Carbon pictograms as Svelte components\n- **[Carbon Charts Svelte](https://github.com/carbon-design-system/carbon-charts/tree/master/packages/svelte)**: 25+ charts, powered by d3\n- **[Carbon Preprocess Svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte)**: Collection of Svelte preprocessors for Carbon\n\n## [Documentation](https://svelte.carbondesignsystem.com)\n\n## Installation\n\n```sh\n# npm\nnpm i carbon-components-svelte\n\n# pnpm\npnpm i carbon-components-svelte\n\n# Yarn\nyarn add carbon-components-svelte\n\n# Bun\nbun add carbon-components-svelte\n```\n\n## Usage\n\n### Styling\n\nBefore importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).\n\n- **white.css**: Default Carbon theme (light)\n- **g10.css**: Gray 10 theme (light)\n- **g80.css**: Gray 80 theme (dark)\n- **g90.css**: Gray 90 theme (dark)\n- **g100.css**: Gray 100 theme (dark)\n- **all.css**: All themes (White, Gray 10, Gray 90, Gray 100) using [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties)\n\nEach StyleSheet is [generated](scripts/build-css.js) from the flagship [carbon-components](https://github.com/carbon-design-system/carbon/tree/main/packages/carbon-components) library.\n\nThe compiled CSS is generated from the following `.scss` files:\n\n- [css/white.scss](css/white.scss)\n- [css/g10.scss](css/g10.scss)\n- [css/g80.scss](css/g80.scss)\n- [css/g90.scss](css/g90.scss)\n- [css/g100.scss](css/g100.scss)\n- [css/all.scss](css/all.scss)\n\n#### CSS StyleSheet\n\n```js\n// White theme\nimport \"carbon-components-svelte/css/white.css\";\n\n// Gray 10 theme\nimport \"carbon-components-svelte/css/g10.css\";\n\n// Gray 80 theme\nimport \"carbon-components-svelte/css/g80.css\";\n\n// Gray 90 theme\nimport \"carbon-components-svelte/css/g90.css\";\n\n// Gray 100 theme\nimport \"carbon-components-svelte/css/g100.css\";\n\n// All themes\nimport \"carbon-components-svelte/css/all.css\";\n```\n\n### SCSS\n\nThe most performant method to load styles is to import SCSS directly from carbon-components. Although it requires more set up, you can reduce the size of the bundle CSS by importing individual component styles instead of a pre-compiled CSS StyleSheet.\n\nRefer to the [official Carbon guide on SASS](https://github.com/carbon-design-system/carbon/blob/v10/docs/guides/sass.md) for documentation.\n\n### Dynamic theming\n\nUse the \"all.css\" StyleSheet for dynamic, client-side theming.\n\n```js\nimport \"carbon-components-svelte/css/all.css\";\n```\n\nUpdate the theme by setting the `theme` attribute on the `html` element. The default `theme` is `\"white\"`.\n\n```html\n\u003c!doctype html\u003e\n\u003chtml lang=\"en\" theme=\"g10\"\u003e\n  \u003cbody\u003e\n    ...\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nProgrammatically switch between each of the five Carbon themes by setting the \"theme\" attribute on the HTML element.\n\n```html\n\u003cscript\u003e\n  let theme = \"white\"; // \"white\" | \"g10\" | \"g80\" | \"g90\" | \"g100\"\n\n  $: document.documentElement.setAttribute(\"theme\", theme);\n\u003c/script\u003e\n```\n\n### Importing components\n\nImport components from `carbon-components-svelte` in the `script` tag of your Svelte file. Visit the [documentation site](https://svelte.carbondesignsystem.com) for examples.\n\n```html\n\u003c!-- App.svelte --\u003e\n\u003cscript\u003e\n  import { Accordion, AccordionItem } from \"carbon-components-svelte\";\n\u003c/script\u003e\n\n\u003cAccordion\u003e\n  \u003cAccordionItem title=\"Section 1\" open\u003e Content 1 \u003c/AccordionItem\u003e\n  \u003cAccordionItem title=\"Section 2\"\u003e Content 2 \u003c/AccordionItem\u003e\n  \u003cAccordionItem title=\"Section 3\"\u003e Content 3 \u003c/AccordionItem\u003e\n\u003c/Accordion\u003e\n```\n\n**Refer to the [documentation site](https://svelte.carbondesignsystem.com) for component API documentation.**\n\n## Preprocessors \u0026 Plugins\n\n[carbon-preprocess-svelte](https://github.com/carbon-design-system/carbon-preprocess-svelte) is a collection of Svelte preprocessors for Carbon.\n\n\u003e [!NOTE]\n\u003e Using `carbon-preprocess-svelte` is optional and not a prerequisite for this library. It should be installed as a development dependency.\n\n```sh\n# npm\nnpm i -D carbon-preprocess-svelte\n\n# pnpm\npnpm i -D carbon-preprocess-svelte\n\n# Yarn\nyarn add -D carbon-preprocess-svelte\n\n# Bun\nbun add -D carbon-preprocess-svelte\n```\n\n### `optimizeImports`\n\n`optimizeImports` is a Svelte preprocessor that rewrites barrel imports from Carbon components/icons/pictograms packages to their source Svelte code paths. This can significantly speed up development and production build compile times while preserving typeahead and autocompletion offered by integrated development environments (IDE) like VS Code.\n\nThe preprocessor optimizes imports from the following packages:\n\n- [carbon-components-svelte](https://github.com/carbon-design-system/carbon-components-svelte)\n- [carbon-icons-svelte](https://github.com/carbon-design-system/carbon-icons-svelte)\n- [carbon-pictograms-svelte](https://github.com/carbon-design-system/carbon-pictograms-svelte)\n\n**Before \u0026 After**\n\n```diff\n- import { Button } from \"carbon-components-svelte\";\n+ import Button from \"carbon-components-svelte/src/Button/Button.svelte\";\n\n- import { Add } from \"carbon-icons-svelte\";\n+ import Add from \"carbon-icons-svelte/lib/Add.svelte\";\n\n- import { Airplane } from \"carbon-pictograms-svelte\";\n+ import Airplane from \"carbon-pictograms-svelte/lib/Airplane.svelte\";\n```\n\n#### Usage\n\nSee [examples](examples) for full configurations.\n\n```js\n// svelte.config.js\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\nexport default {\n  preprocess: [optimizeImports()],\n};\n```\n\nAny other preprocessors that transpile code in the `script` block should be invoked before `optimizeImports`.\n\nFor example, `vitePreprocess` should precede `optimizeImports`.\n\n```diff\n// svelte.config.js\n+ import { vitePreprocess } from \"@sveltejs/vite-plugin-svelte\";\nimport { optimizeImports } from \"carbon-preprocess-svelte\";\n\nexport default {\n  preprocess: [\n+   vitePreprocess(),\n    optimizeImports()\n  ],\n};\n```\n\n### `optimizeCss`\n\n`optimizeCss` is a Vite plugin that removes unused Carbon styles at build time. The plugin is compatible with Rollup ([Vite](https://vitejs.dev/guide/api-plugin) extends the Rollup plugin API).\n\n`carbon-components-svelte@0.85.0` or greater is required.\n\n```diff\n$ vite build\n\nOptimized index-CU4gbKFa.css\n- Before: 606.26 kB\n+ After:   53.22 kB (-91.22%)\n\ndist/index.html                  0.34 kB │ gzip:  0.24 kB\ndist/assets/index-CU4gbKFa.css  53.22 kB │ gzip:  6.91 kB\ndist/assets/index-Ceijs3eO.js   53.65 kB │ gzip: 15.88 kB\n```\n\n\u003e [!NOTE]\n\u003e This is a plugin and not a Svelte preprocessor. It should be added to the list of `vite.plugins`. For Vite set-ups, this plugin is only run when building the app. For Rollup and Webpack, you should conditionally apply the plugin to only execute when building for production.\n\n#### Usage\n\nSee [examples](examples) for full configurations.\n\n```js\n// vite.config.js\nimport { sveltekit } from \"@sveltejs/kit/vite\";\nimport { optimizeCss } from \"carbon-preprocess-svelte\";\nimport { defineConfig } from \"vite\";\n\nexport default defineConfig({\n  plugins: [sveltekit(), optimizeCss()],\n});\n```\n\n## Examples\n\n- [examples/rollup](examples/rollup/)\n- [examples/sveltekit](examples/sveltekit/)\n- [examples/vite](examples/vite/)\n- [examples/webpack](examples/webpack/)\n\n## TypeScript support\n\n[TypeScript definitions](types) are generated by [sveld](https://github.com/carbon-design-system/sveld).\n\n## Contributing\n\nRefer to the [Contributing guidelines](CONTRIBUTING.md).\n\n## [Changelog](CHANGELOG.md)\n\n## License\n\n[Apache 2.0](LICENSE)\n\n[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=262626\u0026style=for-the-badge\n[npm-url]: https://npmjs.com/package/carbon-components-svelte\n\n## \u003cpicture\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: dark)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-dark.svg\"\u003e\u003csource height=\"20\" width=\"20\" media=\"(prefers-color-scheme: light)\" srcset=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003cimg height=\"20\" width=\"20\" alt=\"IBM Telemetry\" src=\"https://raw.githubusercontent.com/ibm-telemetry/telemetry-js/main/docs/images/ibm-telemetry-light.svg\"\u003e\u003c/picture\u003e IBM Telemetry\n\nThis package uses IBM Telemetry to collect de-identified and anonymized metrics data in CI environments. By installing\nthis package as a dependency you are agreeing to telemetry collection. To opt out, see\n[Opting out of IBM Telemetry data collection](https://github.com/ibm-telemetry/telemetry-js/tree/main#opting-out-of-ibm-telemetry-data-collection).\nFor more information on the data being collected, please see the\n[IBM Telemetry documentation](https://github.com/ibm-telemetry/telemetry-js/tree/main#ibm-telemetry-collection-basics).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-components-svelte","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcarbon-design-system%2Fcarbon-components-svelte","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcarbon-design-system%2Fcarbon-components-svelte/lists"}