flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/components/skeleton.md

@@ -0,0 +1,176 @@
+---
+layout: componentLayout
+title: Svelte Skeleton - Flowbite
+breadcrumb_title: Skeleton
+dir: Components
+description: The skeleton component can be used as an alternative loading indicator to the spinner by mimicking the content that will be loaded such as text, images, or video
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
+  import { props as items }  from '../props/ListPlaceholder.json'
+  import { props as items2 }  from '../props/Skeleton.json'
+  import { props as items3 }  from '../props/TestimonialPlaceholder.json'
+  import { props as items4 }  from '../props/TextPlaceholder.json'
+  import { props as items5 }  from '../props/WidgetPlaceholder.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="skeleton/CardPlaceholder.svelte">CardPlaceholder</GitHubSource>
+<GitHubSource href="skeleton/ImagePlaceholder.svelte">ImagePlaceholder</GitHubSource>
+<GitHubSource href="skeleton/CardPlaceListPlaceholderholder.svelte">ListPlaceholder</GitHubSource>
+<GitHubSource href="skeleton/Skeleton.svelte">Skeleton</GitHubSource>
+<GitHubSource href="skeleton/TestimonialPlaceholder.svelte">TestimonialPlaceholder</GitHubSource>
+<GitHubSource href="skeleton/TextPlaceholder.svelte">TextPlaceholder</GitHubSource>
+<GitHubSource href="skeleton/VideoPlaceholder.svelte">VideoPlaceholder</GitHubSource>
+<GitHubSource href="skeleton/WidgetPlaceholder.svelte">WidgetPlaceholder</GitHubSource>
+</ExampleDiv>
+
+Use the skeleton component to indicate a loading status with placeholder elements that look very similar to the type of content that is being loaded such as paragraphs, heading, images, videos, and more.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { CardPlaceholder, ImagePlaceholder, ListPlaceholder, Skeleton, TestimonialPlaceholder, TextPlaceholder, VideoPlaceholder, WidgetPlaceholder } from 'flowbite-svelte'
+</script>
+```
+
+<Htwo label="Default skeleton" />
+
+```svelte example
+<script>
+  import { Skeleton } from 'flowbite-svelte'
+</script>
+
+<Skeleton />
+```
+
+<Htwo label="Image placeholder " />
+
+```svelte example
+<script>
+  import { ImagePlaceholder } from 'flowbite-svelte'
+</script>
+
+<ImagePlaceholder />
+```
+
+<Htwo label="Video placeholder" />
+
+```svelte example
+<script>
+  import { VideoPlaceholder } from 'flowbite-svelte'
+</script>
+
+<VideoPlaceholder />
+```
+
+<Htwo label="Text placeholder" />
+
+```svelte example
+<script>
+  import { TextPlaceholder } from 'flowbite-svelte'
+</script>
+
+<TextPlaceholder />
+```
+
+<Htwo label="Card placeholder" />
+
+```svelte example
+<script>
+  import { CardPlaceholder } from 'flowbite-svelte'
+</script>
+
+<CardPlaceholder />
+```
+
+<Htwo label="Widget placeholder" />
+
+```svelte example
+<script>
+  import { WidgetPlaceholder } from 'flowbite-svelte'
+</script>
+
+<WidgetPlaceholder />
+```
+
+<Htwo label="List placeholder" />
+
+```svelte example
+<script>
+  import { ListPlaceholder } from 'flowbite-svelte'
+</script>
+
+<ListPlaceholder />
+```
+
+<Htwo label="Testimonial placeholder" />
+
+```svelte example
+<script>
+  import { TestimonialPlaceholder } from 'flowbite-svelte'
+</script>
+
+<TestimonialPlaceholder />
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
+
+<h3 class='text-xl w-full dark:text-white py-4'>ListPlaceholder</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>Skeleton</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items2} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>TestimonialPlaceholder</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items3} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>TextPlaceholder</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items4} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>WidgetPlaceholder</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items5} rowState='hover' />
+</TableProp>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/skeleton/" target="_blank" rel="noreferrer" class="link"
+    >Tailwind CSS Skeleton</A
+  >
+</P>

package/src/routes/components/spinner.md

