Package Exports

flowbite-svelte-blocks
flowbite-svelte-blocks/Section.svelte
flowbite-svelte-blocks/acount-recovery/ForgotPassword.svelte
flowbite-svelte-blocks/acount-recovery/ForgotPasswordHeader.svelte
flowbite-svelte-blocks/banner/Banner.svelte
flowbite-svelte-blocks/blog-template/BlogTemplate.svelte
flowbite-svelte-blocks/blog/ArticleAuthor.svelte
flowbite-svelte-blocks/blog/ArticleBody.svelte
flowbite-svelte-blocks/blog/ArticleHead.svelte
flowbite-svelte-blocks/blog/ArticleWrapper.svelte
flowbite-svelte-blocks/blog/BlogBodyWrapper.svelte
flowbite-svelte-blocks/blog/BlogHead.svelte
flowbite-svelte-blocks/comment/Comment.svelte
flowbite-svelte-blocks/comment/CommentItem.svelte
flowbite-svelte-blocks/contact/Contact.svelte
flowbite-svelte-blocks/content/Content.svelte
flowbite-svelte-blocks/content/ContentWithImage.svelte
flowbite-svelte-blocks/cta/Cta.svelte
flowbite-svelte-blocks/faq/Faq.svelte
flowbite-svelte-blocks/faq/FaqItem.svelte
flowbite-svelte-blocks/feature/FeatureDefault.svelte
flowbite-svelte-blocks/feature/FeatureItem.svelte
flowbite-svelte-blocks/header/Navigation.svelte
flowbite-svelte-blocks/hero/HeroBody.svelte
flowbite-svelte-blocks/hero/HeroHeader.svelte
flowbite-svelte-blocks/hero/News.svelte
flowbite-svelte-blocks/maintenance/Maintenance.svelte
flowbite-svelte-blocks/maintenance/ToolsIcon.svelte
flowbite-svelte-blocks/newsletter/Newsletter.svelte
flowbite-svelte-blocks/page404/Page404.svelte
flowbite-svelte-blocks/page500/Page500.svelte
flowbite-svelte-blocks/popup/Popup.svelte
flowbite-svelte-blocks/portfolio/Portfolio.svelte
flowbite-svelte-blocks/portfolio/PortfolioItem.svelte
flowbite-svelte-blocks/pricing/PricingBodyHead.svelte
flowbite-svelte-blocks/pricing/PricingCard.svelte
flowbite-svelte-blocks/pricing/PricingHead.svelte
flowbite-svelte-blocks/pricing/PricingItem.svelte
flowbite-svelte-blocks/pricing/PricingItemWrapper.svelte
flowbite-svelte-blocks/register/Register.svelte
flowbite-svelte-blocks/schedule/Schedule.svelte
flowbite-svelte-blocks/schedule/ScheduleItem.svelte
flowbite-svelte-blocks/sidebar/SidebarBottomNav.svelte
flowbite-svelte-blocks/sidebar/SidebarBottomNavItem.svelte
flowbite-svelte-blocks/social/Social.svelte
flowbite-svelte-blocks/tableheader/TableHeader.svelte
flowbite-svelte-blocks/team/TeamBody.svelte
flowbite-svelte-blocks/team/TeamHeader.svelte
flowbite-svelte-blocks/team/TeamItem.svelte
flowbite-svelte-blocks/team/TeamWrapper.svelte
flowbite-svelte-blocks/testimonial/Testimonial.svelte
flowbite-svelte-blocks/testimonial/TestimonialCard.svelte
flowbite-svelte-blocks/testimonial/TestimonialCardItem.svelte
flowbite-svelte-blocks/utils/Facebook.svelte
flowbite-svelte-blocks/utils/Github.svelte
flowbite-svelte-blocks/utils/Quotes.svelte
flowbite-svelte-blocks/utils/Twitter.svelte

Readme

Flowbite Svelte Blocks

⚠️ Flowbite-Svelte-Blocks is currently in early development and APIs and packages are likely to change quite often.

Demo

Installation

This library is built on top of Flowbite-Svelte and Flowbite-Svelte-Icons. Flowbite-Svelte is an official Flowbite component library for Svelte.

Install SvelteKit:

npm create svelte@latest your-project-name
cd your-project-name
pnpm install

Install Tailwind CSS:

npx svelte-add@latest tailwindcss
pnpm i

Start a server:

pnpm run dev

Install flowbite-svelte-blocks:

pnpm i flowbite-svelte flowbite-svelte-blocks flowbite-svelte-icons

Update tailwind.config.cjs:

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

  theme: {
    extend: {}
  },

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

module.exports = config;

Update tailwind.config.cjs

Current theme config is the following. You can update primary color and other config.

theme: {
    extend: {
      colors: {
        primary: {"50":"#fff1f2","100":"#ffe4e6","200":"#fecdd3","300":"#fda4af","400":"#fb7185","500":"#f43f5e","600":"#e11d48","700":"#be123c","800":"#9f1239","900":"#881337"}
      }
    },
    fontFamily: {
      'body': [
      'Inter',
      'ui-sans-serif',
      'system-ui',
      '-apple-system',
      'system-ui',
      'Segoe UI',
      'Roboto',
      'Helvetica Neue',
      'Arial',
      'Noto Sans',
      'sans-serif',
      'Apple Color Emoji',
      'Segoe UI Emoji',
      'Segoe UI Symbol',
      'Noto Color Emoji'
  ],
    'sans': [
    'Inter',
    'ui-sans-serif',
    'system-ui',
    '-apple-system',
    'system-ui',
    'Segoe UI',
    'Roboto',
    'Helvetica Neue',
    'Arial',
    'Noto Sans',
    'sans-serif',
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol',
    'Noto Color Emoji'
  ]
    }
  },