Home

Awesome

FLOWBITE-SVELTE

npm version npm downloads npm downloads license Discord

⚠️ 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 is an official Flowbite UI component library for Svelte. All interactivities are handled by Svelte.

Visualize this repo's codebase

Installation

Documentation

For full documentation, visit 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

For casual chatting with others using the library:

💬 Join the Flowbite Discord Server

Contribute

Please read how to contribute if you'd like to be part of the Flowbite community of contributors.

Changelog

View the full changelog on this page.

License

Flowbite Svelte is open-source under the MIT License.