UI Ingredients

Headless component library for Svelte powered by zag

Installation

npm install ui-ingredients
# yarn add ui-ingredients
# pnpm add ui-ingredients

Usage

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

Documentation

• Accordion
• Alert
• AlertDialog
• Avatar
• Breadcrumbs
• Carousel
• Checkbox
• Clipboard
• Collapsible
• ColorPicker
• Combobox
• DatePicker
• Dialog
• Drawer
• Editable
• Field
• FileUpload
• FloatingPanel
• Highlight
• HoverCard
• Menu
• NumberInput
• Pagination
• PinInput
• Popover
• Portal
• Presence
• Progress
• QrCode
• RadioGroup
• RatingGroup
• Select
• SegmentGroup
• SignaturePad
• Slider
• Splitter
• Steps
• Switch
• Tabs
• TagsInput
• TimePicker
• Timer
• Toast
• Toggle
• ToggleGroup
• Tooltip
• TreeView
• Tour
• The asChild prop
• Styling

Credits

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

Demo

View components demo here