Flowbite-qwik NPM

`flowbite-qwik` is an open source collection of UI components, built in Qwik, with utility classes from Tailwind CSS that you can use as a starting point for user interfaces and websites.

Online documentation

Documentation

Documentation for flowbite-qwik is not yet finished.

If you want to learn more about Flowbite, visit Flowbite docs.

Getting started

To use flowbite-qwik, you just need to setup flowbite normally and install flowbite-qwik from npm.

flowbite can be included as a plugin into an existing Tailwind CSS project.

😎 Automatic way using CLI

Flowbite-qwik can be automatically installed using its CLI, simply use this command :

npx flowbite-qwik-cli@latest init

Click here for more details.

🐓 Manual way via `npm`

Make sure that you have Node.js and Tailwind CSS installed.

Install flowbite as a dependency using npm by running the following command:

yarn add -D flowbite flowbite-qwik
pnpm add -D flowbite flowbite-qwik
npm i --save-dev flowbite flowbite-qwik

Require flowbite as a plugin inside the tailwind.config.js file:

import flowbitePlugin from 'flowbite/plugin'

export default {
  theme: {
    extend: {
      animation: {
        'from-left': 'slideFromLeft 0.2s 1',
        'from-right': 'slideFromRight 0.2s 1',
      },
      keyframes: {
        slideFromLeft: {
          '0%': { transform: 'translateX(-100%)' },
          '100%': { transform: 'translateX(0)' },
        },
        slideFromRight: {
          '0%': { transform: 'translateX(100%)' },
          '100%': { transform: 'translateX(0)' },
        },
      },
    },
  },
  content: ['node_modules/flowbite-qwik/**/*.{cjs,mjs}', './src/**/*.{html,js,jsx,ts,tsx,mdx}'],
  plugins: [flowbitePlugin],
}

Setup flowbite-qwik providers

In your src/root.tsx file, import the FlowbiteProvider and wrap your app with it and define the theme and toast position.

Default values are theme="blue" and toastPosition="top-right".

If you want to use the dark mode, you will also need to add the FlowbiteProviderHeader component in the head of your app.

import { FlowbiteProvider } from 'flowbite-qwik'

export default component$(() => {
  return (
    <QwikCityProvider>
      <head>
        <meta charSet="utf-8" />
        <RouterHead />
        // Add this line to detect user's system preference
        <FlowbiteProviderHeader />
      </head>
      <body lang="fr">
        // Add the FlowbiteProvider component to wrap your app
        <FlowbiteProvider toastPosition="top-right" theme="blue">
          <RouterOutlet />
        </FlowbiteProvider>
      </body>
    </QwikCityProvider>
  )
})