4 KiB
carbon-components-svelte
Svelte implementation of the Carbon Design System
Getting started
carbon-components-svelte can be installed as a development dependency.
yarn add -D carbon-components-svelte
# OR
npm -i -D carbon-components-svelte
Usage
The quickest way to start is to use a template from the examples folder.
Example set-ups demonstrate usage with popular application bundlers and frameworks. They feature a mix of Singe-page Applications (SPA), Server-side rendering (SSR) and statically exported approaches.
- rollup: SPA bundled using Rollup
- rollup-typescript: SPA bundled using Rollup with TypeScript support
- routify: SPA + static export using Routify
- sapper: SSR + static export using Sapper
- svite: SPA developed with Svite, bundled with Rollup
- webpack: SPA bundled with webpack
Scaffolding
Each example is published in a dedicated branch of the same name.
Use degit to scaffold a new project:
For example, to use the svite template, run the following commands:
npx degit ibm/carbon-components-svelte#svite svelte-app
cd svelte-app
yarn install
Importing components
Import components from carbon-components-svelte in the script tag of your Svelte file.
<!-- App.svelte -->
<script>
import { Accordion, AccordionItem } from "carbon-components-svelte";
</script>
<Accordion>
<AccordionItem title="Section 1" open> Content 1 </AccordionItem>
<AccordionItem title="Section 2"> Content 2 </AccordionItem>
<AccordionItem title="Section 3"> Content 3 </AccordionItem>
</Accordion>
Refer to COMPONENT_INDEX.md for component documentation.
Precompiled CSS StyleSheets
carbon-components-svelte includes precompiled CSS StyleSheets for each Carbon theme:
- white.css: Default Carbon theme (light)
- g10.css: Gray 10 theme (light)
- g90.css: Gray 90 theme (dark)
- g100.css: Gray 100 theme (dark)
- all.css: All themes (White, Gray 10, Gray 90, Gray 100) using CSS variables
Each StyleSheet is generated from the flagship carbon-components library.
The examples use all.css for dynamic theming through CSS variables.
Usage
svelte-preprocess
The easiest way to import a StyleSheet is with svelte-preprocess.
const svelteOptions = {
preprocess: require("svelte-preprocess")(),
};
<!-- App.svelte -->
<style global>
/** Gray 10 theme **/
@import "carbon-components-svelte/css/g10";
</style>
JavaScript import
Importing a CSS file in a JavaScript file will require the appropriate file loader(s).
import "carbon-components-svelte/css/all.css";
import App from "./App.svelte";
const app = new App({ target: document.body });
export default app;
See webpack.config.js in examples/webpack.
TypeScript support
The component library ships with TypeScript definitions (types/index.d.ts).
Contributing
Refer to the Contributing guidelines.