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

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 Network (CDN) like unpkg.com .

This is best suited for rapid prototyping.

HTML

svelte:head

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.

Dynamic theming

Use the "all.css" StyleSheet for dynamic, client-side theming.

Programmatically switch between each of the five Carbon themes by setting the "theme" attribute on the HTML element.

You can use the Theme utility component to update the theme at runtime.

Portfolio

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