flowbite-svelte/README.md

Flowbite components for Svelte

# FLOWBITE-SVELTE

[![npm version](https://badgen.net/npm/v/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![npm downloads](https://badgen.net/npm/dw/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![npm downloads](https://badgen.net/npm/dt/flowbite-svelte)](https://www.npmjs.com/package/flowbite-svelte) [![license](https://badgen.net/npm/license/flowbite-svelte)](https://github.com/themesberg/flowbite-svelte/blob/main/LICENSE) [![Discord](https://img.shields.io/discord/902911619032576090?color=%237289da&label=Discord)](https://discord.com/invite/4eeurUVvTy)

**⚠️ Flowbite Svelte is currently in early development and APIs and packages are likely to change quite often.**

<p>
    <a href="https://flowbite-svelte.com" >
      <img alt="Flowbite Svelte UI components" width="350" src="https://raw.githubusercontent.com/themesberg/flowbite-svelte/main/static/images/flowbite-svelte.png">
    </a><br>
    Build websites even faster with Svelte components on top of Tailwind CSS
</p>

[Flowbite Svelte](https://flowbite-svelte.com/) is an official Flowbite UI component library for Svelte. All interactivities are handled by Svelte.

[Visualize this repo's codebase](https://mango-dune-07a8b7110.1.azurestaticapps.net/?repo=themesberg%2Fflowbite-svelte)

## Installation

- [Getting started](https://flowbite-svelte.com/docs/pages/quickstart)
- [Introduction](https://flowbite-svelte.com/docs/pages/introduction)
- [Types](https://flowbite-svelte.com/docs/pages/typescript)
- [How to contribute](https://flowbite-svelte.com/docs/pages/how-to-contribute)
- [License](https://flowbite-svelte.com/docs/pages/license)

## Documentation

For full documentation, visit [flowbite-svelte.com](https://flowbite-svelte.com/).

## Components

<table>
  <tr>
    <td width="33.3333%">Alert</td>
    <td width="33.3333%">Badge</td>
    <td width="33.3333%">Breadcrumb</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/alert">
            <img alt="Svelte Alerts" src="https://flowbite.s3.amazonaws.com/github/svelte/alerts.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/badge">
            <img alt="Svelte Badge" src="https://flowbite.s3.amazonaws.com/github/svelte/badge.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/breadcrumb">
            <img alt="Svelte Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/svelte/breadcrumbs.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Button</td>
    <td width="33.3333%">Button group</td>
    <td width="33.3333%">Card</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/buttons">
            <img alt="Svelte Buttons" src="https://flowbite.s3.amazonaws.com/github/svelte/buttons.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/button-group">
            <img alt="Svelte Button Group" src="https://flowbite.s3.amazonaws.com/github/svelte/button-group.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/card">
            <img alt="Svelte Cards" src="https://flowbite.s3.amazonaws.com/github/svelte/cards.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Dropdown</td>
    <td width="33.3333%">Forms</td>
    <td width="33.3333%">List group</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/dropdown">
            <img alt="Svelte Dropdown" src="https://flowbite.s3.amazonaws.com/github/svelte/dropdown.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/forms">
            <img alt="Svelte Forms" src="https://flowbite.s3.amazonaws.com/github/svelte/forms.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/list-group">
            <img alt="Svelte List group" src="https://flowbite.s3.amazonaws.com/github/svelte/list-group.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Typography</td>
    <td width="33.3333%">Modal</td>
    <td width="33.3333%">Tabs</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/typography">
            <img alt="Svelte Typography" src="https://flowbite.s3.amazonaws.com/github/svelte/typography.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/modal">
            <img alt="Svelte Modal" src="https://flowbite.s3.amazonaws.com/github/svelte/modal.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/tabs">
            <img alt="Svelte Tabs" src="https://flowbite.s3.amazonaws.com/github/svelte/tabs.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Navbar</td>
    <td width="33.3333%">Pagination</td>
    <td width="33.3333%">Timeline</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/navbar">
            <img alt="Svelte Navbar" src="https://flowbite.s3.amazonaws.com/github/svelte/navbar.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/pagination">
            <img alt="Svelte Pagination" src="https://flowbite.s3.amazonaws.com/github/svelte/pagination.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/timeline">
            <img alt="Svelte Timeline" src="https://flowbite.s3.amazonaws.com/github/svelte/timeline.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Progress bar</td>
    <td width="33.3333%">Table</td>
    <td width="33.3333%">Toast</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/progress">
            <img alt="Svelte Progress Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/progress.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/table">
            <img alt="Svelte Tables" src="https://flowbite.s3.amazonaws.com/github/svelte/table.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/toast">
            <img alt="Svelte Toast" src="https://flowbite.s3.amazonaws.com/github/svelte/toast.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Tooltip</td>
    <td width="33.3333%">Datepicker</td>
    <td width="33.3333%">Spinner</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/tooltip">
            <img alt="Svelte Tooltips" src="https://flowbite.s3.amazonaws.com/github/svelte/tooltips.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/datepicker">
            <img alt="Svelte Datepicker" src="https://flowbite.s3.amazonaws.com/github/svelte/datepicker.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/spinner">
            <img alt="Svelte Spinner" src="https://flowbite.s3.amazonaws.com/github/svelte/spinner.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Footer</td>
    <td width="33.3333%">Accordion</td>
    <td width="33.3333%">Sidebar</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/footer">
            <img alt="Svelte Footer" src="https://flowbite.s3.amazonaws.com/github/svelte/footer.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/accordion">
            <img alt="Svelte Accordion" src="https://flowbite.s3.amazonaws.com/github/svelte/accordion.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/sidebar">
            <img alt="Svelte Sidebar" src="https://flowbite.s3.amazonaws.com/github/svelte/sidebar.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Carousel</td>
    <td width="33.3333%">Avatar</td>
    <td width="33.3333%">Rating</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/carousel">
            <img alt="Svelte Carousel" src="https://flowbite.s3.amazonaws.com/github/svelte/carousel.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/avatar">
            <img alt="Svelte Avatar" src="https://flowbite.s3.amazonaws.com/github/svelte/avatar.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/rating">
            <img alt="Svelte Rating" src="https://flowbite.s3.amazonaws.com/github/svelte/rating.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Input Field</td>
    <td width="33.3333%">File Input</td>
    <td width="33.3333%">Search Input</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/input-field">
            <img alt="Svelte Input Field" src="https://flowbite.s3.amazonaws.com/github/svelte/input-field.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/file-input">
            <img alt="Svelte File Input" src="https://flowbite.s3.amazonaws.com/github/svelte/file-input.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/search-input">
            <img alt="Svelte Search Input" src="https://flowbite.s3.amazonaws.com/github/svelte/search-input.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Select</td>
    <td width="33.3333%">Textarea</td>
    <td width="33.3333%">Checkbox</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/select">
            <img alt="Svelte Select" src="https://flowbite.s3.amazonaws.com/github/svelte/select.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/textarea">
            <img alt="Svelte Textarea" src="https://flowbite.s3.amazonaws.com/github/svelte/textarea.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/checkbox">
            <img alt="Svelte Checkbox" src="https://flowbite.s3.amazonaws.com/github/svelte/checkbox.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Radio</td>
    <td width="33.3333%">Toggle</td>
    <td width="33.3333%">Range Slider</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/radio">
            <img alt="Svelte Radio" src="https://flowbite.s3.amazonaws.com/github/svelte/radio.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/toggle">
            <img alt="Svelte Toggle" src="https://flowbite.s3.amazonaws.com/github/svelte/toggle.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/range">
            <img alt="Svelte Range Slider" src="https://flowbite.s3.amazonaws.com/github/svelte/range-slider.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Floating Label</td>
    <td width="33.3333%">Mega Menu</td>
    <td width="33.3333%">Skeleton</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/floating-label">
            <img alt="Svelte Floating Label" src="https://flowbite.s3.amazonaws.com/github/svelte/floating-label.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/mega-menu">
            <img alt="Svelte Mega Menu" src="https://flowbite.s3.amazonaws.com/github/svelte/mega-menu.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/skeleton">
            <img alt="Svelte Skeleton" src="https://flowbite.s3.amazonaws.com/github/svelte/skeleton.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">KBD (keyboard)</td>
    <td width="33.3333%">Drawer (offcanvas)</td>
    <td width="33.3333%">Popover</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/kbd">
            <img alt="Svelte KBD (Keyboard)" src="https://flowbite.s3.amazonaws.com/github/svelte/kbd.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/drawer">
            <img alt="Svelte Drawer (offcanvas)" src="https://flowbite.s3.amazonaws.com/github/svelte/drawer.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/popover">
            <img alt="Svelte Popover" src="https://flowbite.s3.amazonaws.com/github/svelte/popover.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Video</td>
    <td width="33.3333%">Heading</td>
    <td width="33.3333%">Paragraph</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/video">
            <img alt="Svelte Video" src="https://flowbite.s3.amazonaws.com/github/svelte/video.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/heading">
            <img alt="Svelte Heading" src="https://flowbite.s3.amazonaws.com/github/svelte/heading.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/paragraph">
            <img alt="Svelte Paragraph" src="https://flowbite.s3.amazonaws.com/github/svelte/paragraph.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Blockquote</td>
    <td width="33.3333%">Image</td>
    <td width="33.3333%">List</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/blockquote">
            <img alt="Svelte Blockquote" src="https://flowbite.s3.amazonaws.com/github/svelte/blockquote.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/image">
            <img alt="Svelte Image" src="https://flowbite.s3.amazonaws.com/github/svelte/image.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/list">
            <img alt="Svelte List" src="https://flowbite.s3.amazonaws.com/github/svelte/list.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Link</td>
    <td width="33.3333%">Text</td>
    <td width="33.3333%">Horizontal line (HR)</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/link">
            <img alt="Svelte Link" src="https://flowbite.s3.amazonaws.com/github/svelte/link.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/text">
            <img alt="Svelte Text" src="https://flowbite.s3.amazonaws.com/github/svelte/text.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/hr">
            <img alt="Svelte HR" src="https://flowbite.s3.amazonaws.com/github/svelte/hr.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Speed Dial</td>
    <td width="33.3333%">Stepper(TBA)</td>
    <td width="33.3333%">Indicators</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/speed-dial">
            <img alt="Svelte Speed Dial" src="https://flowbite.s3.amazonaws.com/github/svelte/dial.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com">
            <img alt="Svelte Stepper" src="https://flowbite.s3.amazonaws.com/github/svelte/stepper.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/indicators">
            <img alt="Svelte Indicators" src="https://flowbite.s3.amazonaws.com/github/svelte/indicators.jpg">
        </a>
    </td>
  </tr>
  <tr>
    <td width="33.3333%">Bottom Navigation</td>
    <td width="33.3333%">Sticky Banner</td>
    <td width="33.3333%">Gallery (Masonry)</td>
  </tr>
  <tr>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/bottom-navigation">
            <img alt="Svelte Bottom Navigation Bar" src="https://flowbite.s3.amazonaws.com/github/svelte/bottom-bar.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/banner">
            <img alt="Svelte Bottom Sticky Banner" src="https://flowbite.s3.amazonaws.com/github/svelte/banner.jpg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/gallery">
            <img alt="Svelte Image Gallery (Masonry)" src="https://flowbite.s3.amazonaws.com/github/svelte/gallery.jpg">
        </a>
    </td>
  </tr>
</table>

## 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-svelte/discussions)

For casual chatting with others using the library:

💬 [Join the Flowbite Discord Server](https://discord.gg/4eeurUVvTy)

## Contribute

Please read [how to contribute](https://github.com/themesberg/flowbite-svelte/blob/main/CONTRIBUTING.md) if you'd like to be part of the Flowbite community of contributors.

## Changelog

View the full [changelog](https://github.com/themesberg/flowbite-svelte/blob/main/CHANGELOG.md) on this page.

## License

Flowbite Svelte is open-source under the [MIT License](https://flowbite-svelte.com/docs/pages/license).