Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/qwikerx/flowbite-qwik
Official Qwik components built for Flowbite and Tailwind CSS
https://github.com/qwikerx/flowbite-qwik
component-library components components-qwik flowbite qwik qwik-city qwik-framework qwikjs tailwindcss typescript ui
Last synced: about 15 hours ago
JSON representation
Official Qwik components built for Flowbite and Tailwind CSS
- Host: GitHub
- URL: https://github.com/qwikerx/flowbite-qwik
- Owner: qwikerx
- License: mit
- Created: 2024-05-16T16:40:44.000Z (9 months ago)
- Default Branch: main
- Last Pushed: 2025-01-12T16:02:42.000Z (16 days ago)
- Last Synced: 2025-01-17T15:53:36.876Z (11 days ago)
- Topics: component-library, components, components-qwik, flowbite, qwik, qwik-city, qwik-framework, qwikjs, tailwindcss, typescript, ui
- Language: TypeScript
- Homepage: https://flowbite-qwik.com
- Size: 6.19 MB
- Stars: 47
- Watchers: 4
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
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](https://flowbite-qwik.com)
## Table of Contents
- [Documentation](#documentation)
- [Getting started](#getting-started)
- [Require via `npm`](#require-via--npm-)
- [Components](#components)
- [Copyright and license](#copyright-and-license)
## Documentation
Documentation for `flowbite-qwik` is not yet finished.
[//]: # 'If you want to browse the components, visit [flowbite.com](https://flowbite.com/).'
If you want to learn more about Flowbite, visit [Flowbite docs](https://flowbite.com/docs/getting-started/introduction/).
## 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](https://github.com/qwikerx/flowbite-qwik/blob/main/packages/cli/README.md) for more details.
### 🐓 Manual way via `npm`
Make sure that you have Node.js and Tailwind CSS installed.
1. Install `flowbite` as a dependency using `npm` by running the following command:
```bash
yarn add -D flowbite flowbite-qwik
pnpm add -D flowbite flowbite-qwik
npm i --save-dev flowbite flowbite-qwik
```
2. Require `flowbite` as a plugin inside the `tailwind.config.js` file:
```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],
}
```
3. 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.
```tsx
import { FlowbiteProvider } from 'flowbite-qwik'
export default component$(() => {
return (
// Add this line to detect user's system preference
// Add the FlowbiteProvider component to wrap your app
)
})
```
## Components
## Composables / hooks
- useToasts
- useDarkMode
- useDebounce
- useMediaQuery
- useOuterClick
- useToggle
[//]: # '## Community'
[//]: #
[//]: # 'If you need help or just want to discuss about the library join the community on Github:'
[//]: #
[//]: # '⌨️ [Discuss about Flowbite on GitHub](https://github.com/themesberg/flowbite/discussions)'
[//]: #
[//]: # 'For casual chatting with others using the library:'
[//]: #
[//]: # '💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)'
[//]: #
[//]: # '## Contributing'
[//]: #
[//]: # 'Thank you for your interest in helping! Feel free to get started.'
[//]: #
[//]: # '## Figma'
[//]: #
[//]: # 'If you need the Figma files for the components you can check out our website for more information:'
[//]: #
[//]: # '🎨 [Get access to the Figma design files](https://flowbite.com/figma/)'
## Copyright and license
The Flowbite name and logos are trademarks of Crafty Dwarf Inc.
📝 [Read about the licensing terms](https://flowbite.com/getting-started/license/)