Getting Started
1. Wrap your layout with StyleProvider
StyleProvider.Root sets up context for customizable component styles. Place it in your root layout:
<!-- routes/+layout.svelte -->
<script lang="ts">
import { StyleProvider, Button } from '@repo/components'
import '../app.css'
const { children } = $props()
</script>
<StyleProvider.Root buttonVariants={Button.buttonVariants}>
{@render children?.()}
</StyleProvider.Root>Passing Button.buttonVariants uses the defaults. See Custom Styling to override them.
2. Use a button
<script lang="ts">
import { Button } from '@repo/components'
</script>
<Button.Root variant="default">Save</Button.Root>
<Button.Root variant="destructive">Delete</Button.Root>
<Button.Root variant="cta">Submit</Button.Root>3. Use a header
<script lang="ts">
import { Header } from '@repo/components'
</script>
<Header title="Employees" subtitle="MANAGEMENT">
<Button.Root variant="success" size="sm">+ Add</Button.Root>
</Header>4. Add SEO metadata
<script lang="ts">
import { SEOMeta, createPageMeta } from '@repo/components'
import { page } from '$app/state'
const meta = createPageMeta(page.url, {
title: 'Dashboard',
description: 'Main dashboard view',
})
</script>
<SEOMeta pageMeta={meta} defaultMeta={{ siteName: 'My App' }} />