DOCSEARCHbyAlgolia
Submit Docs

Flowbite Qwik

website·Indexed 32 days ago

https://flowbite-qwik.com

An open-source UI component library for Qwik and Tailwind CSS. It provides a collection of pre-built components including navbars, buttons, dropdowns, carousels, forms, and data tables, along with guides for dark mode configuration and quickstart installation.

Tokens
13.3K
Snippets
78
Records
92
Agent score
61%

What's inside Flowbite Qwik

  1. Overview of Flowbite Qwik UI Component Library

    Flowbite Qwik is a free and open-source UI component library built with native Qwik components and interactivity handling. It is based on core Flowbite components and utilizes Tailwind CSS utility classes to provide interactive elements such as navbars, dropdowns, modals, and sidebars.

  2. Overview of Flowbite Qwik

    Flowbite Qwik is a free, open-source UI component library (MIT License) for Qwik applications. It provides over 41 accessible UI components and interactive elements built using Qwik, Tailwind CSS, and the Flowbite design system. It is compatible with QwikJS 1.5 and handles all interactivity natively via Qwik.

  3. Implement a sticky banner with Flowbite Qwik

    The Banner component is used to display marketing messages, informational alerts, or Call-to-Action (CTA) buttons at the top or bottom of a website. It supports sticky positioning, meaning it remains fixed as the user scrolls. To use the banner, import the Banner component from the flowbite-qwik library.
    import { Banner } from "flowbite-qwik"

  4. Install and import the Flowbite Qwik Clipboard component

    The Clipboard component from flowbite-qwik allows users to copy text, code, or data to the clipboard via a trigger element (like a button). It can be used in conjunction with input fields, textareas, or code blocks.
    import { Clipboard } from "flowbite-qwik"

  5. Import and use the Badge component in flowbite-qwik

    The Badge component is used to display text, labels, or counters within small box or circle elements. It can be integrated into paragraphs, buttons, dropdowns, and menu items. To use the component, import it from the flowbite-qwik library.
    import { Badge } from "flowbite-qwik"

  6. Implement basic hyperlinks using the Flowbite Qwik Link component

    The Link component from flowbite-qwik is used to create hyperlinks to other pages or external websites. It can be applied to inline text, buttons, cards, or within paragraphs.
    import { component$ } from '@builder.io/qwik'
import { Link } from 'flowbite-qwik'

export default component$(() => {
  return (
    <div class="text-center">
      <Link href="#">Read more</Link>
    </div>
  )
})

  8. Install Flowbite Qwik manually

    To manually install Flowbite Qwik, first ensure Tailwind CSS is installed. Then, install the necessary Flowbite packages and update your root CSS file (e.g., global.css) with the required plugins, sources, and theme variables.
    npm install flowbite flowbite-qwik flowbite-qwik-icons
    @plugin 'flowbite/plugin';
@source "../node_modules/flowbite-qwik";

@custom-variant dark (&:where(.dark, .dark *));
@theme {
  --color-bgContrast: #fff;
}
@layer theme {
  .dark {
    --color-bgContrast: #111827;
  }
}

@theme {
  --animate-from-left: slideFromLeft 0.2s 1;
  --animate-from-right: slideFromRight 0.2s 1;
  --min-width-screen-lg: 1024px;
  --container-8xl: 90rem;

  @keyframes slideFromLeft {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(0); }
  }
  @keyframes slideFromRight {
    0% { transform: translateX(100%); }
    100% { transform: translateX(0); }
  }

  /* Color palettes for green, pink, purple, gray, and blue */
  --color-green-50: #ecfdf5;
  --color-green-100: #d1fae5;
  --color-green-200: #a7f3d0;
  --color-green-300: #6ee7b7;
  --color-green-400: #34d399;
  --color-green-500: #10b981;
  --color-green-600: #059669;
  --color-green-700: #047857;
  --color-green-800: #065f46;
  --color-green-900: #064e3b;
  --color-green-950: oklch(.266 .065 152.934);

  --color-pink-50: #fdf2f8;
  --color-pink-100: #fce7f3;
  --color-pink-200: #fbcfe8;
  --color-pink-300: #f9a8d4;
  --color-pink-400: #f472b6;
  --color-pink-500: #ec4899;
  --color-pink-600: #db2777;
  --color-pink-700: #be185d;
  --color-pink-800: #9d174d;
  --color-pink-900: #831843;

  --color-purple-50: #f5f3ff;
  --color-purple-100: #ede9fe;
  --color-purple-200: #ddd6fe;
  --color-purple-300: #c4b5fd;
  --color-purple-400: #a78bfa;
  --color-purple-500: #8b5cf6;
  --color-purple-600: #7c3aed;
  --color-purple-700: #6d28d9;
  --color-purple-800: #5b21b6;
  --color-purple-900: #4c1d95;
  --color-purple-950: oklch(.291 .149 302.717);

  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #111827;
  --color-gray-950: oklch(.13 .028 261.692);

  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: oklch(.282 .091 267.935);
}

  9. Use the Hr component to separate content in Qwik

    The Hr component from flowbite-qwik creates a horizontal line used to separate content such as paragraphs, blockquotes, and other elements. It provides spacing between elements and supports various styles and layouts.
    import { Hr } from "flowbite-qwik"

  10. Implement a Drawer component using flowbite-qwik

    The Drawer component (also known as an off-canvas sidebar) is used to display a fixed element relative to the document page from any side. It is commonly used for navigation menus, contact forms, or informational panels. The component supports configurable placements, body scrolling toggles, backdrop visibility, and 'swipeable edge' functionality to keep a small portion of the drawer visible when closed.
    import { Drawer } from "flowbite-qwik"

  11. Import the Footer component from flowbite-qwik

    To use footer components in a Qwik project with Tailwind CSS, import the Footer component from the flowbite-qwik library.
    import { Footer } from "flowbite-qwik"

  12. Import and use the Button component from flowbite-qwik

    The Button component from flowbite-qwik allows users to trigger actions such as form submissions, navigation, or file downloads. It is built using Qwik and Tailwind CSS. To use the component, import it from the flowbite-qwik package.
    import { Button } from "flowbite-qwik"