Headless component library for Svelte powered by zag
npm install ui-ingredients<script>
import {Dialog, Portal} from 'ui-ingredients';
import {XCloseIcon, Button} from '$lib/icons';
</script>
<Dialog.Root lazyMount keepMounted>
<Dialog.Trigger>
{#snippet asChild(attrs)}
<Button {...attrs}>Open</Button>
{/snippet}
</Dialog.Trigger>
<Portal>
<Dialog.Backdrop />
<Dialog.Positioner>
<Dialog.Content>
<Dialog.Title>Title</Dialog.Title>
<Dialog.Description>Description</Dialog.Description>
<Dialog.CloseTrigger>
<XCloseIcon />
</Dialog.CloseTrigger>
</Dialog.Content>
</Dialog.Positioner>
</Portal>
</Dialog.Root>- zag - The fantastic library that powers UI ingredients
- ark - The outstanding headless component library that greatly inspired this one
Browse the documentation for more information on how to use UI Ingredients
