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

Documentation

• Accordion
• Avatar
• Carousel
• Checkbox
• Clipboard
• Collapsible
• Combobox
• DatePicker
• Dialog
• Editable
• Field
• FileUpload
• HoverCard
• Menu
• NumberInput
• Pagination
• PinInput
• Popover
• Portal
• Progress
• QrCode
• RadioGroup
• RatingGroup
• Select
• SegmentGroup
• SignaturePad
• Slider
• Splitter
• Steps
• Switch
• Tabs
• TagsInput
• TimePicker
• Timer
• Toast
• ToggleGroup
• Tooltip
• TreeView

View components demo here