| Site web | flowbite-svelte.com |
|---|
| Size | |
|---|
| Layout | |
|---|
| AppShell | - Navbar, Sidebar, Footer components... |
|---|
| Container | Non |
|---|
| Center | |
|---|
| Dark Mode / Lightswitch | Oui |
|---|
| Footer | Oui Use the footer section at the bottom of every page to show valuable information to your users, such as sitemap links, a copyright notice, and a logo |
|---|
| Grid | Non |
|---|
| Group | Non |
|---|
| MediaQuery | Non |
|---|
| Navbar | Oui The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns (Navbar with search, CTA button...Sticky navbar) |
|---|
| SimpleGrid | Non |
|---|
| Sidebar | Oui Use the sidebar component to show a list of menu items and multi-level dropdown items on either side of the page to navigate on your website (with content separator, add a CTA button, show logo...) |
|---|
| Space | Non |
|---|
| Stack | Non |
|---|
| Navigation | |
|---|
| Anchor | Oui The link component can be used to set hyperlinks from one page to another or to an external website when clicking on an inline text item, button, or card |
|---|
| Breadcrumbs | Oui Show the location of the current page in a hierarchical structure using the breadcrumb components |
|---|
| Burger | Non |
|---|
| Drawer (or Off-canvas) | Oui The Drawer component can be used as a hidden off-canvas sidebar for navigation and to show other information based on multiple styles and placements |
|---|
| Pagination | Oui Use the Tailwind CSS pagination element to indicate a series of content across various pages |
|---|
| Seo | Non |
|---|
| Tabs | Oui Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container (Tabs with underline, with icons...) |
|---|
| Data Display | |
|---|
| Accordion | Oui Use the accordion component to show hidden information based on the collapse and expand state of the child elements using data attribute options |
|---|
| Avatar | Oui Use the avatar component to show a visual representation of a user profile using an image element or SVG object based on multiple styles and sizes |
|---|
| Badge | Oui Use Tailwind CSS badges as elements to show counts or labels separately or inside other components |
|---|
| Card | Oui Get started with a large variety of Tailwind CSS card examples for your web project |
|---|
| Carousel | Oui Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options |
|---|
| Conic Gradients | Non |
|---|
| Dot | Non |
|---|
| Divider | Non |
|---|
| Dropdown | Oui to show a list of menu items when clicking on the trigger element based on multiple layouts, styles, and placements |
|---|
| Image | Oui The image component can be used to embed images inside the web page in articles and sections based on multiple styles, sizes, layouts and hover animations (image effects...) |
|---|
| Image Lists / Gallery | |
|---|
| Kbd | Oui Use the KBD component as an inline element to denote textual user input from the keyboard inside paragraphs, tables, and other components |
|---|
| List Group | Oui Use the list group component to display a series of items, buttons or links inside a single element, with links, with icons... |
|---|
| Popover | Oui Use the popover component to show detailed information inside a pop-up box relative to the element that is being clicked or hovered based on multiple styles (Image popover, progress popover...) |
|---|
| Rating | Oui Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes |
|---|
| Table | Oui Use the table component to show text, images, links, and other elements inside a structured set of data made up of rows and columns of table cells (Checkboxes, search input, table foot, table caption, colors..) |
|---|
| ThemeIcon | Oui You can uses Svelte-Heros-v2 and other icon sets for Flowbite-Svelte. Svelte-Heros-v2 icons allow you to change the icon color, size, and other props. |
|---|
| Timeline | Oui Get started with the responsive timeline component to show data in a chronological order with support for multiple styles, sizes, and variants (vertical timeline, horizontal timeline, activity log...) |
|---|
| TreeView | Non |
|---|
| Typography | Oui Use the typography and the utility classes from Tailwind CSS to style text with FlowBite |
|---|
| Video | Oui Use the video component to configure an embedded video player using native HTML 5 functionality based on the utility classes from Tailwind CSS (responsive, autoplay, custom styles: rounded corners...) |
|---|
| Inputs & Actions | |
|---|
| ActionIcon | Oui |
|---|
| Autocomplete | |
|---|
| Button | Oui Use the button component inside forms, as links, social login, payment options with support for multiple styles, colors, sizes, gradients, and shadows |
|---|
| Button Group | Oui Button groups are a Tailwind CSS powered set of buttons sticked together in a horizontal line |
|---|
| Checkbox | Oui The checkbox component can be used to receive one or more selected options from the user in the form of a square box available in multiple styles, sizes, colors, and variants coded with the utility classes from Tailwind CSS and with support for dark mode. (checkbox with a link, helper text, colors...) |
|---|
| CheckboxGroup | Oui Vertical or Horizontal list group, advanced layout... |
|---|
| Chip | |
|---|
| FileDropzone | Oui |
|---|
| FileInput | Oui The file input component can be used to upload one or more files from the device storage of the user available in multiple sizes, styles, variants and support for dark mode. (Multiple files, Helper text...) |
|---|
| Floating Label | Oui Use the floating label style for the input field elements to replicate the Material UI design system from Google and choose from multiple styles and sizes |
|---|
| FormField | |
|---|
| Input | Oui Input element with icon |
|---|
| InputWrapper | |
|---|
| Listboxes | |
|---|
| NumberInput | Oui |
|---|
| Radio Button | Oui to let the user choose a single option from multiple options in the form of a circle based on multiple styles and colors |
|---|
| RadioGroup | Oui |
|---|
| Range | Oui to receive a number from the user anywhere from 1 to 100 by sliding form control horizontally based on multiple options |
|---|
| Search Input | Oui Use the search input component as a text field to allow users to enter search queries and receive relevant page results available in multiple styles and sizes |
|---|
| Select | Oui to allow the user to choose from one or more options from a dropdown list based on multiple styles, sizes, and variants |
|---|
| Speed Dial | Oui The speed dial component can be used as a quick way to show a list of action buttons to a user when hovering or clicking on the main trigger element. |
|---|
| Slider | - see Range component |
|---|
| Switch Toggle | Oui Use the toggle component to switch between a binary state of true or false using a single click available in multiple sizes, variants, and colors |
|---|
| Textarea | Oui |
|---|
| TextInput | Oui |
|---|
| UnstyledButton | |
|---|
| Dates | |
|---|
| DatePicker | - experimental component and only works with SvelteKit. |
|---|
| TimePicker | Non |
|---|
| Calendrier | Non |
|---|
| Feedback | |
|---|
| Alert | Oui Show contextual information to your users using alert elements based on Tailwind CSS |
|---|
| Loading | Non |
|---|
| Notification / Toasts | Oui Push notifications to your users using the toast component and choose from multiple sizes, colors, styles, and positions |
|---|
| Snackbar | Non |
|---|
| SnackbarContainer | Non |
|---|
| Linear Progress | Oui Use the progress bar component to show the completion rate of a data indicator or use it as a loader element (with label inside, outside...colors...) |
|---|
| Progress Radials / Circular Progress | Non |
|---|
| Skeleton | Oui The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video |
|---|
| Spinner | Oui Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG |
|---|
| Overlay | |
|---|
| Affix | - Sticky navbar |
|---|
| Menu | Oui Use the mega menu component as a full-width dropdown inside the navbar to show a list of menu items based on multiple sizes, variants, and styles. (with icons, images...) |
|---|
| Modal | Oui Use the modal component to show interactive dialogs and notifications to your website users available in multiple sizes, colors, and styles |
|---|
| Dialog | Oui |
|---|
| Overlay | Non |
|---|
| Tooltip | Oui Use the following Tailwind CSS powered tooltips to show extra content when hovering or focusing on an element (Tooltip arrow, colors...) |
|---|
| Utils | |
|---|
| Code blocks | |
|---|
| Colors | Oui Choose your primary color in tailwind.config.cjs file |
|---|
| Close Button | Oui The CloseButton components are used throughout the library and you can use it for your app as well |
|---|
| Label | Oui The Label components are used throughout the library and you can use it for your app as well |
|---|
| Local Storage Store | |
|---|
| Toolbar | Oui Use the following Tailwind CSS powered toolbars to show groups of tool buttons |
|---|
| Svelte Actions / Hooks Library | |
|---|
| use-move | Non |
|---|
| use-clipboard | Non |
|---|
| use-focus-trap | Non |
|---|
| Image Filters | Non |
|---|
Avis utilisateurs et commentaires