JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 2212
  • Score
    100M100P100Q104946F
  • License MIT

Headless component library for Svelte powered by zag

Package Exports

  • ui-ingredients
  • ui-ingredients/accordion
  • ui-ingredients/avatar
  • ui-ingredients/carousel
  • ui-ingredients/checkbox
  • ui-ingredients/clipboard
  • ui-ingredients/collapsible
  • ui-ingredients/color-picker
  • ui-ingredients/combobox
  • ui-ingredients/date-picker
  • ui-ingredients/dialog
  • ui-ingredients/editable
  • ui-ingredients/environment-provider
  • ui-ingredients/field
  • ui-ingredients/file-upload
  • ui-ingredients/floating-panel
  • ui-ingredients/highlight
  • ui-ingredients/hover-card
  • ui-ingredients/locale-provider
  • ui-ingredients/menu
  • ui-ingredients/merge-props
  • ui-ingredients/number-input
  • 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-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
# yarn add ui-ingredients
# pnpm add ui-ingredients

Usage

<script>
  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

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