Getting Started

You can install Flowbite-Svelte by using the Flowbite-Svelte-Start or from scratch.

Installing from scratch


You can install SvelteKit or Svelte to start your app. For SvelteKit:

npm create svelte@latest my-app
cd my-app
npm install


If you want to get started with Svelte:

npm create vite@latest myapp -- --template svelte
cd myapp
npm install

Install Tailwind CSS

npx svelte-add@latest tailwindcss
npm i

Run it:

npm run dev

Install dependencies

npm i -D flowbite flowbite-svelte classnames @popperjs/core

Update tailwind.config.cjs

const config = {
  content: [

  theme: {
    extend: {},

  plugins: [
  darkMode: 'class',

module.exports = config;

Now you are ready to go! Add the following to `src/routes/+page.svelte`.

	import { Alert } from 'flowbite-svelte';

<div class="p-8">
		<span class="font-medium">Info alert!</span> Change a few things up and try submitting again.

If you see the following image, then your setting is complete.


You can use one of starter repo for a quick start.