Integrations
Svelte Integration
The Svelte adapter provides generated .svelte wrappers around the web component atoms. Each wrapper is typed, reactive, and works with SvelteKit and plain Vite/Svelte setups.
Installation
Install the design system package into your project.
npm install @org/design-systemImport tokens
Import the CSS once at your app root. This injects the CSS custom properties that all components read from. In SvelteKit, the right place is +layout.svelte. In a plain Svelte or Vite project, use src/main.ts or src/App.svelte.
<script>
import '@org/design-system/css';
</script>
<slot />Import and use components
Import individual .svelte wrappers from the /svelte sub-path. Each wrapper is a thin reactive layer over the underlying web component. Event names follow the reframe-* convention.
<script>
import Button from '@org/design-system/svelte/Button.svelte';
import Badge from '@org/design-system/svelte/Badge.svelte';
</script>
<Badge variant="success">Live</Badge>
<Button variant="primary" on:reframe-click={() => alert('clicked')}>
Deploy now
</Button>TypeScript support
All wrappers ship with inferred prop types. Add lang="ts" to your script block for full type-checking and autocomplete on every prop.
<script lang="ts">
import type { ComponentProps } from 'svelte';
import Button from '@org/design-system/svelte/Button.svelte';
// variant is 'primary' | 'secondary' | 'ghost' | 'danger'
let variant: ComponentProps<Button>['variant'] = 'primary';
</script>
<Button {variant}>Click me</Button>Switching modes
Set the data-theme attribute on document.documentElement to switch between light and dark. A reactive variable bound to a reactive statement keeps the attribute in sync with your component state.
<script>
let dark = false;
$: document.documentElement.setAttribute('data-theme', dark ? 'dark' : 'light');
</script>
<button on:click={() => (dark = !dark)}>
{dark ? 'Light mode' : 'Dark mode'}
</button>Staying up to date
Run the update command to pull the latest published release. A caret range in package.json keeps your project on compatible updates automatically.
npm update @org/design-system{
"dependencies": {
"@org/design-system": "^1.0.0"
}
}Next steps
Building with SolidStart or a Vite/Solid project? See Solid.
Solid →