melt-ui: A TypeScript repository from Datawrapper

Melt UI is a set of headless, accessible component builders for Svelte.

About

Melt UI is meant to be used as a base for your own styles and components. It offers:

Uncoupled builders that can be attached to any element/component
Typescript and SvelteKit support out-of-the-box
Strict adherence to WAI-ARIA guidelines
Easy to use examples and documentation
A high emphasis on accessibility, extensibility, quality and consistency

Getting started

Run our installer script to get started:

npx @melt-ui/cli@latest init

Import the builders to your code and start using them:

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

Contributing

Contributions are welcome and encouraged!

Melt UI is under active development. Currently planned features can be found in the issues tab, alongside bug reports.

We work on this project on a volunteer basis in our free time. If you notice something that hasn't been implemented yet or could be improved, do consider contributing to the project! The goal is to enhance the experience of building with Svelte and improve the ecosystem for everyone.

Check out our Contributing guide to learn more.