carbon-components-svelte

Carbon Components Svelte is a component library for the Svelte framework that implements the Carbon Design System, the open source design system maintained by IBM. According to the README, it provides more than 90 components ranging from inputs to data tables, five built-in themes (two light and three dark), a fully typed TypeScript API covering props, events and slots, and aims for WCAG 2.1 AA accessibility with keyboard and screen-reader support. Styling can be loaded either as precompiled CSS or by importing SCSS directly from the flagship carbon-components package, which the README describes as the more performant route because unused component styles can be dropped. Five theme stylesheets are shipped: white (default light), g10 (light), g80, g90 and g100 (dark), plus an all.css bundle that carries all five using CSS custom properties. Dynamic theming is done by importing all.css and setting a theme attribute on the html element, either in markup or from script; a Theme component is also available for reactive switching. Components are imported from the package inside a Svelte script block, and the README directs readers to the project documentation site for component API details. The wider ecosystem includes Carbon Icons Svelte with over 2,700 icons in four sizes (16, 20, 24 and 32 pixels) selected through a size prop; Carbon Pictograms Svelte with over 1,500 illustrative pictograms intended for empty states, onboarding, hero sections and feature callouts, defaulting to 64 pixels; Carbon Charts Svelte with more than 25 d3-powered charts; and Carbon Preprocess Svelte, described as an optional development dependency. Carbon Preprocess Svelte provides two optimizations. optimizeImports is a Svelte preprocessor that rewrites barrel imports from the components, icons and pictograms packages to their source Svelte file paths, which the README says can speed up development and production compile times while preserving IDE typeahead. optimizeCss is a Vite and Rollup plugin that strips unused Carbon styles at build time; the README shows an example where a built stylesheet drops from about 606 kB to about 53 kB, and notes that version 0.85.0 or later of the library is required. Configuration snippets are given for Vite, SvelteKit, Rollup and Webpack, and example projects for each are included in the repository. TypeScript definitions are generated with sveld. Documentation is also published in LLM-friendly plain text: an llms.txt component index where each entry links to a per-component Markdown document, and an llms-full.txt file containing the full documentation, with a Markdown document available for any component by appending .md to its URL. The project is licensed under Apache 2.0 and lists contributing guidelines and a changelog. The README discloses that the package uses IBM Telemetry to collect de-identified and anonymized metrics data in CI environments, that installing it as a dependency constitutes agreement to that collection, and points to IBM documentation for opting out and for details of the data collected.