flowbite-svelte 0.44.8 → 0.44.9

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

@@ -0,0 +1,423 @@
+---
+layout: componentLayout
+title: Svelte Cards - Flowbite
+breadcrumb_title: Svelte Card
+component_title: Cards
+dir: Components
+description: Get started with a large variety of Tailwind CSS card examples for your web project
+thumnailSize: w-36
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer  } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'Card, Frame'
+</script>
+
+Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.
+
+## Set up
+
+Import Card in the script tag.
+
+```svelte example hideOutput
+<script>
+  import { Card } from 'flowbite-svelte';
+</script>
+```
+
+## Default card
+
+Use the following simple card component with a title and description. Notice the `href` prop set, as that card is one big `<a/>` element.
+
+```svelte example class="flex justify-center flex-wrap gap-2" hideScript
+<script>
+  import { Card } from 'flowbite-svelte';
+</script>
+
+<Card href="/cards">
+  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+  <p class="font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+</Card>
+```
+
+## Card with action button
+
+Use the following example of a card element if you also want to have an action button.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button } from 'flowbite-svelte';
+  import { ArrowRightOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Card>
+  <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+  <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+  <Button class="w-fit">
+    Read more <ArrowRightOutline class="w-3.5 h-3.5 ml-2 text-white" />
+  </Button>
+</Card>
+```
+
+## Card with link
+
+This example can be used to show a CTA as a link instead of a button inside the card.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card } from 'flowbite-svelte';
+  import { GiftBoxSolid, ArrowUpRightFromSquareOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Card>
+  <GiftBoxSolid class="w-7 h-7 mb-3 text-gray-500 dark:text-gray-400" />
+  <a href="/">
+    <h5 class="mb-2 text-2xl font-semibold tracking-tight text-gray-900 dark:text-white">Need a help in Claim?</h5>
+  </a>
+  <p class="mb-3 font-normal text-gray-500 dark:text-gray-400">Go to this step by step guideline process on how to certify for your weekly benefits:</p>
+  <a href="/" class="inline-flex items-center text-primary-600 hover:underline">
+    See our guideline
+    <ArrowUpRightFromSquareOutline class="w-3 h-3 ml-2.5" />
+  </a>
+</Card>
+```
+
+## Card with image
+
+User <code>reverse={true}</code> to reverse the position of an image.
+
+You can use the following example of a card element with an image for blog posts, user cards, and many more.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button, Toggle } from 'flowbite-svelte';
+  import { ArrowRightOutline } from 'flowbite-svelte-icons';
+  let vCard = false;
+</script>
+
+<div>
+  <Card img="/images/image-1.webp" reverse={vCard} class="mb-4">
+    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+    <Button>
+      Read more <ArrowRightOutline class="w-3.5 h-3.5 ml-2 text-white" />
+    </Button>
+  </Card>
+  <Toggle bind:checked={vCard} class="italic dark:text-gray-500">Reverse</Toggle>
+</div>
+```
+
+## Horizontal card
+
+If you want to spice up your cards you can use the following card which has its child elements aligned horizontally.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button, Toggle } from 'flowbite-svelte';
+  let hCard = false;
+</script>
+
+<div>
+  <Card img="/images/image-1.webp" href="/" horizontal reverse={hCard} class="mb-4">
+    <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">Noteworthy technology acquisitions 2021</h5>
+    <p class="mb-3 font-normal text-gray-700 dark:text-gray-400 leading-tight">Here are the biggest enterprise technology acquisitions of 2021 so far, in reverse chronological order.</p>
+  </Card>
+  <Toggle bind:checked={hCard} class="italic dark:text-gray-500">Reverse</Toggle>
+</div>
+```
+
+## User profile card
+
+Use this user profile card example if you want to show a dropdown menu and buttons to enable multiple actions from your user.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Dropdown, DropdownItem, Avatar, Button } from 'flowbite-svelte';
+  import { DotsHorizontalOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Card padding="sm">
+  <div class="flex justify-end">
+    <DotsHorizontalOutline />
+    <Dropdown class="w-36">
+      <DropdownItem>Edit</DropdownItem>
+      <DropdownItem>Export data</DropdownItem>
+      <DropdownItem>Delete</DropdownItem>
+    </Dropdown>
+  </div>
+  <div class="flex flex-col items-center pb-4">
+    <Avatar size="lg" src="/images/profile-picture-3.webp" />
+    <h5 class="mb-1 text-xl font-medium text-gray-900 dark:text-white">Bonnie Green</h5>
+    <span class="text-sm text-gray-500 dark:text-gray-400">Visual Designer</span>
+    <div class="flex mt-4 space-x-3 lg:mt-6">
+      <Button>Add friend</Button>
+      <Button color="light" class="dark:text-white">Message</Button>
+    </div>
+  </div>
+</Card>
+```
+
+## Card with form inputs
+
+Use this card example where you can add form input elements that can be used for authentication actions or any other context where you need to receive information from your users.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button, Label, Input, Checkbox } from 'flowbite-svelte';
+</script>
+
+<Card class="w-full max-w-md">
+  <form class="flex flex-col space-y-6" action="/">
+    <h3 class="text-xl font-medium text-gray-900 dark:text-white">Sign in to our platform</h3>
+    <Label class="space-y-2">
+      <span>Email</span>
+      <Input type="email" name="email" placeholder="name@company.com" required />
+    </Label>
+    <Label class="space-y-2">
+      <span>Your password</span>
+      <Input type="password" name="password" placeholder="•••••" required />
+    </Label>
+    <div class="flex items-start">
+      <Checkbox>Remember me</Checkbox>
+      <a href="/" class="ml-auto text-sm text-primary-700 hover:underline dark:text-primary-500"> Lost password? </a>
+    </div>
+    <Button type="submit" class="w-full">Login to your account</Button>
+    <div class="text-sm font-medium text-gray-500 dark:text-gray-300">
+      Not registered? <a href="/" class="text-primary-700 hover:underline dark:text-primary-500"> Create account </a>
+    </div>
+  </form>
+</Card>
+```
+
+## E-commerce card
+
+Use this card for your e-commerce websites and show information about the products and enable actions such as adding a review and adding the product to the cart.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button, Rating, Badge } from 'flowbite-svelte';
+</script>
+
+<Card padding="none">
+  <a href="/">
+    <img class="p-8 rounded-t-lg" src="/images/product-1.webp" alt="product 1" />
+  </a>
+  <div class="px-5 pb-5">
+    <a href="/">
+      <h5 class="text-xl font-semibold tracking-tight text-gray-900 dark:text-white">Apple Watch Series 7 GPS, Aluminium Case, Starlight Sport</h5>
+    </a>
+    <Rating rating="4" size="24" class="mt-2.5 mb-5">
+      <Badge slot="text" class="ml-3">4</Badge>
+    </Rating>
+    <div class="flex justify-between items-center">
+      <span class="text-3xl font-bold text-gray-900 dark:text-white">$599</span>
+      <Button href="/">Buy now</Button>
+    </div>
+  </div>
+</Card>
+```
+
+## Call to action card
+
+Use this CTA card example to encourage your users to visit a certain page such as downloading the iOS or Android application for your project.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button } from 'flowbite-svelte';
+</script>
+
+<Card class="text-center" size="lg" padding="xl">
+  <h5 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">Work fast from anywhere</h5>
+  <p class="mb-5 text-base text-gray-500 sm:text-lg dark:text-gray-400">Stay up to date and move work forward with Flowbite on iOS & Android. Download the app today.</p>
+  <div class="justify-center items-center space-y-4 sm:flex sm:space-y-0 sm:space-x-4">
+    <Button>Download it</Button>
+    <Button>Get it on</Button>
+  </div>
+</Card>
+```
+
+## Card with list
+
+Use this card example if you want to show a list of data:
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Listgroup, Avatar } from 'flowbite-svelte';
+  let list = [
+    {
+      img: { src: '/images/profile-picture-1.webp', alt: 'Neil Sims' },
+      name: 'Neil Sims',
+      email: 'email@windster.com',
+      value: '$320'
+    },
+    {
+      img: { src: '/images/profile-picture-2.webp', alt: 'Bonnie Green' },
+      name: 'Bonnie Green',
+      email: 'email@windster.com',
+      value: '$3467'
+    },
+    {
+      img: { src: '/images/profile-picture-3.webp', alt: 'Michael Gough' },
+      name: 'Michael Gough',
+      email: 'email@windster.com',
+      value: '$67'
+    }
+  ];
+</script>
+
+<Card padding="xl" size="md">
+  <div class="flex justify-between items-center mb-4">
+    <h5 class="text-xl font-bold leading-none text-gray-900 dark:text-white">Latest Customers</h5>
+    <a href="/" class="text-sm font-medium text-primary-600 hover:underline dark:text-primary-500"> View all </a>
+  </div>
+  <Listgroup items={list} let:item class="border-0 dark:!bg-transparent">
+    <div class="flex items-center space-x-4">
+      <Avatar src={item.img.src} alt={item.img.alt} class="flex-shrink-0" />
+      <div class="flex-1 min-w-0">
+        <p class="text-sm font-medium text-gray-900 truncate dark:text-white">
+          {item.name}
+        </p>
+        <p class="text-sm text-gray-500 truncate dark:text-gray-400">
+          {item.email}
+        </p>
+      </div>
+      <div class="inline-flex items-center text-base font-semibold text-gray-900 dark:text-white">
+        {item.value}
+      </div>
+    </div>
+  </Listgroup>
+</Card>
+```
+
+## Pricing card
+
+Show detailed information to potential customers about your product’s pricing plan, list of features, and a purchase button.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card, Button } from 'flowbite-svelte';
+  import { CheckCircleSolid } from 'flowbite-svelte-icons';
+</script>
+
+<Card padding="xl">
+  <h5 class="mb-4 text-xl font-medium text-gray-500 dark:text-gray-400">Standard plan</h5>
+  <div class="flex items-baseline text-gray-900 dark:text-white">
+    <span class="text-3xl font-semibold">$</span>
+    <span class="text-5xl font-extrabold tracking-tight">49</span>
+    <span class="ml-1 text-xl font-normal text-gray-500 dark:text-gray-400">/month</span>
+  </div>
+  <!-- List -->
+  <ul class="my-7 space-y-4">
+    <li class="flex space-x-2">
+      <CheckCircleSolid class="w-4 h-4 text-primary-600 dark:text-primary-500" />
+      <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400"> 2 team members </span>
+    </li>
+    <li class="flex space-x-2">
+      <CheckCircleSolid class="w-4 h-4 text-primary-600 dark:text-primary-500" />
+      <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400"> 20GB Cloud storage </span>
+    </li>
+    <li class="flex space-x-2">
+      <CheckCircleSolid class="w-4 h-4 text-primary-600 dark:text-primary-500" />
+      <span class="text-base font-normal leading-tight text-gray-500 dark:text-gray-400"> Integration help </span>
+    </li>
+    <li class="flex space-x-2 line-through decoration-gray-500">
+      <CheckCircleSolid class="w-4 h-4 text-gray-400 dark:text-gray-500" />
+      <span class="text-base font-normal leading-tight text-gray-500">Sketch Files</span>
+    </li>
+    <li class="flex space-x-2 line-through decoration-gray-500">
+      <CheckCircleSolid class="w-4 h-4 text-gray-400 dark:text-gray-500" />
+      <span class="text-base font-normal leading-tight text-gray-500">API Access</span>
+    </li>
+    <li class="flex space-x-2 line-through decoration-gray-500">
+      <CheckCircleSolid class="w-4 h-4 text-gray-400 dark:text-gray-500" />
+      <span class="text-base font-normal leading-tight text-gray-500">Complete documentation</span>
+    </li>
+    <li class="flex space-x-2 line-through decoration-gray-500">
+      <CheckCircleSolid class="w-4 h-4 text-gray-400 dark:text-gray-500" />
+      <span class="text-base font-normal leading-tight text-gray-500">24×7 phone & email support</span>
+    </li>
+  </ul>
+  <Button class="w-full">Choose plan</Button>
+</Card>
+```
+
+## Testimonial card
+
+Use this example to split cards into multiple sections such as for testimonials or reviews.
+
+```svelte example class="flex justify-center flex-wrap gap-2"
+<script>
+  import { Card } from 'flowbite-svelte';
+</script>
+
+<Card padding="none" size="xl" class="grid md:grid-cols-2">
+  <figure class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-t-lg border-b border-gray-200 md:rounded-t-none md:rounded-tl-lg md:border-r dark:bg-gray-800 dark:border-gray-700">
+    <blockquote class="mx-auto mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Very easy this was to integrate</h3>
+      <p class="my-4 font-light">If you care for your time, I hands down would go with this."</p>
+    </blockquote>
+    <figcaption class="flex justify-center items-center space-x-3">
+      <img class="w-9 h-9 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png" alt="Karen profile" />
+      <div class="space-y-0.5 font-medium dark:text-white text-left">
+        <div>Bonnie Green</div>
+        <div class="text-sm font-light text-gray-500 dark:text-gray-400">Developer at Open AI</div>
+      </div>
+    </figcaption>
+  </figure>
+  <figure class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-tr-lg border-b border-gray-200 dark:bg-gray-800 dark:border-gray-700">
+    <blockquote class="mx-auto mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Solid foundation for any project</h3>
+      <p class="my-4 font-light">Designing with Figma components that can be easily translated to the utility classes of Tailwind CSS is a huge timesaver!"</p>
+    </blockquote>
+    <figcaption class="flex justify-center items-center space-x-3">
+      <img class="w-9 h-9 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/roberta-casas.png" alt="Robert profile" />
+      <div class="space-y-0.5 font-medium dark:text-white text-left">
+        <div>Roberta Casas</div>
+        <div class="text-sm font-light text-gray-500 dark:text-gray-400">Lead designer at Dropbox</div>
+      </div>
+    </figcaption>
+  </figure>
+  <figure class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-bl-lg border-b border-gray-200 md:border-b-0 md:border-r dark:bg-gray-800 dark:border-gray-700">
+    <blockquote class="mx-auto mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Mindblowing workflow</h3>
+      <p class="my-4 font-light">Aesthetically, the well designed components are beautiful and will undoubtedly level up your next application."</p>
+    </blockquote>
+    <figcaption class="flex justify-center items-center space-x-3">
+      <img class="w-9 h-9 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png" alt="Jese profile" />
+      <div class="space-y-0.5 font-medium dark:text-white text-left">
+        <div>Jese Leos</div>
+        <div class="text-sm font-light text-gray-500 dark:text-gray-400">Software Engineer at Facebook</div>
+      </div>
+    </figcaption>
+  </figure>
+  <figure class="flex flex-col justify-center items-center p-8 text-center bg-white rounded-b-lg border-gray-200 md:rounded-br-lg dark:bg-gray-800 dark:border-gray-700">
+    <blockquote class="mx-auto mb-4 max-w-2xl text-gray-500 dark:text-gray-400">
+      <h3 class="text-lg font-semibold text-gray-900 dark:text-white">Efficient Collaborating</h3>
+      <p class="my-4 font-light">You have many examples that can be used to create a fast prototype for your team."</p>
+    </blockquote>
+    <figcaption class="flex justify-center items-center space-x-3">
+      <img class="w-9 h-9 rounded-full" src="https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/joseph-mcfall.png" alt="joseph profile" />
+      <div class="space-y-0.5 font-medium dark:text-white text-left">
+        <div>Joseph McFall</div>
+        <div class="text-sm font-light text-gray-500 dark:text-gray-400">CTO at Google</div>
+      </div>
+    </figcaption>
+  </figure>
+</Card>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Card styling
+
+- The Card component uses the Frame component. Use the `class` property to overwrite the default Frame class. The Frame component tag can be either an anchor tag or a div tag depending on the value of the href prop.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Card](https://flowbite.com/docs/components/card/)

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

@@ -0,0 +1,242 @@
+---
+layout: componentLayout
+title: Svelte Carousel - Flowbite
+breadcrumb_title: Svelte Carousel
+component_title: Carousel
+dir: Components
+description: Use the carousel component to slide through multiple elements and images using custom controls, indicators, intervals, and options
+thumnailSize: w-48
+---
+
+<script>
+  import { CompoAttributesViewer } from '../../utils'
+
+  const components = 'Carousel, Indicators, Controls, ControlButton, Thumbnails, Thumbnail';
+</script>
+
+The carousel component can be used to cycle through a set of elements using custom options, controls, and indicators.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  // ./imageData/+server.js has the following
+  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'
+    }
+  ];
+</script>
+```
+
+## Default Carousel
+
+Set the `duration` prop to define the time interval for chaning images. Time is set in miliseconds.
+
+The default value for `duration` is set to zero that means no autochange of images. In that case you can control which image is displayed by the `index` prop.
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+</script>
+
+<div class="max-w-4xl">
+  <Carousel {images} duration="3000" />
+</div>
+```
+
+## Controls
+
+Use the internal `Controls` component to listen to click events which will trigger the slide event from the carousel component to each direction.
+
+You can customize the control elements with the `class` property.
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+</script>
+
+<div class="max-w-4xl">
+  <Carousel {images} let:Controls>
+    <Controls />
+  </Carousel>
+</div>
+```
+
+## Indicators
+
+Show the carousel indicators by adding the internal `Indicators` component.
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+</script>
+
+<div class="max-w-4xl">
+  <Carousel {images} let:Indicators>
+    <Indicators />
+  </Carousel>
+</div>
+```
+
+## Thumbnails
+
+You can control the `Carousel` component externally by the `index` prop. Here is an example how to use the `Thumbnails` component to achieve that.
+
+```svelte example
+<script>
+  import { Carousel, Thumbnails } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+
+  let index = 0;
+</script>
+
+<div class="max-w-4xl space-y-4">
+  <Carousel {images} let:Indicators let:Controls bind:index>
+    <Controls />
+    <Indicators />
+  </Carousel>
+  <Thumbnails {images} bind:index />
+</div>
+```
+
+## Caption
+
+The `Carousel` exposes the `change` event containing info about the currently displayed image. You can use it to build custom caption for the carousel.
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+
+  let index = 0;
+  let image;
+</script>
+
+<div class="max-w-4xl space-y-4">
+  <Carousel {images} let:Indicators let:Controls on:change={({ detail }) => (image = detail)}>
+    <Controls />
+    <Indicators />
+  </Carousel>
+
+  <div class="rounded h-10 bg-gray-300 dark:bg-gray-700 dark:text-white p-2 my-2 text-center">
+    {image?.alt}
+  </div>
+</div>
+```
+
+## Customization
+
+### Basic customization
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+</script>
+
+<div class="max-w-4xl space-y-4">
+  <Carousel {images} let:Indicators let:Controls class="rounded-none ring-4 ring-green-500 border-4 border-white dark:border-gray-800">
+    <Indicators class="border border-white rounded-md p-2" />
+    <Controls class="items-start text-red-400 dark:text-green-400 pt-4" />
+  </Carousel>
+</div>
+```
+
+### Advanced customization
+
+```svelte example
+<script>
+  import { Carousel, Thumbnails, Button, Indicator } from 'flowbite-svelte';
+  import { CaretRightOutline } from 'flowbite-svelte-icons';
+  import { images } from './imageData/+server.js';
+  let index = 0;
+</script>
+
+<div class="max-w-4xl space-y-4">
+  <Carousel {images} let:Indicators let:Controls bind:index>
+    <Indicators let:selected let:index>
+      <Indicator color={selected ? 'red' : 'green'} class="w-5 h-5  text-white border border-white {selected ? 'opacity-100' : 'opacity-80'}">
+        {index}
+      </Indicator>
+    </Indicators>
+    <Controls let:changeSlide let:ControlButton>
+      <ControlButton name="Previous" forward={false} on:click={changeSlide(false)} class="bg-red-300/50 dark:bg-red-400/50" />
+      <Button pill class="p-2 absolute top-1/2 -translate-y-1/2 right-4 font-bold" on:click={changeSlide(true)}><CaretRightOutline /></Button>
+    </Controls>
+  </Carousel>
+  <Thumbnails class="bg-transparent gap-3" let:Thumbnail let:image let:selected {images} bind:index>
+    <Thumbnail {...image} {selected} class="rounded-md shadow-xl hover:outline hover:outline-primary-500" />
+  </Thumbnails>
+</div>
+```
+
+### Carousel transition
+
+```svelte example
+<script>
+  import { Carousel } from 'flowbite-svelte';
+  import { images } from './imageData/+server.js';
+  import { fly } from 'svelte/transition';
+
+  const myFly = (x) => fly(x, { delay: 250, duration: 900, x: 700 });
+</script>
+
+<div class="max-w-4xl">
+  <Carousel {images} transition={myFly} let:Controls let:Indicators>
+    <Controls />
+    <Indicators />
+  </Carousel>
+</div>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Carousel](https://flowbite.com/docs/components/carousel/)