0.17.0 ā¢ Published 10 days ago
flowbite-qwik v0.17.0
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.
Require via npm
Make sure that you have Node.js and Tailwind CSS installed.
- Install
flowbite
as a dependency usingnpm
by running the following command:
npm i 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}'],
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
- Accordions
- Badges
- Breadcrumbs
- Buttons
- CodeBlock
- Drawer
- Dropdown
- Footer
- Inputs
- Jumbotron
- Modal
- Navbar
- Ratings
- Sidebar
- Spinner
- Tabs
- Toasts
- Toggle
composables
- useToasts
- useDark
- useMediaQuery
- useOuterClick
Copyright and license
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.