Docs
Svelte 5 Migration

Svelte 5 Migration

How to migrate to Svelte 5 from Svelte 4.

Prerequisites

  1. Ensure you have read up on the changes from Svelte 4 to Svelte 5. Svelte provides a comprehensive guide for this on their website.
  2. Commit any pending changes to your repository.
  3. Determine which of your components have custom behavior/styles so that you can reimplement those after updating.

Migrate Configs

The tailwind.config, components.json, and utils files have all changed for Svelte 5.

Automatic

Note: This works best for projects that have not changed the contents of tailwind.config, utils, and the global css file.

	npx shadcn-svelte@next init

Manual

Update components.json

Add the registry to the root object, and add hooks and ui keys under aliases.

	{
  "$schema": "https://next.shadcn-svelte.com/schema.json",
  "style": "default",
  "tailwind": {
    "config": "tailwind.config.js",
    "css": "src/app.pcss",
    "baseColor": "zinc"
  },
  "aliases": {
    "components": "$lib/components",
    "utils": "$lib/utils",
    "ui": "$lib/components/ui",
    "hooks": "$lib/hooks"
  },
  "typescript": true,
  "registry": "https://next.shadcn-svelte.com/registry"
}

Update tailwind.config

Add tailwindcss-animate.

	npm i tailwindcss-animate

Add tailwindcss-animate plugin, sidebar colors, and animations config.

	import type { Config } from 'tailwindcss';
import tailwindcssAnimate from 'tailwindcss-animate';
 
const config: Config = {
	darkMode: ['class'],
	content: ['./src/**/*.{html,js,svelte,ts}'],
	safelist: ['dark'],
	theme: {
		container: {
			// unchanged ...
		},
		extend: {
			colors: {
				// unchanged ...
				sidebar: {
					DEFAULT: "hsl(var(--sidebar-background))",
					foreground: "hsl(var(--sidebar-foreground))",
					primary: "hsl(var(--sidebar-primary))",
					"primary-foreground": "hsl(var(--sidebar-primary-foreground))",
					accent: "hsl(var(--sidebar-accent))",
					"accent-foreground": "hsl(var(--sidebar-accent-foreground))",
					border: "hsl(var(--sidebar-border))",
					ring: "hsl(var(--sidebar-ring))",
        		},
			},
			borderRadius: {
				// unchanged ...
			},
			fontFamily: {
                // unchanged ...
			},
			keyframes: {
				'accordion-down': {
					from: { height: '0' },
					to: { height: 'var(--bits-accordion-content-height)' }
				},
				'accordion-up': {
					from: { height: 'var(--bits-accordion-content-height)' },
					to: { height: '0' }
				},
				'caret-blink': {
					'0%,70%,100%': { opacity: '1' },
					'20%,50%': { opacity: '0' }
				}
			},
			animation: {
				'accordion-down': 'accordion-down 0.2s ease-out',
				'accordion-up': 'accordion-up 0.2s ease-out',
				'caret-blink': 'caret-blink 1.25s ease-out infinite'
			}
		}
	},
	plugins: [tailwindcssAnimate]
};
 
export default config;

Update utils

Note: You may not want to do this if you aren't going to upgrade all your components, as some components may still rely on the now removed flyAndScale function.

The only function exported from utils now is cn.

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

Upgrade Components

Pick and choose which components to upgrade with the update command.

	npx shadcn-svelte@next update

Upgrade bits-ui

The update command doesn't upgrade bits-ui so you will need to do that yourself.

	npm i bits-ui@next

Remove unused dependencies

In Svelte 5 we have changed some dependencies.

Remove cmdk-sv

cmdk-sv has been merged into bits-ui and is no longer necessary. Update any imports from cmdk-sv to bits-ui.

	npm uninstall cmdk-sv

Remove svelte-headless-table

svelte-headless-table has been removed in favor of @tanstack/table-core.

	npm uninstall svelte-headless-table
Changelog About