flowbite-qwik v0.38.3
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.
Table of Contents
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 usingnpm
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 thetailwind.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>
)
})
Components
Composables / hooks
- useToasts
- useDarkMode
- useDebounce
- useMediaQuery
- useOuterClick
- useToggle
Copyright and license
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
5 months ago
6 months ago
7 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
11 months ago
10 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago