JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 468
  • Score
    100M100P100Q96776F
  • License MIT

Unofficial Qwik components built for Flowbite and Tailwind CSS

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/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/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/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/dropdown-types.d.ts
  • flowbite-qwik/lib-types/components/Dropdown/index.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/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/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/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/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/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/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/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/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/composables/index.d.ts
  • flowbite-qwik/lib-types/composables/use-dark.d.ts
  • flowbite-qwik/lib-types/composables/use-debounce.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/tsconfig.tsbuildinfo
  • flowbite-qwik/lib-types/utils/getChild.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 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

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.

  1. Install flowbite as a dependency using npm by running the following command:
npm i flowbite flowbite-qwik
  1. 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}'],
  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

  • Accordion
  • Alert
  • Avatar
  • Badge
  • Breadcrumb
  • Button
  • Checkbox
  • Drawer
  • Dropdown
  • Footer
  • Input
  • Jumbotron
  • Modal
  • Navbar
  • Radio
  • Rating
  • Select
  • Sidebar
  • Spinner
  • Tabs
  • Toast
  • Toggle

Composables / hooks

  • useToasts
  • useDark
  • useDebounce
  • useMediaQuery
  • useOuterClick
  • useToggle

The Flowbite name and logos are trademarks of Crafty Dwarf Inc.

📝 Read about the licensing terms