DOCSEARCHbyAlgolia
Submit Docs

Carbon Components Svelte

repository·master·Indexed 25 days ago

https://github.com/carbon-design-system/carbon-components-svelte

A Svelte component library implementing the IBM Carbon Design System. It provides over 70 accessible, production-ready components with full TypeScript support and five built-in themes. The library includes optional optimization tools via carbon-preprocess-svelte, such as optimizeImports for faster builds and optimizeCss for reducing production bundle size. It is compatible with Vite, SvelteKit, Rollup, and Webpack.

Tokens
11K
Snippets
8
Records
183
Agent score
83%

What's inside carbon-components-svelte

  1. Configure bundlers with carbon-preprocess-svelte

    master

    To use the optimization tools, add optimizeImports to your Svelte preprocessor and optimizeCss to your bundler plugins.

    Vite Configuration

    // vite.config.js
import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";

export default {
  plugins: [
    svelte({
      preprocess: [vitePreprocess(), optimizeImports()],
    }),
    optimizeCss(),
  ],
};

    SvelteKit Configuration

    // svelte.config.js
import adapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { optimizeImports } from "carbon-preprocess-svelte";

const config = {
  preprocess: [vitePreprocess(), optimizeImports()],
  kit: { adapter: adapter() },
};

export default config;

    Rollup Configuration

    // rollup.config.js
import svelte from "rollup-plugin-svelte";
import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";

const production = !process.env.ROLLUP_WATCH;

export default {
  plugins: [
    svelte({
      preprocess: [optimizeImports()],
    }),
    production && optimizeCss(),
  ],
};

    Webpack Configuration

    // webpack.config.mjs
import { OptimizeCssPlugin, optimizeImports } from "carbon-preprocess-svelte";

export default {
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
          options: {
            preprocess: [optimizeImports()],
          },
        },
      },
    ],
  },
  plugins: [new OptimizeCssPlugin()],
};

  2. Optimize builds with carbon-preprocess-svelte

    master

    Use carbon-preprocess-svelte to improve development performance and reduce production bundle sizes.

    • optimizeImports: Rewrites barrel imports to direct source paths to speed up HMR and cold builds.
    • optimizeCss: Tree-shakes unused Carbon CSS at build time.

    Install as a dev dependency:

    # npm
npm i -D carbon-preprocess-svelte

# pnpm
pnpm add -D carbon-preprocess-svelte

# Yarn
yarn add -D carbon-preprocess-svelte

# Bun
bun add -D carbon-preprocess-svelte

  3. Install and use Carbon Icons Svelte

    master

    Install the icon package to access 2,700+ icons in four sizes (16, 20, 24, and 32 pixels). Use the size prop to set the icon dimensions.

    # npm
npm i carbon-icons-svelte

# pnpm
pnpm add carbon-icons-svelte

# Yarn
yarn add carbon-icons-svelte

# Bun
bun add carbon-icons-svelte
    <script>
  import Add from "carbon-icons-svelte/lib/Add.svelte";
</script>

<Add size={24} />

  4. Apply Carbon component styles

    master

    Before using components, you must import a Carbon theme stylesheet at the top-level entry point of your application (e.g., index.js or src/+layout.svelte).

    Available themes:

    • white.css: Default light theme
    • g10.css: Gray 10 (light)
    • g80.css: Gray 80 (dark)
    • g90.css: Gray 90 (dark)
    • g100.css: Gray 100 (dark)
    • all.css: Includes all five themes for dynamic switching
    // White theme
import "carbon-components-svelte/css/white.css";

// Gray 10 theme
import "carbon-components-svelte/css/g10.css";

// Gray 80 theme
import "carbon-components-svelte/css/g80.css";

// Gray 90 theme
import "carbon-components-svelte/css/g90.css";

// Gray 100 theme
import "carbon-components-svelte/css/g100.css";

// All themes
import "carbon-components-svelte/css/all.css";

  6. Install carbon-preprocess-svelte

    master

    carbon-preprocess-svelte is an optional collection of tools to optimize build times and bundle size. It should be installed as a development dependency.

    # npm
