Headless component library for Svelte powered by zag
⚠️ This project is currently in the early stages of development. You're welcome to use it and we encourage contributions. Please use with caution as it is still evolving!
npm install ui-ingredients
# yarn add ui-ingredients
# pnpm add ui-ingredients
<script>
import {Dialog, Portal} from 'ui-ingredients';
import {XCloseIcon} from '$lib/icons';
</script>
<Dialog.Root>
<Dialog.Trigger>Open</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>
asChild
propView components demo here