KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#developer-tools #typescript #codex #ai-agents #claude-code #dsh #dsh-plugin #cli #macos #ai-agent #deepseek-harness #open-source

flowbite-svelte

★ 2,781 Open GitHub ↗

Official Svelte components built for Flowbite and Tailwind CSS

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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)

<p>
    <a href="https://flowbite-svelte.com" >
      <img alt="Flowbite Svelte UI components" width="350" src="./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="./static/images/components/alert.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/badge">
            <img alt="Svelte Badge" src="./static/images/components/badge.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/breadcrumb">
            <img alt="Svelte Breadcrumbs" src="./static/images/components/breadcrumb.svg">
        </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="./static/images/components/buttons.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/button-group">
            <img alt="Svelte Button Group" src="./static/images/components/button-group.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/card">
            <img alt="Svelte Cards" src="./static/images/components/card.svg">
        </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="./static/images/components/dropdown.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/forms">
            <img alt="Svelte Forms" src="./static/images/components/forms.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/list-group">
            <img alt="Svelte List group" src="./static/images/components/list-group.svg">
        </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="./static/images/components/typography.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/modal">
            <img alt="Svelte Modal" src="./static/images/components/modal.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/tabs">
            <img alt="Svelte Tabs" src="./static/images/components/tab.svg">
        </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="./static/images/components/navbar.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/pagination">
            <img alt="Svelte Pagination" src="./static/images/components/pagination.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/timeline">
            <img alt="Svelte Timeline" src="./static/images/components/timeline.svg">
        </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="./static/images/components/progress.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/table">
            <img alt="Svelte Tables" src="./static/images/components/table.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/toast">
            <img alt="Svelte Toast" src="./static/images/components/toast.svg">
        </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="./static/images/components/tooltip.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/datepicker">
            <img alt="Svelte Datepicker" src="./static/images/components/datepicker.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/spinner">
            <img alt="Svelte Spinner" src="./static/images/components/spinner.svg">
        </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="./static/images/components/footer.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/accordion">
            <img alt="Svelte Accordion" src="./static/images/components/accordion.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/sidebar">
            <img alt="Svelte Sidebar" src="./static/images/components/sidebar.svg">
        </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="./static/images/components/carousel.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/avatar">
            <img alt="Svelte Avatar" src="./static/images/components/avatar.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/rating">
            <img alt="Svelte Rating" src="./static/images/components/rating.svg">
        </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="./static/images/forms/input-field.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/file-input">
            <img alt="Svelte File Input" src="./static/images/forms/file-input.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/search-input">
            <img alt="Svelte Search Input" src="./static/images/forms/search-input.svg">
        </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="./static/images/forms/select.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/textarea">
            <img alt="Svelte Textarea" src="./static/images/forms/textarea.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/checkbox">
            <img alt="Svelte Checkbox" src="./static/images/forms/checkbox.svg">
        </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="./static/images/forms/radio.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/toggle">
            <img alt="Svelte Toggle" src="./static/images/forms/toggle.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/forms/range">
            <img alt="Svelte Range Slider" src="./static/images/forms/range.svg">
        </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="./static/images/forms/floating-label.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/mega-menu">
            <img alt="Svelte Mega Menu" src="./static/images/components/mega-menu.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/skeleton">
            <img alt="Svelte Skeleton" src="./static/images/components/skeleton.svg">
        </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="./static/images/components/kbd.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/drawer">
            <img alt="Svelte Drawer (offcanvas)" src="./static/images/components/drawer.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/popover">
            <img alt="Svelte Popover" src="./static/images/components/popover.svg">
        </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="./static/images/components/video.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/heading">
            <img alt="Svelte Heading" src="./static/images/typography/heading.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/paragraph">
            <img alt="Svelte Paragraph" src="./static/images/typography/paragraph.svg">
        </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="./static/images/typography/blockquote.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/image">
            <img alt="Svelte Image" src="./static/images/typography/image.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/list">
            <img alt="Svelte List" src="./static/images/typography/list.svg">
        </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="./static/images/typography/link.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/text">
            <img alt="Svelte Text" src="./static/images/typography/text.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/typography/hr">
            <img alt="Svelte HR" src="./static/images/typography/hr.svg">
        </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="./static/images/components/speed-dial.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com">
            <img alt="Svelte Stepper" src="./static/images/components/stepper.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/indicators">
            <img alt="Svelte Indicators" src="./static/images/components/indicators.svg">
        </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="./static/images/components/bottom-navigation.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/banner">
            <img alt="Svelte Bottom Sticky Banner" src="./static/images/components/banner.svg">
        </a>
    </td>
    <td width="33.3333%">
        <a href="https://flowbite-svelte.com/docs/components/gallery">
            <img alt="Svelte Image Gallery (Masonry)" src="./static/images/components/gallery.svg">
        </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).

flowbite-svelte

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README