amanraj / flowbite-svelte-blocks

Flowbite-Svelte-Blocks

Demo

Flowbite-Svelte-Blocks

Blocks

• 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

Getting started

Use this library on top of Flowbite-Svelte. Flowbite-Svelte is an official Flowbite component library for Svelte.

Installing from scratch

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

Using a starter

Flowbite-Svelte-Starter Demo

This starter contains:

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

Installation

npx degit shinokada/flowbite-svelte-starter my-demo
cd my-demo
pnpm i // or npm i
pnpm run dev // or npm run dev

Other examples/themes

Svelte-Sidebar-Example

If you want to see a svelte-sidebar demo:

git checkout svelte-sidebar-example

Jaco example

git checkout jaco

Plain

git checkout plain