flowbite-svelte 0.27.15 → 0.27.16

package/src/routes/components/skeleton.md

@@ -1,176 +0,0 @@
----
-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

@@ -1,137 +0,0 @@
----
-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

@@ -1,305 +0,0 @@
----
-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>