/ chips

Chips

@kumiki/headless/chips

Planned Svelte 5 attachments for Chips — three variants (static / dismissible / selectable) with keyboard activation + dismiss wiring.

Svelte 5 {@attach} factories. Glue ARIA / keyboard / focus onto any DOM node you choose. **Best when you want full control over markup and styling.**

Attach to your own DOM

<script lang="ts">
  import { createChips } from '@kumiki/headless/chips';
  const ctl = createChips({});
</script>

<div {@attach ctl.root}>
  <!-- your markup -->
</div>

Compound components (<Root> / <Trigger> / …). Markup is fixed; styling is not. Same trade-off as a typical headless UI library.

Live preview

Install

pnpm add @kumiki/components

Dismissible tag

<Chips.Root variant="dismissible" label="design" onDismiss={remove}>
  <Chips.Label>design</Chips.Label>
  <Chips.Close />
</Chips.Root>

Selectable filter

<Chips.Root variant="selectable" pressed={onlyMine} onPressedChange={(v) => (onlyMine = v)}>
  <Chips.Label>Only mine</Chips.Label>
</Chips.Root>

Styled, copy-paste presets (preview). Run pnpm kumiki add to drop the source into your project, then edit freely.

Live preview

Live preview…

Install

pnpm add @kumiki/atelier

Dismissible filter chips

<script lang="ts">
  import { Tailwind as Chips } from '@kumiki/atelier/chips';
  let tags = $state(['svelte', 'a11y', 'i18n']);
</script>

{#each tags as tag (tag)}
  <Chips.Root
    variant="dismissible"
    label={tag}
    onDismiss={() => (tags = tags.filter((t) => t !== tag))}
  >
    <Chips.Label>{tag}</Chips.Label>
    <Chips.Close />
  </Chips.Root>
{/each}

This component, layer by layer

Keyboard

Test discipline