Kampsy UI

<script lang="ts">
  import { Button, Input, Badge, Note, Toaster, toast } from 'kampsy-ui';
  import { ArrowLeft, ArrowRight } from 'kampsy-ui/icons';
  let value = $state('');
  let loading = $state(false);
</script>

<!-- Button: prefix/suffix are Snippets, not props -->
<Button variant="secondary" size="medium" {loading} onclick={() => (loading = true)}>
  {#snippet prefix()}<ArrowLeft />{/snippet}
  Save changes
  {#snippet suffix()}<ArrowRight />{/snippet}
</Button>

<!-- Icon-only: MUST have svgOnly + aria-label + shape -->
<Button svgOnly shape="circle" aria-label="Copy deployment URL" onclick={() => navigator.clipboard.writeText('...')}>
  <ArrowRight />
</Button>

<!-- Input: bind:value, label, error (shows icon + aria-invalid) -->
<Input bind:value label="Email" placeholder="you@acme.com" error={value ? undefined : 'Required'} />

<!-- Badge: icon is Component, not Snippet -->
<script>import { Information } from 'kampsy-ui/icons';</script>
<Badge variant="blue" contrast="high" size="md" icon={Information}>Beta</Badge>

<!-- Note: action is Snippet -->
<Note type="success" fill size="medium">
  Project deployed
  {#snippet action()}<Button size="tiny" variant="secondary">View</Button>{/snippet}
</Note>

<!-- Toast: render one Toaster near the application root -->
<Toaster position="bottom-right" />
<Button onclick={() => toast.success('Project deployed')}>Deploy</Button>

<script lang="ts">
  import { Toaster, toast } from 'kampsy-ui';
</script>

<Toaster position="bottom-right" />

<button onclick={() => toast('Project saved')}>Save project</button>

<script lang="ts">
  import * as Modal from 'kampsy-ui';
  import * as Select from 'kampsy-ui';
  import * as Table from 'kampsy-ui';
  import * as Collapse from 'kampsy-ui';
  let modalActive = $state(false);
  let selected = $state('');
</script>

<!-- Modal: bind:active is the source of truth -->
<Modal.Root bind:active={modalActive}>
  <Modal.Content>
    <Modal.Header>
      <Modal.Title>Invite member</Modal.Title>
      <Modal.Subtitle>They will get an email invite.</Modal.Subtitle>
    </Modal.Header>
    <Modal.Body>
      <input placeholder="Email" />
    </Modal.Body>
    <Modal.Footer>
      <Modal.Action>
        <button onclick={() => (modalActive = false)}>Cancel</button>
        <button onclick={() => (modalActive = false)}>Invite</button>
      </Modal.Action>
    </Modal.Footer>
  </Modal.Content>
</Modal.Root>

<!-- Select: bind:value, handles mobile backdrop + Esc + clickOutside internally -->
<Select.Root bind:value={selected} size="medium">
  <Select.Trigger><Select.Value placeholder="Pick a framework" /></Select.Trigger>
  <Select.Content>
    <Select.Item value="svelte">Svelte</Select.Item>
    <Select.Item value="react">React</Select.Item>
  </Select.Content>
</Select.Root>

<!-- Table -->
<Table.Root>
  <Table.Head><Table.Row><Table.Header>Name</Table.Header></Table.Row></Table.Head>
  <Table.Body><Table.Row><Table.Cell>Acme</Table.Cell></Table.Row></Table.Body>
</Table.Root>

<!-- Collapse -->
<Collapse.Root>
  <Collapse.Item><Collapse.Trigger>What is kampsy-ui?</Collapse.Trigger><Collapse.Content>A Svelte 5 + Tailwind v4 UI kit.</Collapse.Content></Collapse.Item>
</Collapse.Root>

<!-- Tabs: bind:selected, type default|secondary -->
<script>import Tabs from 'kampsy-ui'; let selected = $state('preview');</script>
<Tabs bind:selected tabs={[{title:'Preview',value:'preview'},{title:'Code',value:'code',disabled:true,tooltip:'Soon'}]} />

<!-- Checkbox: bind:checked -->
<script>import { Checkbox } from 'kampsy-ui'; let checked=$state(false);</script>
<Checkbox bind:checked>Remember me</Checkbox>

<!-- Avatar group: limit + overlap -->
<script>import { Avatar } from 'kampsy-ui';</script>
<Avatar.Group members={[{username:'vercel'},{src:'…',title:'Ada'}]} size={32} limit={5} overlap="auto" />

<!-- Dark mode: pair every kui token -->
<div class="bg-kui-light-bg dark:bg-kui-dark-bg text-kui-light-gray-1000 dark:text-kui-dark-gray-1000 border-kui-light-gray-200 dark:border-kui-dark-gray-400">
  ...
</div>

npx @sveltejs/mcp list-sections
npx @sveltejs/mcp get-documentation "$state,$derived,$effect,snippets"