Radio

• Radio
• Disabled state
• Radio link
• Helper text
• Inline
• Colors

Add Sidbar component.

• Default sidebar
• Multi-level dropdown
• Content separator
• CTA button
• Logo branding

Toggle

• Toggle
• Checked state
• Disabled state
• Colors
• Sizes

For example, if I wanted my modal button (in my Table column) to be displayed as an underlined link as shown here (Default Table, with Edit column)

Add Accordion components.

• Default accordion
• Icon accordion
• Always open
• Color options
• Flush accordion
• Arrow style

It needs a new layout.

The padding for the large input needs to be 4. The padding seems to be hardcoded to 2.5

https://github.com/shinokada/flowbite-svelte/blob/main/src/lib/forms/Input.svelte#L12 

Full width tab needs to have CSS for the last item.

The interactive card should have a toggle button.

Currently all markdown files use src/layout/doc.svelte.
Each module has common related components section.
By creating a module layout you can avoid repeating that section.

Add Pagination component.

• Default pagination
• Pagination with icons
• Previous and next
• Previous and next with icons
• Table data pagination
• Table data pagination with icons

Thank you for sharing the library, just wanted to ask if it this could be added.

I had to base it on the included interactive tab, not really sure if someone else might need it, its not a very pretty implementation but it works.

