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.
Documentation for flowbite-qwik is not yet finished.
If you want to learn more about Flowbite, visit Flowbite docs.
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.
Flowbite-qwik can be automatically installed using its CLI, simply use this command :
npx flowbite-qwik-cli@latest init
Click here for more details.
Make sure that you have Node.js and Tailwind CSS installed.
- Install
flowbiteas a dependency usingnpmby running the following command:
yarn add -D flowbite flowbite-qwik
pnpm add -D flowbite flowbite-qwik
npm i --save-dev flowbite flowbite-qwik- Require
flowbiteas a plugin inside thetailwind.config.jsfile:
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-qwikproviders
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>
)
})
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
- useToasts
- useDarkMode
- useDebounce
- useMediaQuery
- useOuterClick
- useToggle
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
