Installation

Install Melt UI, a headless UI library for Svelte.

Automatic Installation

Melt UI provides a CLI to help you get started quickly. To use it, run the following command in your terminal.

    npx @melt-ui/cli@latest init
	
    npx @melt-ui/cli@latest init

It will automatically add @melt-ui/svelte to your dependencies. You may optionally choose to install our preprocessor as well.

Manual Installation

Install Melt UI with your package manager of choice.

    npm install -D @melt-ui/svelte
	
    npm install -D @melt-ui/svelte
P.S. These tabs were built using Melt! Try using them with the arrow keys.

Preprocessor Installation

Melt UI also provides a custom preprocessor that aims to enhance the DX of Melt UI. You can read more about it here .

Install our preprocessor, @melt-ui/pp , along with svelte-sequential-preprocessor .

    npm install -D @melt-ui/pp svelte-sequential-preprocessor
	
    npm install -D @melt-ui/pp svelte-sequential-preprocessor

Next, import both packages and add them to your preprocess array in svelte.config.js.

    // svelte.config.js
 
import { preprocessMeltUI } from '@melt-ui/pp'
import sequence from 'svelte-sequential-preprocessor'
 
const config = {
  // ... other svelte config options
  preprocess: sequence([
    // ... other preprocessors
    preprocessMeltUI() // add to the end!
  ])
}
 
export default config
	
    // svelte.config.js
 
import { preprocessMeltUI } from '@melt-ui/pp'
import sequence from 'svelte-sequential-preprocessor'
 
const config = {
  // ... other svelte config options
  preprocess: sequence([
    // ... other preprocessors
    preprocessMeltUI() // add to the end!
  ])
}
 
export default config