Package Exports

flowbite-qwik
flowbite-qwik/lib-types/components/Accordion/Accordion.d.ts
flowbite-qwik/lib-types/components/Accordion/AccordionContent.d.ts
flowbite-qwik/lib-types/components/Accordion/AccordionHeader.d.ts
flowbite-qwik/lib-types/components/Accordion/AccordionPanel.d.ts
flowbite-qwik/lib-types/components/Accordion/accordion-types.d.ts
flowbite-qwik/lib-types/components/Accordion/composables/use-accordion-content-class.d.ts
flowbite-qwik/lib-types/components/Accordion/composables/use-accordion-header-class.d.ts
flowbite-qwik/lib-types/components/Accordion/composables/use-accordion-state.d.ts
flowbite-qwik/lib-types/components/Accordion/index.d.ts
flowbite-qwik/lib-types/components/Alert/Alert.d.ts
flowbite-qwik/lib-types/components/Alert/index.d.ts
flowbite-qwik/lib-types/components/Avatar/Avatar.d.ts
flowbite-qwik/lib-types/components/Avatar/AvatarGroup.d.ts
flowbite-qwik/lib-types/components/Avatar/AvatarGroupCounter.d.ts
flowbite-qwik/lib-types/components/Avatar/index.d.ts
flowbite-qwik/lib-types/components/Badge/Badge.d.ts
flowbite-qwik/lib-types/components/Badge/badge-types.d.ts
flowbite-qwik/lib-types/components/Badge/composables/use-badge-classes.d.ts
flowbite-qwik/lib-types/components/Badge/index.d.ts
flowbite-qwik/lib-types/components/Banner/Banner.d.ts
flowbite-qwik/lib-types/components/Banner/BannerCollapseButton.d.ts
flowbite-qwik/lib-types/components/Banner/index.d.ts
flowbite-qwik/lib-types/components/Blockquote/Blockquote.d.ts
flowbite-qwik/lib-types/components/Blockquote/index.d.ts
flowbite-qwik/lib-types/components/Breadcrumb/Breadcrumb.d.ts
flowbite-qwik/lib-types/components/Breadcrumb/BreadcrumbItem.d.ts
flowbite-qwik/lib-types/components/Breadcrumb/composables/use-breadcrumb-classes.d.ts
flowbite-qwik/lib-types/components/Breadcrumb/composables/use-breadcrumb-item-classes.d.ts
flowbite-qwik/lib-types/components/Breadcrumb/index.d.ts
flowbite-qwik/lib-types/components/Button/Button.d.ts
flowbite-qwik/lib-types/components/Button/button-types.d.ts
flowbite-qwik/lib-types/components/Button/composables/use-button-classes.d.ts
flowbite-qwik/lib-types/components/Button/composables/use-button-spinner.d.ts
flowbite-qwik/lib-types/components/Button/index.d.ts
flowbite-qwik/lib-types/components/ButtonGroup/ButtonGroup.d.ts
flowbite-qwik/lib-types/components/ButtonGroup/index.d.ts
flowbite-qwik/lib-types/components/Card/Card.d.ts
flowbite-qwik/lib-types/components/Card/index.d.ts
flowbite-qwik/lib-types/components/Carousel/Carousel.d.ts
flowbite-qwik/lib-types/components/Carousel/index.d.ts
flowbite-qwik/lib-types/components/Checkbox/Checkbox.d.ts
flowbite-qwik/lib-types/components/Checkbox/composables/use-checkbox-classes.d.ts
flowbite-qwik/lib-types/components/Checkbox/index.d.ts
flowbite-qwik/lib-types/components/Clipboard/Clipboard.d.ts
flowbite-qwik/lib-types/components/Clipboard/ClipboardWithIcon.d.ts
flowbite-qwik/lib-types/components/Clipboard/ClipboardWithIconText.d.ts
flowbite-qwik/lib-types/components/Clipboard/composables/use-copy-to-clipboard.d.ts
flowbite-qwik/lib-types/components/Clipboard/index.d.ts
flowbite-qwik/lib-types/components/DarkModeToggle/DarkModeToggle.d.ts
flowbite-qwik/lib-types/components/DarkModeToggle/index.d.ts
flowbite-qwik/lib-types/components/DatePicker/DatePicker.d.ts
flowbite-qwik/lib-types/components/DatePicker/DatePickerHelpers.d.ts
flowbite-qwik/lib-types/components/DatePicker/composables/use-date-picker-context.d.ts
flowbite-qwik/lib-types/components/DatePicker/index.d.ts
flowbite-qwik/lib-types/components/DatePicker/views/Days.d.ts
flowbite-qwik/lib-types/components/DatePicker/views/Decades.d.ts
flowbite-qwik/lib-types/components/DatePicker/views/Months.d.ts
flowbite-qwik/lib-types/components/DatePicker/views/Years.d.ts
flowbite-qwik/lib-types/components/Drawer/Drawer.d.ts
flowbite-qwik/lib-types/components/Drawer/composables/use-drawer-classes.d.ts
flowbite-qwik/lib-types/components/Drawer/drawer-types.d.ts
flowbite-qwik/lib-types/components/Drawer/index.d.ts
flowbite-qwik/lib-types/components/Dropdown/Dropdown.d.ts
flowbite-qwik/lib-types/components/Dropdown/composables/use-dropdown-classes.d.ts
flowbite-qwik/lib-types/components/Dropdown/composables/use-dropdown-context.d.ts
flowbite-qwik/lib-types/components/Dropdown/dropdown-types.d.ts
flowbite-qwik/lib-types/components/Dropdown/index.d.ts
flowbite-qwik/lib-types/components/Floating/Floating.d.ts
flowbite-qwik/lib-types/components/Floating/floating-types.d.ts
flowbite-qwik/lib-types/components/FlowbiteProvider/FlowbiteProvider.d.ts
flowbite-qwik/lib-types/components/FlowbiteProvider/FlowbiteProviderHeader.d.ts
flowbite-qwik/lib-types/components/FlowbiteProvider/index.d.ts
flowbite-qwik/lib-types/components/FlowbiteThemable/FlowbiteThemable.d.ts
flowbite-qwik/lib-types/components/FlowbiteThemable/composables/use-flowbite-themable.d.ts
flowbite-qwik/lib-types/components/FlowbiteThemable/flowbite-themable-type.d.ts
flowbite-qwik/lib-types/components/FlowbiteThemable/index.d.ts
flowbite-qwik/lib-types/components/Footer/Footer.d.ts
flowbite-qwik/lib-types/components/Footer/FooterBrand.d.ts
flowbite-qwik/lib-types/components/Footer/FooterCopyright.d.ts
flowbite-qwik/lib-types/components/Footer/FooterDivider.d.ts
flowbite-qwik/lib-types/components/Footer/FooterIcon.d.ts
flowbite-qwik/lib-types/components/Footer/FooterLink.d.ts
flowbite-qwik/lib-types/components/Footer/FooterLinkGroup.d.ts
flowbite-qwik/lib-types/components/Footer/FooterTitle.d.ts
flowbite-qwik/lib-types/components/Footer/index.d.ts
flowbite-qwik/lib-types/components/HR/Hr.d.ts
flowbite-qwik/lib-types/components/HR/HrIcon.d.ts
flowbite-qwik/lib-types/components/HR/HrSquare.d.ts
flowbite-qwik/lib-types/components/HR/HrText.d.ts
flowbite-qwik/lib-types/components/HR/HrTrimmed.d.ts
flowbite-qwik/lib-types/components/HR/index.d.ts
flowbite-qwik/lib-types/components/Heading/Heading.d.ts
flowbite-qwik/lib-types/components/Heading/index.d.ts
flowbite-qwik/lib-types/components/Input/Input.d.ts
flowbite-qwik/lib-types/components/Input/composables/use-input-classes.d.ts
flowbite-qwik/lib-types/components/Input/index.d.ts
flowbite-qwik/lib-types/components/Input/input-types.d.ts
flowbite-qwik/lib-types/components/Jumbotron/Jumbotron.d.ts
flowbite-qwik/lib-types/components/Jumbotron/JumbotronHeading.d.ts
flowbite-qwik/lib-types/components/Jumbotron/JumbotronSubText.d.ts
flowbite-qwik/lib-types/components/Jumbotron/index.d.ts
flowbite-qwik/lib-types/components/Jumbotron/types-jumbotron.d.ts
flowbite-qwik/lib-types/components/Kbd/Kbd.d.ts
flowbite-qwik/lib-types/components/Kbd/index.d.ts
flowbite-qwik/lib-types/components/Link/Link.d.ts
flowbite-qwik/lib-types/components/Link/index.d.ts
flowbite-qwik/lib-types/components/List/List.d.ts
flowbite-qwik/lib-types/components/List/ListItem.d.ts
flowbite-qwik/lib-types/components/List/index.d.ts
flowbite-qwik/lib-types/components/ListGroup/ListGroup.d.ts
flowbite-qwik/lib-types/components/ListGroup/ListGroupItem.d.ts
flowbite-qwik/lib-types/components/ListGroup/index.d.ts
flowbite-qwik/lib-types/components/Modal/Modal.d.ts
flowbite-qwik/lib-types/components/Modal/composables/use-modal-classes.d.ts
flowbite-qwik/lib-types/components/Modal/index.d.ts
flowbite-qwik/lib-types/components/Modal/modal-types.d.ts
flowbite-qwik/lib-types/components/Navbar/Navbar.d.ts
flowbite-qwik/lib-types/components/Navbar/NavbarBrand.d.ts
flowbite-qwik/lib-types/components/Navbar/NavbarBurgerButton.d.ts
flowbite-qwik/lib-types/components/Navbar/NavbarCollapse.d.ts
flowbite-qwik/lib-types/components/Navbar/NavbarLink.d.ts
flowbite-qwik/lib-types/components/Navbar/NavbarToggle.d.ts
flowbite-qwik/lib-types/components/Navbar/composables/use-navbar-context.d.ts
flowbite-qwik/lib-types/components/Navbar/index.d.ts
flowbite-qwik/lib-types/components/Pagination/Pagination.d.ts
flowbite-qwik/lib-types/components/Pagination/PaginationButton.d.ts
flowbite-qwik/lib-types/components/Pagination/composables/use-pagination-classes.d.ts
flowbite-qwik/lib-types/components/Pagination/index.d.ts
flowbite-qwik/lib-types/components/ProgressBar/ProgressBar.d.ts
flowbite-qwik/lib-types/components/ProgressBar/index.d.ts
flowbite-qwik/lib-types/components/Radio/Radio.d.ts
flowbite-qwik/lib-types/components/Radio/composables/use-radio-classes.d.ts
flowbite-qwik/lib-types/components/Radio/index.d.ts
flowbite-qwik/lib-types/components/Range/Range.d.ts
flowbite-qwik/lib-types/components/Range/index.d.ts
flowbite-qwik/lib-types/components/Rating/Rating.d.ts
flowbite-qwik/lib-types/components/Rating/composables/use-rating-classes.d.ts
flowbite-qwik/lib-types/components/Rating/index.d.ts
flowbite-qwik/lib-types/components/Rating/rating-types.d.ts
flowbite-qwik/lib-types/components/Select/Select.d.ts
flowbite-qwik/lib-types/components/Select/composables/use-select-classes.d.ts
flowbite-qwik/lib-types/components/Select/index.d.ts
flowbite-qwik/lib-types/components/Select/select-types.d.ts
flowbite-qwik/lib-types/components/Sidebar/Sidebar.d.ts
flowbite-qwik/lib-types/components/Sidebar/SidebarCollapse.d.ts
flowbite-qwik/lib-types/components/Sidebar/SidebarCta.d.ts
flowbite-qwik/lib-types/components/Sidebar/SidebarItem.d.ts
flowbite-qwik/lib-types/components/Sidebar/SidebarItemGroup.d.ts
flowbite-qwik/lib-types/components/Sidebar/SidebarLogo.d.ts
flowbite-qwik/lib-types/components/Sidebar/composables/use-sidebar-context.d.ts
flowbite-qwik/lib-types/components/Sidebar/index.d.ts
flowbite-qwik/lib-types/components/Spinner/Spinner.d.ts
flowbite-qwik/lib-types/components/Spinner/composables/use-spinner-classes.d.ts
flowbite-qwik/lib-types/components/Spinner/index.d.ts
flowbite-qwik/lib-types/components/Spinner/spinner-types.d.ts
flowbite-qwik/lib-types/components/Table/Table.d.ts
flowbite-qwik/lib-types/components/Table/TableBody.d.ts
flowbite-qwik/lib-types/components/Table/TableCell.d.ts
flowbite-qwik/lib-types/components/Table/TableHead.d.ts
flowbite-qwik/lib-types/components/Table/TableHeadCell.d.ts
flowbite-qwik/lib-types/components/Table/TableRow.d.ts
flowbite-qwik/lib-types/components/Table/composables/use-table-context.d.ts
flowbite-qwik/lib-types/components/Table/index.d.ts
flowbite-qwik/lib-types/components/Tabs/Tabs.d.ts
flowbite-qwik/lib-types/components/Tabs/composables/use-tab-classes.d.ts
flowbite-qwik/lib-types/components/Tabs/composables/use-tabs-classes.d.ts
flowbite-qwik/lib-types/components/Tabs/index.d.ts
flowbite-qwik/lib-types/components/Tabs/tabs-types.d.ts
flowbite-qwik/lib-types/components/Textarea/Textarea.d.ts
flowbite-qwik/lib-types/components/Textarea/composables/use-textarea-classes.d.ts
flowbite-qwik/lib-types/components/Textarea/index.d.ts
flowbite-qwik/lib-types/components/Timeline/Timeline.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelineBody.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelineContent.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelineItem.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelinePoint.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelineTime.d.ts
flowbite-qwik/lib-types/components/Timeline/TimelineTitle.d.ts
flowbite-qwik/lib-types/components/Timeline/composables/use-timeline-context.d.ts
flowbite-qwik/lib-types/components/Timeline/index.d.ts
flowbite-qwik/lib-types/components/ToastList/Toast.d.ts
flowbite-qwik/lib-types/components/ToastList/ToastList.d.ts
flowbite-qwik/lib-types/components/ToastList/composables/use-toast-class.d.ts
flowbite-qwik/lib-types/components/ToastList/composables/use-toast.d.ts
flowbite-qwik/lib-types/components/ToastList/index.d.ts
flowbite-qwik/lib-types/components/ToastList/toast-type.d.ts
flowbite-qwik/lib-types/components/Toggle/Toggle.d.ts
flowbite-qwik/lib-types/components/Toggle/composables/use-toggle-classes.d.ts
flowbite-qwik/lib-types/components/Toggle/index.d.ts
flowbite-qwik/lib-types/components/Tooltip/Tooltip.d.ts
flowbite-qwik/lib-types/components/Tooltip/index.d.ts
flowbite-qwik/lib-types/components/Tooltip/tooltip-types.d.ts
flowbite-qwik/lib-types/composables/index.d.ts
flowbite-qwik/lib-types/composables/use-dark-mode.d.ts
flowbite-qwik/lib-types/composables/use-debounce.d.ts
flowbite-qwik/lib-types/composables/use-floating.d.ts
flowbite-qwik/lib-types/composables/use-media-query.d.ts
flowbite-qwik/lib-types/composables/use-outer-click.d.ts
flowbite-qwik/lib-types/composables/use-toggle.d.ts
flowbite-qwik/lib-types/index.d.ts
flowbite-qwik/lib-types/scripts/do-readme-components.d.ts
flowbite-qwik/lib-types/tsconfig.tsbuildinfo
flowbite-qwik/lib-types/utils/children-inspector.d.ts
flowbite-qwik/lib-types/utils/scroll-to.d.ts
flowbite-qwik/lib-types/utils/slug.d.ts
flowbite-qwik/lib-types/utils/uuid.d.ts
flowbite-qwik/lib/flowbite.qwik.cjs
flowbite-qwik/lib/flowbite.qwik.mjs
flowbite-qwik/package.json

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

Documentation
Getting started
- Require via npm
Components
Copyright and license

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 using npm 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 the tailwind.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>
  )
})