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';

  let open = $state(false)
</script>

<Dialog.Root 
  {open}
  onOpenChange={function (details) {
    open = details.open;
  }}
  lazyMount
  keepMounted
  onExitComplete={function () {
    console.log('🚀');
  }}
>
  <Dialog.Trigger>
    {#snippet asChild(props)}
      <Button {...props()}>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>

Inspiration

• zag - The fantastic library that powers UI ingredients
• ark - The outstanding headless component library that greatly inspired this one

Documentation

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