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!
npm install ui-ingredients
# yarn add ui-ingredients
# pnpm add ui-ingredients
<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>
- 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
- zag - The fantastic library that powers UI ingredients
- ark - The outstanding headless component library that greatly inspired this one
View components demo here