Giter Site home page Giter Site logo

amanraj / flowbite-svelte-blocks Goto Github PK

View Code? Open in Web Editor NEW

This project forked from themesberg/flowbite-svelte-blocks

0.0 0.0 0.0 793 KB

Home Page: https://flowbite-svelte-blocks.vercel.app/

License: MIT License

JavaScript 0.25% TypeScript 1.40% CSS 0.01% HTML 0.21% Svelte 98.13%

flowbite-svelte-blocks's Introduction

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

flowbite-svelte-blocks's People

Contributors

shinokada avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.