flowbite-svelte

name	flowbite-svelte
description	Flowbite Svelte component documentation lookup. MUST be used whenever creating or editing UI components that use Flowbite Svelte. Fetch component docs before writing any Flowbite component code.

Flowbite Svelte Documentation

How to Use

Flowbite Svelte provides LLM-optimized documentation at predictable URLs. Before writing or editing any component that uses Flowbite Svelte, fetch the relevant docs.

URL Pattern

All docs follow: https://flowbite-svelte.com/llm/{category}/{component}.md

Available Components

Components (components/): accordion, alert, avatar, badge, banner, bottom-navigation, breadcrumb, button-group, buttons, card, carousel, clipboard, darkmode, datepicker, device-mockups, drawer, dropdown, footer, forms, gallery, indicators, kbd, list-group, mega-menu, modal, navbar, pagination, popover, progress, rating, sidebar, skeleton, speed-dial, spinner, stepper, table, tabs, timeline, toast, tooltip, typography, video

Forms (forms/): checkbox, file-input, floating-label, input-field, number-input, phone-input, radio, range, search-input, select, textarea, timepicker, toggle

Extended (extended/): button-toggle, clipboard-manager, command-palette, kanban-board, progress-radial, scroll-spy, split-pane, step-indicator, tags, tour, virtual-list, virtual-masonry

Plugins (plugins/): charts, datatables, wysiwyg

Pages (pages/): colors, customization, quickstart, theme-provider, typescript

Typography (typography/): blockquote, heading, hr, image, link, list, paragraph, text

Utilities (utilities/): close-button, label, toolbar

Workflow

1. Before writing a Flowbite component: Fetch the relevant doc page using WebFetch
   • Example: WebFetch("https://flowbite-svelte.com/llm/components/modal.md", "Return the full component API, props, and usage examples")
2. Multiple components: Fetch docs for each component you plan to use
3. Theming: Fetch pages/theme-provider.md and pages/colors.md for customization
4. Setup questions: Fetch pages/quickstart.md

Key Facts (no lookup needed)

• Import from flowbite-svelte: import { Button, Card, Modal } from 'flowbite-svelte'
• Import icons from flowbite-svelte-icons: import { ArrowRightOutline } from 'flowbite-svelte-icons'
• Uses Svelte 5 runes ($props(), $state, $derived)
• Requires Tailwind CSS 4
• Props use color, size, class conventions
• Dark mode via class strategy: @custom-variant dark (&:where(.dark, .dark *))
• Snippets use {#snippet name()}...{/snippet} pattern for slots (Svelte 5)