Carbon Components Svelte

Carbon Components Svelte is a Svelte component library that implements the Carbon Design System , an open source design system by IBM.

Design systems facilitate design and development through reuse, consistency, and extensibility.

Installation

Install carbon-components-svelte as a development dependency in your project.

Using Yarn:

Using NPM:

Styling

Before importing components, you will need to first apply Carbon component styles. The Carbon Design System supports five themes (2 light, 3 dark).

{#each ["white", "g10", "g80", "g90", "g100"] as value} {/each}

This library ships with six pre-compiled CSS StyleSheets built from carbon-components .

An alternative to loading styles is to link an external StyleSheet from a Content Delivery Networks (CDN) like unpkg.com .

This is best suited for rapid prototyping or if your set-up does not use a CSS loader.

The 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.

Refer to the official Carbon guide on SASS for documentation.

Portfolio

The Carbon Svelte portfolio includes packages for icons, pictograms, and data visualization.