Flowbite Qwik - UI Component Library

Build websites even faster with components on top of Qwik and Tailwind CSS

`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
Getting started
- Require via npm
Components
Copyright and license

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-qwik as a dependency using npm by running the following command:

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

Update you root CSS file (global.css) adding this configuration :

@plugin 'flowbite/plugin';

@source "../node_modules/flowbite-qwik";

@theme {
  --animate-from-left: slideFromLeft 0.2s 1;
  --animate-from-right: slideFromRight 0.2s 1;

  --min-width-screen-lg: 1024px;

  --container-8xl: 90rem;

  @keyframes slideFromLeft {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(0);
    }
  }
  @keyframes slideFromRight {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(0);
    }
  }
}

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>
  )
})