flowbite-svelte 0.44.8 → 0.44.10

package/src/routes/docs/components/gallery.md

@@ -0,0 +1,230 @@
+---
+layout: componentLayout
+title: Svelte Gallery (Mansonry) - Flowbite
+breadcrumb_title: Svelte Gallery (Masonry)
+component_title: Gallery
+dir: Components
+description: Use the image gallery component based on a masonry grid layout using flex and grid classes from Tailwind CSS to show multiple pictures based on various styles
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer  } from '../../utils'
+  import { P, A } from '$lib'
+  const components = 'Gallery'
+</script>
+
+The gallery component can be used to show multiple images inside a masonry grid layout styles with the utility-first classes from Tailwind CSS to show a collection of pictures to your users based on various layouts, styles, sizes, and colors.
+
+This component is recommended for usage within marketing UI interfaces and website sections when you want to show pictures of your team members, office pictures, or even case study images.
+
+## Set up
+
+Import `Gallery` in the script tag.
+
+```svelte example hideOutput
+<script>
+  import { Gallery } from 'flowbite-svelte';
+</script>
+```
+
+## Default gallery
+
+Use this component to show a collection of images inside a gallery.
+
+Number of rows in the gallery is set by passing the `grid-cols-{n}` Tailwind class (including the reactive prefix). Spacing between images is set by `gap-{n}` class. If you don't set them it behaves like `grid-cols-1` and `gap:inherit`.
+
+Example below show a gallery with three pictures on a row.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery } from 'flowbite-svelte';
+  const images = [
+    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg' },
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
+    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' },
+    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg' },
+    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg' },
+    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg' },
+    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg' },
+    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg' }
+  ];
+</script>
+
+<Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
+```
+
+## Masonry grid
+
+This example can be used to show the images inside a masongry grid layouts with four columns.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery } from 'flowbite-svelte';
+  const images1 = [
+    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image.jpg' },
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-2.jpg' }
+  ];
+  const images2 = [
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-4.jpg' },
+    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-5.jpg' }
+  ];
+  const images3 = [
+    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-6.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-7.jpg' },
+    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-8.jpg' }
+  ];
+  const images4 = [
+    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-9.jpg' },
+    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-10.jpg' },
+    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/masonry/image-11.jpg' }
+  ];
+</script>
+
+<Gallery class="gap-4 grid-cols-2 md:grid-cols-4">
+  <Gallery items={images1} />
+  <Gallery items={images2} />
+  <Gallery items={images3} />
+  <Gallery items={images4} />
+</Gallery>
+```
+
+## Featured image
+
+This example can be used to feature the most important image and show a row of five pictures below.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery } from 'flowbite-svelte';
+  const image1 = {
+    alt: 'erbology',
+    src: 'https://flowbite.s3.amazonaws.com/docs/gallery/featured/image.jpg'
+  };
+  const images2 = [
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
+    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' }
+  ];
+</script>
+
+<Gallery class="gap-4">
+  <img src={image1.src} alt={image1.alt} class="h-auto max-w-full rounded-lg" />
+  <Gallery class="grid-cols-5" items={images2} />
+</Gallery>
+```
+
+## Quad gallery
+
+Use this example to show four larger images with two items on a row.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery } from 'flowbite-svelte';
+
+  const images = [
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' }
+  ];
+</script>
+
+<Gallery class="gap-2 grid-cols-2" items={images} />
+```
+
+## Gallery with tag filters
+
+Use this example to show a list of tags and filter the images below based on the activately selected tag.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery, Button } from 'flowbite-svelte';
+  const images = [
+    { alt: 'erbology', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image.jpg' },
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
+    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' },
+    { alt: 'cream', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-6.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-7.jpg' },
+    { alt: 'lamp', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-8.jpg' },
+    { alt: 'toiletbag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-9.jpg' },
+    { alt: 'playstation', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-10.jpg' },
+    { alt: 'bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-11.jpg' }
+  ];
+</script>
+
+<div class="flex items-center justify-center py-4 md:py-8 flex-wrap gap-3 mb-3 mx-auto">
+  <Button pill size="xl" outline>All categories</Button>
+  <Button pill size="xl" color="alternative">Shoes</Button>
+  <Button pill size="xl" color="alternative">Bags</Button>
+  <Button pill size="xl" color="alternative">Electronics</Button>
+  <Button pill size="xl" color="alternative">Gaming</Button>
+</div>
+
+<Gallery items={images} class="gap-4 grid-cols-2 md:grid-cols-3" />
+```
+
+## Heterogeneous gallery
+
+Gallery items don't have to be all the same but then you need to list them manually - don't set the `items` property.
+
+```svelte example class="flex flex-wrap gap-2" hideScript
+<script>
+  import { Gallery } from 'flowbite-svelte';
+</script>
+
+<Gallery class="gap-4 grid-cols-2">
+  <img src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg" alt="shoas" class="h-auto max-w- rounded-lg" />
+  <div class="h-auto max-w- rounded-lg flex items-center justify-center text-6xl font-extrabold bg-red-300">Sale</div>
+  <div class="h-auto max-w- rounded-lg flex items-center justify-center text-6xl font-extrabold bg-blue-300">Sale</div>
+  <img alt="plants" src="https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg" class="h-auto max-w- rounded-lg" />
+</Gallery>
+```
+
+## Custom image rendering
+
+This example shows how to get a complete control over the gallery images look and feel.
+
+```svelte example class="flex flex-wrap gap-2"
+<script>
+  import { Gallery } from 'flowbite-svelte';
+  const images = [
+    { alt: 'shoes', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-1.jpg' },
+    { alt: 'small bag', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-2.jpg' },
+    { alt: 'plants', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-3.jpg' },
+    { alt: 'watch', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-4.jpg' },
+    { alt: 'shoe', src: 'https://flowbite.s3.amazonaws.com/docs/gallery/square/image-5.jpg' }
+  ];
+</script>
+
+<Gallery class="gap-4 grid-cols-3" items={images} let:item>
+  <div class="ring-4 ring-red-600 dark:ring-red-400 p-1">
+    <img src={item.src} alt={item.alt} class="h-auto max-w-full" />
+  </div>
+</Gallery>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Gallery styling
+
+- Use the `class` prop to overwrite the `div` tag.
+- Use the `classImg` prop to overwrite `imgClass`.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Gallery](https://flowbite.com/docs/components/forms/)

package/src/routes/docs/components/imageData/+server.js

@@ -0,0 +1,43 @@
+/** @type {import("svelte/elements").HTMLImgAttributes[]} */
+export const images = [
+  {
+    alt: 'Cosmic timetraveler',
+    src: '/images/carousel/cosmic-timetraveler-pYyOZ8q7AII-unsplash.webp',
+    title: 'cosmic-timetraveler-pYyOZ8q7AII-unsplash.com'
+  },
+  {
+    alt: 'Cristina Gottardi',
+    src: '/images/carousel/cristina-gottardi-CSpjU6hYo_0-unsplash.webp',
+    title: 'cristina-gottardi-CSpjU6hYo_0-unsplash.com'
+  },
+  {
+    alt: 'Johannes Plenio',
+    src: '/images/carousel/johannes-plenio-RwHv7LgeC7s-unsplash.webp',
+    title: 'johannes-plenio-RwHv7LgeC7s-unsplash.com'
+  },
+  {
+    alt: 'Jonatan Pie',
+    src: '/images/carousel/jonatan-pie-3l3RwQdHRHg-unsplash.webp',
+    title: 'jonatan-pie-3l3RwQdHRHg-unsplash.com'
+  },
+  {
+    alt: 'Mark Harpur',
+    src: '/images/carousel/mark-harpur-K2s_YE031CA-unsplash.webp',
+    title: 'mark-harpur-K2s_YE031CA-unsplash'
+  },
+  {
+    alt: 'Pietro De Grandi',
+    src: '/images/carousel/pietro-de-grandi-T7K4aEPoGGk-unsplash.webp',
+    title: 'pietro-de-grandi-T7K4aEPoGGk-unsplash'
+  },
+  {
+    alt: 'Sergey Pesterev',
+    src: '/images/carousel/sergey-pesterev-tMvuB9se2uQ-unsplash.webp',
+    title: 'sergey-pesterev-tMvuB9se2uQ-unsplash'
+  },
+  {
+    alt: 'Solo travel goals',
+    src: '/images/carousel/solotravelgoals-7kLufxYoqWk-unsplash.webp',
+    title: 'solotravelgoals-7kLufxYoqWk-unsplash'
+  }
+];

package/src/routes/docs/components/indicators.md

@@ -0,0 +1,273 @@
+---
+layout: componentLayout
+title: Svelte Indicators - Flowbite
+breadcrumb_title: Svelte Indicators
+component_title: Indicators
+dir: Components
+description: Use the indicator component to show a number count, account status, or as a loading label positioned relative to the parent component coded with Tailwind CSS
+thumnailSize: w-64
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer } from '../../utils'
+  import { P, A } from '$lib'
+  const components = 'Indicator'
+</script>
+
+The indicator component can be used as a small element positioned absolutely relative to another component such as a button or card and show a number count, account status (red for offline, green for online) and other useful information.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Indicator } from 'flowbite-svelte';
+</script>
+```
+
+## Default indicator
+
+Use this example to create a simple indicator with multiple colors and position it anywhere on the website.
+
+```svelte example class="flex gap-2"
+<script>
+  import { Indicator } from 'flowbite-svelte';
+</script>
+
+<Indicator color="gray" />
+<Indicator color="dark" />
+<Indicator color="orange" />
+<Indicator color="blue" />
+<Indicator color="green" />
+<Indicator color="red" />
+<Indicator color="purple" />
+<Indicator color="indigo" />
+<Indicator color="yellow" />
+<Indicator color="teal" />
+```
+
+## Legend indicator
+
+This example can be used as a legend indicator for charts to also add a text next to the bullet point.
+
+```svelte example class="text-sm font-medium text-gray-900 dark:text-white flex gap-2"
+<script>
+  import { Indicator } from 'flowbite-svelte';
+</script>
+
+<span class="flex items-center"><Indicator size="sm" color="orange" class="mr-1.5" />Visitors</span>
+<span class="flex items-center"><Indicator size="sm" color="purple" class="mr-1.5" />Sessions</span>
+<span class="flex items-center"><Indicator size="sm" color="indigo" class="mr-1.5" />Customers</span>
+<span class="flex items-center"><Indicator size="sm" color="teal" class="mr-1.5" />Revenue</span>
+```
+
+## Indicator count
+
+This example can be used to show a number count inside the indicator and position it relative to a button component.
+
+```svelte example class="space-y-4"
+<script>
+  import { Indicator, Button } from 'flowbite-svelte';
+  import { EnvelopeSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Button size="lg" class="relative">
+  <EnvelopeSolid class="w-4 h-4 mr-2 text-white dark:text-white" />
+  <span class="sr-only">Notifications</span>
+  Messages
+  <Indicator color="red" border size="xl" placement="top-right">
+    <span class="text-white text-xs font-bold">8</span>
+  </Indicator>
+</Button>
+```
+
+## Status indicator
+
+Use this example to show a status indicator for the currently logged in user by showing red for offline and green for online.
+
+`Avatar` component uses `Indicator` internally as parameter `dot`. You can pass all props accepted by `Indicator` component as an object.
+
+```svelte example class="flex gap-2"
+<script>
+  import { Indicator, Avatar } from 'flowbite-svelte';
+</script>
+
+<Avatar src="/images/profile-picture-5.webp" dot={{ color: 'green', size: 'lg', placement: 'top-right' }} />
+<Avatar src="/images/profile-picture-5.webp" dot={{ color: 'red', size: 'lg', placement: 'top-right' }} />
+```
+
+## Badge indicator
+
+This example can be used to add an indicator inside of a badge component.
+
+```svelte example class="flex gap-2"
+<script>
+  import { Indicator, Avatar, Badge } from 'flowbite-svelte';
+</script>
+
+<ul class="max-w-sm divide-y divide-gray-200 dark:divide-gray-700 w-full">
+  <li class="py-3 sm:py-4">
+    <div class="flex items-center space-x-3">
+      <Avatar src="/images/profile-picture-5.webp" alt="Neil image" />
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Neil Sims</p>
+        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
+      </div>
+      <Badge color="green" rounded class="px-2.5 py-0.5">
+        <Indicator color="green" size="xs" class="mr-1" />Available
+      </Badge>
+    </div>
+  </li>
+  <li class="py-3 sm:py-4">
+    <div class="flex items-center space-x-3">
+      <div class="flex-shrink-0">
+        <Avatar src="/images/profile-picture-4.webp" alt="Bonnie image" />
+      </div>
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-semibold text-gray-900 truncate dark:text-white">Bonnie Green</p>
+        <p class="text-sm text-gray-500 truncate dark:text-gray-400">email@flowbite.com</p>
+      </div>
+      <Badge color="red" rounded class="px-2.5 py-0.5">
+        <Indicator color="red" size="xs" class="mr-1" />Unavailable
+      </Badge>
+    </div>
+  </li>
+</ul>
+```
+
+## Stepper indicator
+
+You can also use the indicators inside of a stepper component when completing a form element.
+
+```svelte example class="space-y-8"
+<script>
+  import { Indicator } from 'flowbite-svelte';
+  import { CheckCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<ol class="flex items-center">
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <CheckCircleSolid class="w-6 h-6 text-primary-600 dark:text-primary-300" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <CheckCircleSolid class="w-6 h-6 text-gray-800 dark:text-gray-300" />
+      </Indicator>
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
+    </div>
+  </li>
+</ol>
+<ol class="flex items-center">
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <Indicator color="orange" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 1</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <Indicator color="orange" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="none" class="bg-primary-200 dark:bg-primary-900 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <Indicator color="orange" />
+      </Indicator>
+      <div class="flex w-full bg-gray-200 h-0.5 dark:bg-gray-700" />
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 2</h3>
+    </div>
+  </li>
+  <li class="relative w-full mb-6">
+    <div class="flex items-center">
+      <Indicator size="xl" color="gray" class="dark:bg-gray-700 z-10 ring-0 ring-white sm:ring-8 dark:ring-gray-900 shrink-0">
+        <Indicator color="dark" class="dark:!bg-gray-300" />
+      </Indicator>
+    </div>
+    <div class="mt-3">
+      <h3 class="font-medium text-gray-900 dark:text-white">Step 3</h3>
+    </div>
+  </li>
+</ol>
+```
+
+## Indicator position
+
+Use these examples to position the indicator component anywhere relative to the parent element.
+
+```svelte example class="flex gap-4"
+<script>
+  import { Indicator } from 'flowbite-svelte';
+</script>
+
+<div class="w-56 h-56 relative bg-gray-100 borer border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700">
+  <Indicator placement="top-left" color="gray" />
+  <Indicator placement="top-center" color="dark" />
+  <Indicator placement="top-right" color="orange" />
+  <Indicator placement="center-left" color="green" />
+  <Indicator placement="center" color="red" />
+  <Indicator placement="center-right" color="purple" />
+  <Indicator placement="bottom-left" color="indigo" />
+  <Indicator placement="bottom-center" color="yellow" />
+  <Indicator placement="bottom-right" color="teal" />
+</div>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Indicator styling
+
+- Use the `class` prop to overwrite the `div` tag class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Indicators](https://flowbite.com/docs/components/indicators/)