- 404
- 500
- Account recovery
- Banner
- Blog
- Contact
- Content
- Cookie
- CTA
- Customer logos
- FAQ
- Feature
- Footer
- Header
- Hero
- Login
- Maintenance
- Newsletter
- Popup
- Pricing
- Register
- Reset password
- Social-proof
- Team
- Testimoanial
Use this library on top of Flowbite-Svelte. Flowbite-Svelte is an official Flowbite component library for Svelte.
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;
Install Flowbite-Svelte-Blocks
npm i -D flowbite-svelte-blocks
This starter contains:
- Svelte
- SvelteKit
- Tailwind CSS
- Flowbite
- Flowbite-Svelte
- Flowbite-Svelte-Blocks
- ESlint
- Typescript
- Playwright
- Prettier
- Svelte-heros(Heroicons)
- Darkmode activated
npx degit shinokada/flowbite-svelte-starter my-demo
cd my-demo
pnpm i // or npm i
pnpm run dev // or npm run dev
If you want to see a svelte-sidebar demo:
git checkout svelte-sidebar-example
git checkout jaco
git checkout plain