Quickstart - Flowbite Qwik

Learn how to get started with the free and open-source Flowbite Qwik UI component library based on the utility classes from Tailwind CSS

Automatic Installation

You can install Flowbite Qwik in your project by running the following command in your project directory:

bash

npx flowbite-qwik-cli@latest init

Or install it manually

Setup Tailwind CSS

Install Tailwind CSS by following the official installation guide.

Install Flowbite Qwik

Install Flowbite Qwik by running the following command in your project directory:

bash

npm install flowbite-qwik flowbite-qwik-icons

Add the Flowbite Qwik flowbite configuration in your tailwind.config.js

javascript


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],
}

Set up the Flowbite Provider

To use it, wrap the root component with the FlowbiteProvider, and specify the wanted toast position and theme.

Actual available colors theme are : blue, green, red, pink and purple

Available toast positions are : top-right, top-left, bottom-right, bottom-left

If you use dark theme, also add FlowbiteProviderHeader into your head element

tsx


<QwikCityProvider>
<head>
  <RouterHead />
  // Add the FlowbiteProviderHeader to the head
  <FlowbiteProviderHeader />
</head>
<body>
  // Add the FlowbiteProvider to the body
  <FlowbiteProvider toastPosition={toastPosition.value} theme="blue">
    <RouterOutlet />
  </FlowbiteProvider>
</body>
</QwikCityProvider>

Toggle Dark mode

To use dark mode, we provide a composable useDark that you can use to toggle the dark mode.

Here is an example of Dark mode Toggle

tsx


const { isDark, setDarkModeValue } = useDarkMode()

<Button
  square
  color="light"
  title="Toggle dark mode"
  onClick$={() => {
    setDarkModeValue(isDark.value ? 'light' : 'dark')
  }}
>
  {isDark.value ? <IconSunOutline class="h-4 w-4" /> : <IconMoonOutline class="h-4 w-4" />}
</Button>

Add style to setup your dark mode

css


.dark {
  color-scheme: dark;
  background: #111827;
}
.light {
  color-scheme: light;
  background: #fff;
}

Use dark mode in your tailwind classes

To use dark mode in your tailwind classes, you can use the dark: prefix. Here is an example of how to use dark mode in your classes.
Read more about Tailwind dark mode

html


<div class="bg-white text-gray-800 dark:bg-gray-800 dark:text-white">
  Dark mode content
</div>