Package Exports

ui-ingredients
ui-ingredients/accordion
ui-ingredients/alert
ui-ingredients/alert-dialog
ui-ingredients/anatomy
ui-ingredients/angle-slider
ui-ingredients/avatar
ui-ingredients/breadcrumbs
ui-ingredients/carousel
ui-ingredients/checkbox
ui-ingredients/clipboard
ui-ingredients/collapsible
ui-ingredients/collection
ui-ingredients/color-picker
ui-ingredients/combobox
ui-ingredients/date-picker
ui-ingredients/dialog
ui-ingredients/drawer
ui-ingredients/editable
ui-ingredients/environment-provider
ui-ingredients/field
ui-ingredients/file-upload
ui-ingredients/floating-panel
ui-ingredients/focus-trap
ui-ingredients/highlight
ui-ingredients/hover-card
ui-ingredients/listbox
ui-ingredients/locale-provider
ui-ingredients/menu
ui-ingredients/number-input
ui-ingredients/package.json
ui-ingredients/pagination
ui-ingredients/pin-input
ui-ingredients/popover
ui-ingredients/portal
ui-ingredients/presence
ui-ingredients/progress
ui-ingredients/qr-code
ui-ingredients/radio-group
ui-ingredients/rating-group
ui-ingredients/segment-group
ui-ingredients/select
ui-ingredients/signature-pad
ui-ingredients/slider
ui-ingredients/splitter
ui-ingredients/steps
ui-ingredients/switch
ui-ingredients/tabs
ui-ingredients/tags-input
ui-ingredients/time-picker
ui-ingredients/timer
ui-ingredients/toast
ui-ingredients/toggle
ui-ingredients/toggle-group
ui-ingredients/tooltip
ui-ingredients/tour
ui-ingredients/tree-view

Readme

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>

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