@@ -0,0 +1,137 @@
+---
+layout: componentLayout
+title: Svelte Spinner - Flowbite
+breadcrumb_title: Spinner
+dir: Components
+description: Use the spinner component as a loader indicator in your projects when fetching data based on an animated SVG
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
+  import { props as items }  from '../props/Spinner.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="spinners/Spinner.svelte">Spinner</GitHubSource>
+</ExampleDiv>
+
+The spinner component can be used as a loading indicator which comes in multiple colors, sizes, and styles separately or inside elements such as buttons to improve the user experience whenever data is being fetched from your server.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+```
+
+<Htwo label="Default spinner"/>
+
+Use the following SVG element to show a loading animation:
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner />
+```
+
+<Htwo label="Colors" />
+
+You can change the colors of the spinner element using the `color` prop.
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner />
+<Spinner color="gray" />
+<Spinner color="green" />
+<Spinner color="red" />
+<Spinner color="yellow" />
+<Spinner color="pink" />
+<Spinner color="purple" />
+```
+
+<Htwo label="Sizes" />
+
+Change the size of the spinner component using the `size` prop.
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<Spinner size={4} />
+<Spinner size={6} />
+<Spinner size={8} />
+```
+
+<Htwo label="Alignment" />
+
+Because the spinner component is an inline HTML element it can easily be aligned on the left, center, or right side using the `text-{left|center|right}` utility classes:
+
+```svelte example hideScript
+<script>
+  import { Spinner } from 'flowbite-svelte';
+</script>
+
+<div class="text-left"><Spinner/></div>
+<div class="text-center"><Spinner/></div>
+<div class="text-right"><Spinner/></div>
+```
+
+<Htwo label="Buttons" />
+
+The spinner component can also be used inside elements such as buttons when submitting form data:
+
+```svelte example
+<script>
+  import { Spinner, Button } from 'flowbite-svelte';
+</script>
+
+<div class="flex flex-wrap items-center gap-2">
+  <Button>
+    <Spinner class="mr-3" size="4" color="white" />
+    Loading ...
+  </Button>
+  <Button outline color="dark">
+    <Spinner class="mr-3" size="4" />
+    Loading ...
+  </Button>
+</div>
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types page</A> for type information.
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/spinner/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Spinner</A>
+</P>

package/src/routes/components/tab.md

@@ -0,0 +1,305 @@
+---
+layout: componentLayout
+title: Svelte Tabs - Flowbite
+breadcrumb_title: Tabs
+dir: Components
+description: Use these responsive tabs components to create a secondary navigational hierarchy for your website or toggle content inside a container
+---
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+<script lang="ts">
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Badge, Heading, P, A } from '$lib'
+  import { props as items }  from '../props/Tabs.json'
+  import { props as items4 }  from '../props/TabItem.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="tabs/Tabs.svelte">Tabs</GitHubSource>
+<GitHubSource href="tabs/TabItem.svelte">TabItem</GitHubSource>
+</ExampleDiv>
+
+The tabs component can be used either as an extra navigational hierarchy complementing the main navbar or you can also use it to change content inside a container just below the tabs using the data attributes from Flowbite.
+
+<Htwo label="Setup" />
+
+```html
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+```
+
+
+<Htwo label="Default tabs" />
+
+Use the following default tabs component example to show a dynamic content in your webpage.
+
+<p class="my-2"/>
+
+If your tab title is a simple string set the `title` property on `TabItem`, otherwise when more control is needed overwrite the `title` slot.
+
+<p class="my-2"/>
+
+The last tab in that example shows not only how to show a disabled tab, but how to use the `title` slot entry as well.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs>
+  <TabItem open title="Profile">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem ttile="Settings">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem title="Users">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem title="Dashboard">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem disabled>
+    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Tabs with underline" />
+
+You can control the style of tabs component by settings the `activeClasses` and `inactiveClasses` on the `TabItem` elements. See the `Custom style` section below for more details.
+
+<p class="my-2"/>
+
+However tabs component comes with several pre-defined styles that are accessible to you by setting the `style` property. This will set the `activeClasses` and `inactiveClasses` properties for you.
+
+<p class="my-2"/>
+
+Use the `style="underline"` to achive this alternative tabs component style with an underline instead of a background when hovering and being active on a certain page.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="underline">
+  <TabItem open title="Profile">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem title="Dashboard">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem title="Settings">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem title="Users">
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem disabled>
+    <span slot="title" class="text-gray-400 dark:text-gray-500">Disabled</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Disabled:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Tabs with icons" />
+
+This is an example of the tabs component where you can also use a SVG powered icon to complement the text within the navigational tabs. 
+Use icon components for a simple syntax. See <a href="/icons">Icons</a> for more details.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="underline">
+  <TabItem open>
+    <div slot="title" class="flex items-center gap-2">
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-6-3a2 2 0 11-4 0 2 2 0 014 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z" clip-rule="evenodd" /></svg>
+      Profile
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 3a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2V5a2 2 0 00-2-2H5zM5 11a2 2 0 00-2 2v2a2 2 0 002 2h2a2 2 0 002-2v-2a2 2 0 00-2-2H5zM11 5a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V5zM11 13a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z" /></svg>
+      Dashboard
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5 4a1 1 0 00-2 0v7.268a2 2 0 000 3.464V16a1 1 0 102 0v-1.268a2 2 0 000-3.464V4zM11 4a1 1 0 10-2 0v1.268a2 2 0 000 3.464V16a1 1 0 102 0V8.732a2 2 0 000-3.464V4zM16 3a1 1 0 011 1v7.268a2 2 0 010 3.464V16a1 1 0 11-2 0v-1.268a2 2 0 010-3.464V4a1 1 0 011-1z" /></svg>
+      Settings
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <div slot="title" class="flex items-center gap-2">
+      <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M9 2a1 1 0 000 2h2a1 1 0 100-2H9z" /><path fill-rule="evenodd" d="M4 5a2 2 0 012-2 3 3 0 003 3h2a3 3 0 003-3 2 2 0 012 2v11a2 2 0 01-2 2H6a2 2 0 01-2-2V5zm3 4a1 1 0 000 2h.01a1 1 0 100-2H7zm3 0a1 1 0 000 2h3a1 1 0 100-2h-3zm-3 4a1 1 0 100 2h.01a1 1 0 100-2H7zm3 0a1 1 0 100 2h3a1 1 0 100-2h-3z" clip-rule="evenodd" /></svg>
+      Contacts
+    </div>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Contacts:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Pills tabs" />
+
+If you want to use pills as a style for the tabs component use `style="pill"`.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="pill">
+  <TabItem open>
+    <span slot="title">Profile</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Full width tabs" />
+
+If you want to show the tabs on the full width relative to the parent element use `tabStype="full"` prop.
+
+```svelte example
+<script>
+  import { Tabs, TabItem } from 'flowbite-svelte';
+</script>
+
+<Tabs style="full" defaultClass="flex rounded-lg divide-x divide-gray-200 shadow dark:divide-gray-700">
+  <TabItem class="w-full" open>
+    <span slot="title">Profile</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Profile:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem class="w-full">
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Components in tab contents" />
+
+You can add other components to the `TabItem` component. Here we are adding a timeline component in the tab 1:
+
+```svelte example class="h-auto"
+<script>
+  import { Tabs, TabItem, Timeline, TimelineItem, Button } from 'flowbite-svelte';
+</script>
+
+<Tabs >
+  <TabItem open>
+    <span slot="title">Profile</span>
+    <Timeline>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="February 2022">
+        <p class="mb-4 text-base font-normal text-gray-500 dark:text-gray-400">
+          Get access to over 20+ pages including a dashboard layout, charts, kanban board, calendar,
+          and pre-order E-commerce & Marketing pages.
+        </p>
+        <Button color="alternative">Learn more
+          <svg class="ml-2 w-3 h-3" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
+        </Button>
+      </TimelineItem>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="March 2022">
+        <p class="text-base font-normal text-gray-500 dark:text-gray-400">All of the pages and components are first designed in Figma and we keep a parity between the two versions even as we update the project.</p>
+      </TimelineItem>
+      <TimelineItem title="Application UI code in Tailwind CSS" date="April 2022">
+        <p class="text-base font-normal text-gray-500 dark:text-gray-400">Get started with dozens of web components and interactive elements built on top of Tailwind CSS.</p>
+      </TimelineItem>
+    </Timeline>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Dashboard</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Dashboard:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Settings</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Settings:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+  <TabItem>
+    <span slot="title">Users</span>
+    <p class="text-sm text-gray-500 dark:text-gray-400"><b>Users:</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+  </TabItem>
+</Tabs>
+```
+
+<Htwo label="Custom style" />
+
+To get a custom look and feel for the `Tabs` component, do not set `style` prop, but set `activeClasses` and `inactiveClasses` properties either on the `Tabs` component or on the individual `TabItem` components.
+
+<Htwo label="Props" />
+
+<p>The component has the following props, type, and default values. See <A href="/pages/types">types 
+ page</A> for type information.</p>
+
+<h3 class='text-xl w-full dark:text-white py-4'>Tabs</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>TabItem</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items4} rowState='hover' />
+</TableProp>
+
+<Htwo label="Forwarded Events: TabItem" />
+
+<div class="flex flex-wrap gap-2">
+<Badge large>on:blur</Badge>
+<Badge large>on:click</Badge>
+<Badge large>on:focus</Badge>
+<Badge large>on:keydown</Badge>
+<Badge large>on:keypress</Badge>
+<Badge large>on:keyup</Badge>
+<Badge large>on:mouseenter</Badge>
+<Badge large>on:mouseleave</Badge>
+<Badge large>on:mouseover</Badge>
+</div>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/tabs/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Tabs</A>
+</P>