npm i -D carbon-preprocess-svelte

# pnpm
pnpm add -D carbon-preprocess-svelte

# Yarn
yarn add -D carbon-preprocess-svelte

# Bun
bun add -D carbon-preprocess-svelte

  7. Install and use Carbon Pictograms Svelte

    master

    Install the pictogram package to access 1,500+ illustrative pictograms. They are larger than icons and default to 64px.

    # npm
npm i carbon-pictograms-svelte

# pnpm
pnpm add carbon-pictograms-svelte

# Yarn
yarn add carbon-pictograms-svelte

# Bun
bun add carbon-pictograms-svelte
    <script>
  import Cloud from "carbon-pictograms-svelte/lib/Cloud.svelte";
</script>

<Cloud />

  8. Apply a Carbon theme stylesheet

    master

    To use Carbon components, you must import a theme stylesheet at the top-level of your application (e.g., in index.js or src/+layout.svelte).

    Available themes:

    • White
    • Gray 10 (g10)
    • Gray 80 (g80)
    • Gray 90 (g90)
    • Gray 100 (g100)

    To support dynamic theming (switching at runtime), import all.css instead of a specific theme.

    // White theme
import "carbon-components-svelte/css/white.css";

// Gray 10 theme
import "carbon-components-svelte/css/g10.css";

// Gray 80 theme
import "carbon-components-svelte/css/g80.css";

// Gray 90 theme
import "carbon-components-svelte/css/g90.css";

// Gray 100 theme
import "carbon-components-svelte/css/g100.css";

// All themes (for dynamic theming)
import "carbon-components-svelte/css/all.css";

  9. Implement dynamic theming

    master

    To switch themes at runtime, import the all.css stylesheet and update the theme attribute on the <html> element. The default theme is "white". Supported values are "white", "g10", "g80", "g90", and "g100".

    You can manage this via HTML or programmatically in Svelte. Alternatively, use the Theme component from the library for reactive management.

    <script>
  let theme = "white"; // "white" | "g10" | "g80" | "g90" | "g100"

  $: document.documentElement.setAttribute("theme", theme);
</script>

  10. Configure carbon-preprocess-svelte for Vite and SvelteKit

    master

    To optimize your build, add optimizeImports to your Svelte preprocessor and optimizeCss to your Vite plugins.

    Vite Configuration:

    // vite.config.js
import { svelte, vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";

export default {
  plugins: [
    svelte({
      preprocess: [vitePreprocess(), optimizeImports()],
    }),
    optimizeCss(),
  ],
};

    SvelteKit Configuration:

    // svelte.config.js
import adapter from "@sveltejs/adapter-static";
import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
import { optimizeImports } from "carbon-preprocess-svelte";

const config = {
  preprocess: [vitePreprocess(), optimizeImports()],
  kit: { adapter: adapter() },
};

export default config;

    SvelteKit Vite Plugin Configuration:

    // vite.config.js
import { sveltekit } from "@sveltejs/kit/vite";
import { optimizeCss } from "carbon-preprocess-svelte";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit(), optimizeCss()],
});

  11. Configure carbon-preprocess-svelte for Rollup and Webpack

    master

    Rollup Configuration:

    // rollup.config.js
import svelte from "rollup-plugin-svelte";
import { optimizeCss, optimizeImports } from "carbon-preprocess-svelte";

const production = !process.env.ROLLUP_WATCH;

export default {
  plugins: [
    svelte({
      preprocess: [optimizeImports()],
    }),
    production && optimizeCss(),
  ],
};

    Webpack Configuration:

    // webpack.config.mjs
import { OptimizeCssPlugin, optimizeImports } from "carbon-preprocess-svelte";

export default {
  module: {
    rules: [
      {
        test: /\.svelte$/,
        use: {
          loader: "svelte-loader",
          options: {
            preprocess: [optimizeImports()],
          },
        },
      },
    ],
  },
  plugins: [new OptimizeCssPlugin()],
};