Getting Started

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

Installing from scrach

Install SvelteKit:

npm init svelte@next sveltekit-demo 
cd sveltekit-demo
npm install 

Install Tailwind CSS:

npx svelte-add@latest tailwindcss
npm i

Run it:

npm run dev

Install flowbite and flowbite-svelte:

npm i -D flowbite flowbite-svelte

Update tailwind.config.cjs:

const config = {
  content: [
    "./src/**/*.{html,js,svelte,ts}",
    "./node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}",
  ],

  theme: {
    extend: {},
  },

  plugins: [
    require('flowbite/plugin')
  ],
  darkMode: 'class',
};

module.exports = config;

Now you are ready to go!

Installing Flowbite-Svelte-Starter

Flowbite-Svelte-Starter comes with the followings:

Svelte SvelteKit Tailwind CSS Flowbite Flowbite-Svelte ESlint Typescript Playwright Prettier Svelte-heros(Heroicons) Darkmode activated

You need to run git clone the repo

git clone git@github.com:shinokada/flowbite-svelte-starter.git my-demo
cd my-demo
pnpm i
pnpm run dev

Related topics

References