<div id="{tabId}Content">
    {#each tabs as { label, content, id }}
        {#if activeTabValue === id}
            <div
                class="p-4 bg-gray-50 rounded-lg dark:bg-gray-800"
                id={label}
                role="tabpanel"
                aria-labelledby="{label}-tab"
            >
                {#if typeof content === 'string'}
                    <p class="text-sm text-gray-500 dark:text-gray-400">
                        {content}
                    </p>
                {:else}
                    <svelte:component this={content} />
                {/if}
            </div>
        {/if}
    {/each}
</div>

One of the cool features of flowbite was the tooltips and would love to see it here.

• Triggering
• Styles
• Placement
• Animation
• Disable arrow

Floating label

• Floating label
• Disabled state
• Validation
• Sizes
• Helper text

Hi,
I am a little bit confused about which type the modalIdStore is. It is initialized as a number (0) but the modal id is usually a string. I use typescript in my project and I receive a warning when setting the modalIdStore to a string.

See https://github.com/shinokada/flowbite-svelte/blob/af846d09b44bef789cdd2badc04a782c8c7d7408/src/lib/modals/modalStores.js#L3

I would suggest changing the default value of the store to ''

Furthermore, I am curious if you plan on adding more typescript support. There are a few further problems here and there. I am happy to help if that is something that you would like to add.

Tab

• Tabs with icons
• Full width tabs
• Structure change for Interactive tabs

For Interactive tab:

InteractiveHead, TabContent component for the content. TabContent will use slot. This allows to add any contents to TabContent component.

Experimental

Date picker component.

• Default
• Inline date picker
• Date range picker
• Autohide
• Action buttons
• Date format
• Orientation
• Title

Checkbox

• Checkbox
• Disabled state
• Checkbox link
• Helper text
• Inline
• Colors

Create a component to isolate between dropdowns.

• DropdownNavbar
• Dropdown

Having trouble sizing my logo (its a .png, its taking up the entire screen...) on the Navbar Component, missing property for image sizing.

Sidebar component's logo has its default class already set, any chance for customization (for both components' logo elements)?

Flowbite Dropdown
Flowbite-Svelte Dropdown

• Default
• Divider
• Header
• Dropdown navbar
• Sizing
• Icon/img + dropdown
• Placement top
• Placement right
• Placement bottom
• Placement left
• Placement left start
• Placement right start
• Update Icon/img+dropdown by closing a dropdown by clicking the body and close another dropdown when you click another dropdown. The default dropdown has this functions already.
• Mouseover action to open a dropdown.

• As you can see in this example, add expand/collapse all to accordion component.
• No dependencies. Currently it uses svelte-collapse, but it should be able without the external dependency.

Add Progress component.

• Default example
• Sizing
• With label inside
• With label outside
• Colors

Add Avatar

• Default avatar
• Bordered
• Placeholder icon
• Placeholder initials
• Avatar tooltip
• Dot indicator
• Stacked
• Avatar text
• User dropdown
• Sizing

As you can see in these pages, and this, and this, cyan and lime colors are not working.

Carousel component need to add swipe function.

This may be usefull.

If a modal's content is longer than the page, it gets clipped and there is no vertical scrollbar. Suggested solution: make the backdrop (the translucent div) the parent of the modal div and give it overflow-y: auto. Would also require stopPropagation for clicks on the modal as they would propagate to the parent and close the modal otherwise. If this solution sounds good I can make a PR. Thanks!

Add Table component.

• Default table
• Highlight Striped rows
• Highlight Striped columns
• Checkbox
• Hover state
• Table layout, Table head (sortable)
• Table layout, Table foot
• Table layout, Table caption
• Table styles, Without border
• Table styles, Table with shadow
• Overflow scrolling
• Table search
• Table filter
• Table pagination
• Checkbox selection
• Table with users
• Table with products
• Table with modal
• Comparison table
• Table colors
• Table colors, Striped rows color
• Table colors, Striped columns color
• Table colors, Hover state

This REPL may be helpful for the Search Input table.

Dropdown Navbar works with on:mouseover.

Add Svelte motion to the Progressbar component.

Add Toast component.

• Default toast
• Colors
• Simple toast
• Undo button
• Toast message
• Push notification
• Interactive toast
• Positioning

Textarea input

• Textarea
• WYSIWYG editor
• Comment box
• Chatroom input

https://github.com/umaranis/svelte-lexical Is a good option to use.

Add Timeline component.

• Default timeline
• Vertical timeline
• Stepper timeline/Horizontal timeline
• Activity log
• Grouped timeline

Input forms

• Sizes
• Input fields
• Input sizes
• Disabled state
• Validation
• Input group
• Helper text
• Search input
• Dropdown

Range

• Range
• Disabled state
• Min and max
• Steps
• Sizes

Breadcrumb

• Default
• Solid background

Flowbite Svelte

Flowbite-svelte is a Tailwind and Flowbite powered UI components for Svelte and SvelteKit.

https://flowbite-svelte.vercel.app/navbars/dropdown

So the problem I've come into is that I can't put custom ids or classes to these components, and when I wanted to use the type property for a button, i have to use the btnType property which is inconvenient.

Svelte actually supports passing down properties to its children. So for example, on the button component:

// Instead of using the type={btnType}
<button type={btnType} class={buttonClass} on:click>
	{name}
	<slot />
</button>

// We can use $$restProps
<button {...$$restProps} class={buttonClass} on:click>
	{name}
	<slot />
</button>

Here's the official documentation:
https://svelte.dev/docs#template-syntax-attributes-and-props

Failed to resolve import "$app/stores" from "node_modules/.pnpm/[email protected]/node_modules/flowbite-svelte/navbar/DropdownNavbar.svelte". Does the file exist?
Failed to resolve import "$app/stores" from "node_modules/.pnpm/[email protected]/node_modules/flowbite-svelte/navbar/Navbar.svelte". Does the file exist?

It seems like DropdownNavbar and Navbar hard depend on sveltekit, I assume this is for the routing functionality.
Could they be made router-agnostic?
If not I think this package should at least peer-depend on sveltekit (but I'd really like to be able to use it without sveltekit - in my template sveltesse-webext).

What should I do if I don't want logo in Navbar?

Error

Took the latest package and noticed the following error that @codewithshin/svelte-heroicons package is missing

I believe some code dependencies needs to be marked as dependencies for flowbite-svelte without which they won't get installed for the downstream packages

Add Rating component.

The Flowbite library doesn't have it, but it will be nice to have .5 stars as well.

• Update the rating page to one page.
• Default rating
• Rating with text
• Rating count
• Star sizing
• Advanced rating
• Score rating
• Rating comment
• Review content

If we need to implement a form input that focuses on page load, how do we do that?

Can we consider binding a ref as shown here for all the form inputs?

When you click a sub page in the sidebar menu, it doesn't flicker. But when I click a category menu, it flickers. Because I needed to add rel="external" in order to close the sidebar menu.

It should close whenever I click a menu item or body area.

It would be nice to have error validation red color styling baked into the component for form fields.

something like hasError={true}

https://flowbite.com/docs/components/forms/#success-and-error-validation

Select input

• Select input
• Multiple options
• Disabled state
• Underline select
• Select with dropdown
• Sizes

After updating (npm i -D flowbite-svelte@latest), I'm getting a [plugin:vite:css] Cannot find module 'flowbite/plugin' when I'm building my app, I've tried deleting both package-lock.json and node_modules then running npm install

Search input

• Search input
• Search with dropdown
• Simple search input
• Location search
• Voice search

Badge component

• Default badge
• Larger badge
• Badges as links
• Badges with icon
• Notification badge
• Button with badge
• Badges with icon only
• Dismissable badges

exports is not defined
ReferenceError: exports is not defined
    at /node_modules/flowbite-svelte/dropdowns/dropdownStores.js:2:23
    at instantiateModule (D:\PROJEKTY\tron-shop-web\node_modules\vite\dist\node\chunks\dep-27bc1ab8.js:58525:15)

I don't event need to use exported button component in HTML code. It just needs an import

<script>
  import { Button } from 'flowbite-svelte';
</script>

<h1>Welcome to SvelteKit</h1>
<p>
  Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
</p>

If I change <script> to <script lang="ts"> then I'm gettings this error

The requested module '/node_modules/flowbite-svelte/dropdowns/dropdownStores.js' does not provide an export named 'dropdownIdStore'
SyntaxError: The requested module '/node_modules/flowbite-svelte/dropdowns/dropdownStores.js' does not provide an export named 'dropdownIdStore'

All project setup with flowbite-svelte was based on Getting Started from website.