Introducing Magic UI Pro - 50+ blocks and templates to build beautiful landing pages in minutes.


Docs
Svelte

Svelte

Install and configure Magic UI for Svelte

Information

This project and all components are written in TypeScript. We recommend using TypeScript for your project as well.

Prerequisites

These are the main dependencies you will need to get started.

npx @svelte-add/tailwindcss@latest # add tailwindcss
npm install tailwind-variants clsx tailwind-merge svelte-inview

Copy and paste the following code into your project.

// lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

Install components

That's it! Now you can go to any component page and follow the instructions there

You only need to copy + paste the components you need! No bloat or third-party dependencies.