UI Ingredients

Headless component library for Svelte powered by zag

⚠️ This project is currently in the early stages of development. You're welcome to use it and we encourage contributions. Please use with caution as it is still evolving!

Installation

npm install ui-ingredients
# yarn add ui-ingredients
# pnpm add 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
• 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
• 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