⚠️ Deprecation Notice

This library will be deprecated in favor of the new @ark-ui/svelte package.

Ark UI is a headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.

To learn more about @ark-ui/svelte and how to get started, check out the official blog post:
👉 Introducing ark-ui/svelte

While this library will remain available for reference, it is no longer actively maintained. We encourage you to explore and adopt @ark-ui/svelte for future projects.

Thanks for your support!

---

UI Ingredients

Headless component library for Svelte powered by zag

Installation

npm install ui-ingredients

Usage

<script>
  import {Dialog, Portal} from 'ui-ingredients';
  import {XCloseIcon} from '$lib/icons';
  import {Button} from '$lib/ui';
</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>

Packages

• ui-ingredients

  The core package

• ui-ingredients-plugin-tailwindcss

  Tailwind plugin to style the components using their data attributes.

Credits

• zag
• ark
• @headlessui/tailwindcss
• @kobalte/tailwindcss

Documentation

Browse the documentation for more information on how to use UI Ingredients