Flowbite Svelte

Flowbite-Svelte provides a wide range of pre-built Svelte components based on the Flowbite design system. Components are categorized into several groups including:

• Layout & Navigation: Navbar, Breadcrumb, Sidebar, Bottom Navigation, Pagination, Tabs, Accordion, Drawer (offcanvas), Mega Menu.
• Forms & Inputs: Input Field, File Input, Search Input, Select, Textarea, Checkbox, Radio, Toggle, Range Slider, Floating Label, Datepicker.
• Data Display: Badge, Card, List group, Table, Timeline, Progress bar, Avatar, Rating, Skeleton, Indicators, Gallery (Masonry).
• Feedback & Overlays: Alert, Dropdown, Modal, Toast, Tooltip, Popover, Spinner.
• Typography: Heading, Paragraph, Blockquote, Image, List, Link, Text, Horizontal line (HR).
• Miscellaneous: Button, Button group, Carousel, KBD (keyboard), Speed Dial, Video, Bottom Sticky Banner.

If you need technical assistance or want to discuss the library, you can participate in the community through the following channels:

• GitHub Discussions: For technical questions and library discussions.
• Discord Server: For casual chatting with other users of the library.

The Accordion component includes built-in accessibility support:

• Keyboard Navigation: Use Tab to navigate headers, and Enter or Space to toggle expansion.
• ARIA Attributes: Automatic application of ARIA labels and states for screen readers.
• Focus Management: Built-in focus indicators for keyboard users.
• Screen Reader Support: Expansion and collapse states are announced automatically.

To use the Select component, import it from flowbite-svelte in your Svelte component.

<script lang="ts">
  import { Select } from "flowbite-svelte";
</script>

To ensure a good user experience when using the <Badge> component, follow these guidelines:

• Be Concise: Keep badge text short (1-3 words or numbers).
• Use Sparingly: Avoid excessive badges to prevent visual clutter.
• Consistent Meaning: Use colors consistently throughout your application to convey the same meaning.
• Appropriate Size: Match the badge size to its context and importance.
• Consider Context: Place badges near related content for clarity.
• Readable Contrast: Ensure text has sufficient contrast against the badge background.
• Accessibility:
  • Don't rely solely on color to convey meaning; include text or icons.
  • For icon-only badges, add ARIA labels.
  • Ensure interactive badges are keyboard accessible.

To use the Timepicker component in your Svelte project, import it from the flowbite-svelte package.

<script lang="ts">
  import { Timepicker } from "flowbite-svelte";
</script>

To use the Footer components, import them from flowbite-svelte in your Svelte file:

<script lang="ts">
  import { Footer, FooterBrand, FooterCopyright, FooterIcon, FooterLink, FooterLinkGroup } from "flowbite-svelte";
</script>