compote-ui
getting-started
Load when setting up compote-ui in a Svelte or SvelteKit app. Covers npm install, bun add, importing tailwindcss before compote-ui/theme.css, first imports from compote-ui, Toast.Toaster placement, Svelte 5 runes usage, and peer dependency basics.
Compote UI — Getting Started
Use Svelte 5 runes, import Tailwind first, then import compote-ui/theme.css.
Setup
npm install compote-uibun add compote-ui@import 'tailwindcss';
@import 'compote-ui/theme.css';<script lang="ts">
import { Button, Card } from 'compote-ui';
</script>
<Card.Root>
<Card.Header>
<Card.Title>Account</Card.Title>
<Card.Description>Manage account settings.</Card.Description>
</Card.Header>
<Card.Content>
<Button>Save</Button>
</Card.Content>
</Card.Root>Core Patterns
Use Svelte 5 bindings
<script lang="ts">
import { Dialog, Button } from 'compote-ui';
let open = $state(false);
</script>
<Button onclick={() => (open = true)}>Open</Button>
<Dialog.Root bind:open>
<Dialog.Title>Confirm</Dialog.Title>
<Dialog.Description>Confirm the action.</Dialog.Description>
</Dialog.Root>Render toast output once
<script lang="ts">
import { Toast } from 'compote-ui';
let { children } = $props();
</script>
<Toast.Toaster />
{@render children()}import { toast } from 'compote-ui';
toast.success('Saved');Add optional peers only when used
bun add @tanstack/svelte-tablebun add @tanstack/svelte-virtualUse @tanstack/svelte-table with compote-ui/data-table; add @tanstack/svelte-virtual only with compote-ui/data-table/virtual.
Common Mistakes
CRITICAL Missing theme CSS import
Wrong:
@import 'tailwindcss';Correct:
@import 'tailwindcss';
@import 'compote-ui/theme.css';Components rely on theme.css for Compote CSS variables and Tailwind token definitions.
Source: src/lib/theme.css, src/routes/layout.css
HIGH Using Svelte legacy props
Wrong:
<script lang="ts">
export let open = false;
$: visible = open;
</script>Correct:
<script lang="ts">
let { open = $bindable(false) } = $props();
const visible = $derived(open);
</script>The project uses Svelte 5 runes mode globally.
Source: CLAUDE.md, svelte.config.js
MEDIUM Installing table peers for every app
Wrong:
bun add compote-ui @tanstack/svelte-table @tanstack/svelte-virtualCorrect:
bun add compote-ui
bun add @tanstack/svelte-table
bun add @tanstack/svelte-virtualInstall TanStack peers only when the consuming app imports the matching data-table subpath.
Source: package.json, src/lib/index.ts