# melt

> The next generation of Melt UI. Built for Svelte 5.

Latest version **0.44.0** (published 2026-01-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install melt
pnpm add melt
yarn add melt
bun add melt
```

## Health

**Score 60/100 (C)** — status: stable.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

## Facts

| | |
|---|---|
| Version | 0.44.0 |
| Published | 2026-01-04 |
| First published | 2013-01-31 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 5 |
| Unpacked size | 378.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 330 |
| Author | Thomas G. Lopes |
| Maintainers | tglide_personal |
| Keywords | svelte, UI, melt, headless, component, library |

## Links

- npm: https://www.npmjs.com/package/melt
- Repository: https://github.com/melt-ui/next-gen
- Homepage: https://next.melt-ui.com/
- Issues: https://github.com/melt-ui/next-gen/issues
- npm.io page: https://npm.io/package/melt

## Dependencies (5)

- [runed](https://npm.io/package/runed.md) ^0.23.3
- [dequal](https://npm.io/package/dequal.md) ^2.0.3
- [jest-axe](https://npm.io/package/jest-axe.md) ^9.0.0
- [focus-trap](https://npm.io/package/focus-trap.md) ^7.6.5
- [@floating-ui/dom](https://npm.io/package/@floating-ui/dom.md) ^1.6.13

## Alternatives

- [@progress/kendo-ooxml](https://npm.io/package/@progress/kendo-ooxml.md) — 152.1K weekly downloads
- [@progress/kendo-react-ripple](https://npm.io/package/@progress/kendo-react-ripple.md) — 8.0K weekly downloads
- [@progress/kendo-react-orgchart](https://npm.io/package/@progress/kendo-react-orgchart.md) — 4.3K weekly downloads
- [@praxisui/dynamic-fields](https://npm.io/package/@praxisui/dynamic-fields.md) — 2.4K weekly downloads
- [@mesalvo/react-ui](https://npm.io/package/@mesalvo/react-ui.md) — 1.7K weekly downloads

## Recent versions

- 0.44.0 (latest) — 2026-01-04
- 0.43.0 — 2026-01-02
- 0.42.0 — 2025-11-18
- 0.41.0 — 2025-10-03
- 0.40.2 — 2025-09-09
- 0.40.1 — 2025-09-09
- 0.40.0 — 2025-09-09
- 0.39.0 — 2025-08-13
- 0.38.1 — 2025-08-13
- 0.38.0 — 2025-07-06
- 0.37.0 — 2025-07-02
- 0.36.0 — 2025-06-25
- 0.35.3 — 2025-06-24
- 0.35.2 — 2025-06-22
- 0.35.1 — 2025-06-17
- … 70 more at https://npm.io/package/melt/versions

## README

![](static/banner.png)

[Melt](https://next.melt-ui.com/) for Svelte 🧡: The best headless component library for Svelte. Now with Runes.

[![](https://img.shields.io/npm/v/melt?style=flat)](https://www.npmjs.com/package/melt)
![npm](https://img.shields.io/npm/dw/melt?style=flat&color=orange)

[![](https://dcbadge.vercel.app/api/server/2QDjZkYunf?style=flat)](https://melt-ui.com/discord)

## 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
- A clean API focused on simplicity and flexibility
- Typescript and [SvelteKit](https://kit.svelte.dev/) support out-of-the-box
- Strict adherence to [WAI-ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/)
- A high emphasis on accessibility, extensibility, quality and consistency

## Basic Usage

```sh
npm i melt
```

Melt UI provides two ways to use components.

### Using Builders

Builders can be called from a Svelte component, or `svelte.js|ts` files.
Uses getters and setters for reactive properties.

```html
<script lang="ts">
	import { Toggle } from "melt/builders";

	let value = $state(false);
	const toggle = new Toggle({
		value: () => value,
		onValueChange: (v) => (value = v),
	});
</script>

<button {...toggle.trigger}>{toggle.value ? "On" : "Off"}</button>
```

### Using Components

The component pattern provides a more traditional Svelte experience. It provides no elements
or styling, and instead provides you with a instance from the builder. The difference lies in being
able to use the `bind:` directive.

```html
<script lang="ts">
	import { Toggle } from "melt/components";

	let value = $state(false);
</script>

<Toggle bind:value>
	{#snippet children(toggle)}
	<button {...toggle.trigger}>{toggle.value ? "On" : "Off"}</button>
	{/snippet}
</Toggle>
```

### Discord

Got any questions? Want to talk to the maintainers?

Our [Discord community](https://melt-ui.com/discord) is a great place to get in touch with us, and
we'd love to have you there.

<a href="https://melt-ui.com/discord" alt="Melt UI Discord community">
<picture>
  <source media="(prefers-color-scheme: dark)" srcset="https://invidget.switchblade.xyz/2QDjZkYunf">
  <img alt="Melt UI Discord community" src="https://invidget.switchblade.xyz/2QDjZkYunf?theme=light">
</picture>
</a>

---
_Source: https://npm.io/package/melt · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._