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' }} />