Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

ui-ingredients

calvo-jp1.8kMIT0.31.1TypeScript support: included

Headless component library for Svelte powered by zag

Svelte, Component Library, Headless UI, Accordion, Alert, Alert Dialog, Avatar, Breadcrumbs, Carousel, Checkbox, Clipboard, Collapsible, Color Picker, Combobox, Date Picker, Dialog, Drawer, Editable, Field, File Upload, Floating Panel, Highlight, Hover Card, Menu, Number Input, Pagination, Pin Input, Popover, Portal, Presence, Progress, QR Code, Radio Group, Rating Group, Segment Group, Select, Signature Pad, Slider, Splitter, Steps, Switch, Tabs, Tags Input, Time Picker, Timer, Toast, Toggle, Toggle Group, Tooltip, Tour, 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