Skip to main content

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 .

    npm install -D @melt-ui/pp
	
    npm install -D @melt-ui/pp

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

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