repository·develop·Indexed 26 days ago
https://github.com/melt-ui/melt-uiA set of headless, accessible component builders for Svelte that provide logic and WAI-ARIA accessibility while leaving styling to the developer. Includes builders for components such as Accordion, Avatar, and Calendar, and utilizes the `use:melt` Svelte action to attach builders to elements.
The Date Range Field is a builder designed to provide a user-friendly, accessible interface for selecting a range of dates and times. It serves as an enhanced alternative to using two separate native date inputs, offering a more cohesive experience across modern browsers and devices.
Note: Before using this builder, ensure you understand how Melt handles dates and times by reviewing the Melt dates documentation.
The Scroll Area component consists of several structural parts that you can customize or style:
The Context Menu builder consists of the following structural components:
A Menubar is composed of the following structural elements:
The Collapsible component consists of three main parts:
Toolbar component acts as a container for grouping a set of controls, such as buttons, toggle groups, or dropdown menus. It is designed to adhere to the Toolbar WAI-ARIA design pattern.The Avatar component consists of two main parts:
The Combobox is an input with an associated popup containing a list of options, commonly used for autocomplete functionality and command palettes.
Melt UI is a headless UI library that provides builders instead of pre-styled components. A builder is a function that returns a collection of properties (elements and states) which you can apply to any HTML element or Svelte component using the use:melt action.
Key concepts:
createCollapsible that generate logic and attributes.root, trigger, content) that contain the necessary attributes and event handlers.open) that allow you to track and react to the component's internal state.use:melt: A Svelte action used to bind the builder's properties to your elements.<script>
import { createCollapsible, melt } from '@melt-ui/svelte'
const {
elements: { root, content, trigger },
states: { open }
} = createCollapsible()
</script>
<div use:melt={$root}>
<button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
<div use:melt={$content}>Obi-Wan says: Hello there!</div
</div>Melt UI uses component builders to manage state and accessibility. You can use the melt action to apply builder elements to Svelte elements. A builder typically returns elements (stores that return attributes/properties for elements) and states (stores representing the component's state).
<script>
import { createCollapsible, melt } from '@melt-ui/svelte'
const {
elements: { root, content, trigger },
states: { open }
} = createCollapsible()
</script>
<div use:melt={$root}>
<button use:melt={$trigger}>{$open ? 'Close' : 'Open'}</button>
<div use:melt={$content}>Obi-Wan says: Hello there!</div
</div>By default, context menus do not block interaction with the rest of the page. To implement modal behavior—where an overlay is rendered behind the menu to prevent interaction with the rest of the page while the menu is open—include the overlay element from the createContextMenu builder.
<script lang="ts">
import { createContextMenu, melt } from '@melt-ui/svelte'
const {
elements: { trigger, menu, item, separator, arrow, overlay }
} = createContextMenu()
</script>
<div use:melt={$trigger}>Right click to open</div>
<div use:melt={$overlay} />
<div use:melt={$menu}>
<div use:melt={$arrow} />
<div use:melt={$item}>Menu Item</div>
</div>