ui-ingredients
v0.0.53
Published
Headless component library for Svelte powered by zag
Downloads
3,105
Maintainers
Keywords
Readme
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