flowbite-svelte 0.44.7 → 0.44.9

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

@@ -0,0 +1,342 @@
+---
+layout: componentLayout
+title: Svelte Navbar - Flowbite
+breadcrumb_title: Svelte Navbar
+component_title: Navbar
+dir: Components
+description: The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
+---
+
+<script>
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, Heading, P, A } from '$lib';
+
+  const components = 'Navbar, NavBrand, NavLi, NavUl, NavHamburger, Menu, SidebarMenu'
+</script>
+
+Get started with the responsive navbar component from Flowbite to quickly set up a navigation menu for your website and set up the logo, list of pages, CTA button, search input, user profile options with a dropdown, and more.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+</script>
+```
+
+## Default navbar
+
+Use this example of a navigation bar built with the utility classes from Tailwind CSS to enable users to navigate across the pages of your website.
+
+```svelte example hideScript
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/">Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Active class
+
+Utilize the `href` prop within the `NavLi` component to incorporate a hyperlink. To initiate the application of the active class, include the `activeUrl` prop within the `NavUl` component:
+
+```svelte example
+<script>
+  import { page } from '$app/stores';
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+  $: activeUrl = $page.url.pathname;
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {activeUrl} {hidden}>
+    <NavLi href="/">Home</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/docs/components/accordion">Accordion</NavLi>
+    <NavLi href="/docs/components/alert">Alert</NavLi>
+    <NavLi href="/docs/components/avatar">Avatar</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+Control the `active` and `nonactive` class by using `activeClass` and `nonActiveClass`:
+
+```svelte example
+<script>
+  import { page } from '$app/stores';
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+  $: activeUrl = $page.url.pathname;
+  let activeClass = 'text-white bg-green-700 md:bg-transparent md:text-green-700 md:dark:text-white dark:bg-green-600 md:dark:bg-transparent';
+  let nonActiveClass = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-green-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent';
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {activeUrl} {hidden} {activeClass} {nonActiveClass}>
+    <NavLi href="/">Home</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/docs/components/accordion">Accordion</NavLi>
+    <NavLi href="/docs/components/alert">Alert</NavLi>
+    <NavLi href="/docs/components/avatar">Avatar</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Navbar with dropdown
+
+This example can be used to show a secondary dropdown menu when clicking on one of the navigation links.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Dropdown, DropdownItem, DropdownDivider } from 'flowbite-svelte';
+  import { ChevronDownOutline } from 'flowbite-svelte-icons';
+  import { page } from '$app/stores';
+  $: activeUrl = $page.url.pathname;
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden} {activeUrl}>
+    <NavLi href="/">Home</NavLi>
+    <NavLi id="nav-menu1" class="cursor-pointer">
+      Dropdown<ChevronDownOutline class="w-3 h-3 ml-2 text-primary-800 dark:text-white inline" />
+    </NavLi>
+    <NavLi href="/settings">Setting</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+    <Dropdown triggeredBy="#nav-menu1" class="w-44 z-20">
+      <DropdownItem href="/">Dashboard</DropdownItem>
+      <DropdownItem href="/docs/components/navbar">Settings</DropdownItem>
+      <DropdownItem href="/">Earnings</DropdownItem>
+      <DropdownDivider />
+      <DropdownItem href="/">Sign out</DropdownItem>
+    </Dropdown>
+  </NavUl>
+</Navbar>
+```
+
+## Navbar with search
+
+Use this example of a navbar element to also show a search input element that you can integrate for a site-wide search.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte';
+  import { SearchOutline } from 'flowbite-svelte-icons';
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <div class="flex md:order-2">
+    <Button color="none" data-collapse-toggle="mobile-menu-3" aria-controls="mobile-menu-3" aria-expanded="false" class="md:hidden text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 focus:outline-none focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-700 rounded-lg text-sm p-2.5 mr-1">
+      <SearchOutline class="w-5 h-5" />
+    </Button>
+    <div class="hidden relative md:block">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <SearchOutline class="w-4 h-4" />
+      </div>
+      <Input id="search-navbar" class="pl-10" placeholder="Search..." />
+    </div>
+    <NavHamburger on:click={toggle} />
+  </div>
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Navbar with CTA button
+
+Use the following navbar element to show a call to action button alongside the logo and page links.
+
+```svelte example class="h-80 md:h-64"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Button, Input } from 'flowbite-svelte';
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <div class="flex md:order-2">
+    <Button size="sm">Get started</Button>
+    <NavHamburger on:click={toggle} />
+  </div>
+  <NavUl {hidden} class="order-1">
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Sticky navbar
+
+Use this example to keep the navbar positioned fixed to the top side as you scroll down the document page.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, ImagePlaceholder, Skeleton, TextPlaceholder } from 'flowbite-svelte';
+</script>
+
+<div class="relative px-8">
+  <Navbar navClass="px-2 sm:px-4 py-2.5 absolute w-full z-20 top-0 left-0 border-b" let:hidden let:toggle>
+    <NavBrand href="/">
+      <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+      <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+    </NavBrand>
+    <NavHamburger on:click={toggle} />
+    <NavUl {hidden}>
+      <NavLi href="/" active={true}>Home</NavLi>
+      <NavLi href="/about">About</NavLi>
+      <NavLi href="/docs/components/navbar">Navbar</NavLi>
+      <NavLi href="/pricing">Pricing</NavLi>
+      <NavLi href="/contact">Contact</NavLi>
+    </NavUl>
+  </Navbar>
+  <div style="height:300px;" class="overflow-scroll pb-16">
+    <Skeleton class="mt-16 mb-8" />
+    <ImagePlaceholder class="my-8" />
+    <TextPlaceholder class="my-8" />
+  </div>
+</div>
+```
+
+## User menu dropdown
+
+Use this example to create a navigation bar with a user profile or button to toggle a dropdown menu.
+
+```svelte example class="h-80"
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger, Avatar, Dropdown, DropdownItem, DropdownHeader, DropdownDivider } from 'flowbite-svelte';
+</script>
+
+<Navbar let:hidden let:toggle>
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <div class="flex items-center md:order-2">
+    <Avatar id="avatar-menu" src="/images/profile-picture-3.webp" />
+    <NavHamburger on:click={toggle} class1="w-full md:flex md:w-auto md:order-1" />
+  </div>
+  <Dropdown placement="bottom" triggeredBy="#avatar-menu">
+    <DropdownHeader>
+      <span class="block text-sm">Bonnie Green</span>
+      <span class="block truncate text-sm font-medium">name@flowbite.com</span>
+    </DropdownHeader>
+    <DropdownItem>Dashboard</DropdownItem>
+    <DropdownItem>Settings</DropdownItem>
+    <DropdownItem>Earnings</DropdownItem>
+    <DropdownDivider />
+    <DropdownItem>Sign out</DropdownItem>
+  </Dropdown>
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Solid background
+
+Use this example to show a solid background for the navbar component instead of being transparent.
+
+```svelte example
+<script>
+  import { Navbar, NavBrand, NavLi, NavUl, NavHamburger } from 'flowbite-svelte';
+</script>
+
+<Navbar let:hidden let:toggle rounded color="form">
+  <NavBrand href="/">
+    <img src="/images/flowbite-svelte-icon-logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />
+    <span class="self-center whitespace-nowrap text-xl font-semibold dark:text-white">Flowbite</span>
+  </NavBrand>
+  <NavHamburger on:click={toggle} />
+  <NavUl {hidden}>
+    <NavLi href="/" active={true}>Home</NavLi>
+    <NavLi href="/about">About</NavLi>
+    <NavLi href="/docs/components/navbar">Navbar</NavLi>
+    <NavLi href="/pricing">Pricing</NavLi>
+    <NavLi href="/contact">Contact</NavLi>
+  </NavUl>
+</Navbar>
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Navbar styling
+
+- Use the `class` prop to overwrite `navClass`.
+- Use the `classNavDiv` prop to overwrite `navDivClass`.
+
+### NavBrand styling
+
+- Use the `class` prop to overwrite the `a` tag class.
+
+### NavHamburger styling
+
+- Use the `class` prop to overwrite `btnClass`.
+- Use the `classMenu` prop to overwrite `menuClass`.
+
+### NavLi styling
+
+- Use the `class` prop to overwrite the `li` tag.
+
+### NavUl styling
+
+- Use the `class` prop to overwrite the `div` tag.
+- Use the `classUl` prop to overwrite the `ul` tag.
+
+### Menu styling
+
+- Use the `class` prop to overwrite the `svg` tag class.
+
+### SidebarMenu styling
+
+- Use the `class` prop to overwrite the outer class.
+- Use the `classSideMenu` prop to overwrite the inner class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Navbar](https://flowbite.com/docs/components/navbar/)

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

@@ -0,0 +1,350 @@
+---
+layout: componentLayout
+title: Svelte Pagination - Flowbite
+breadcrumb_title: Svelte Pagination
+component_title: Pagination
+dir: Components
+description: Use the Tailwind CSS pagination element to indicate a series of content across various pages
+thumnailSize: w-48
+---
+
+<script lang="ts">
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, DocBadgeList } from '../../utils'
+  import { Badge, Heading, P, A } from '$lib'
+
+  const components = 'Pagination, PaginationItem'
+</script>
+
+The pagination component can be used to navigate across a series of content and data sets for various pages such as blog posts, products, and more. You can use multiple variants of this component with or without icons and even for paginating table data entries.
+
+## Setup
+
+```svelte example hideOutput
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte';
+</script>
+```
+
+## Default pagination
+
+Use the following list of pagination items to indicate a series of content for your website.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { page } from '$app/stores';
+  import { Pagination } from 'flowbite-svelte';
+
+  $: activeUrl = $page.url.searchParams.get('page');
+  let pages = [
+    { name: 1, href: '/components/pagination?page=1' },
+    { name: 2, href: '/components/pagination?page=2' },
+    { name: 3, href: '/components/pagination?page=3' },
+    { name: 4, href: '/components/pagination?page=4' },
+    { name: 5, href: '/components/pagination?page=5' }
+  ];
+
+  $: {
+    pages.forEach((page) => {
+      let splitUrl = page.href.split('?');
+      let queryString = splitUrl.slice(1).join('?');
+      const hrefParams = new URLSearchParams(queryString);
+      let hrefValue = hrefParams.get('page');
+      if (hrefValue === activeUrl) {
+        page.active = true;
+      } else {
+        page.active = false;
+      }
+    });
+    pages = pages;
+  }
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<Pagination {pages} on:previous={previous} on:next={next} />
+<Pagination {pages} large on:previous={previous} on:next={next} />
+```
+
+## Pagination with icons
+
+The following pagination component example shows how you can use SVG icons instead of text to show the previous and next pages.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { page } from '$app/stores';
+  import { Pagination } from 'flowbite-svelte';
+  import { ChevronLeftOutline, ChevronRightOutline } from 'flowbite-svelte-icons';
+
+  $: activeUrl = $page.url.searchParams.get('page');
+  let pages = [
+    { name: 6, href: '/components/pagination?page=6' },
+    { name: 7, href: '/components/pagination?page=7' },
+    { name: 8, href: '/components/pagination?page=8' },
+    { name: 9, href: '/components/pagination?page=9' },
+    { name: 10, href: '/components/pagination?page=10' }
+  ];
+
+  $: {
+    pages.forEach((page) => {
+      let splitUrl = page.href.split('?');
+      let queryString = splitUrl.slice(1).join('?');
+      const hrefParams = new URLSearchParams(queryString);
+      let hrefValue = hrefParams.get('page');
+      if (hrefValue === activeUrl) {
+        page.active = true;
+      } else {
+        page.active = false;
+      }
+    });
+    pages = pages;
+  }
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<Pagination {pages} on:previous={previous} on:next={next} icon>
+  <svelte:fragment slot="prev">
+    <span class="sr-only">Previous</span>
+    <ChevronLeftOutline class="w-2.5 h-2.5" />
+  </svelte:fragment>
+  <svelte:fragment slot="next">
+    <span class="sr-only">Next</span>
+    <ChevronRightOutline class="w-2.5 h-2.5" />
+  </svelte:fragment>
+</Pagination>
+
+<Pagination {pages} large on:previous={previous} on:next={next} icon>
+  <svelte:fragment slot="prev">
+    <span class="sr-only">Previous</span>
+    <ChevronLeftOutline class="w-3 h-3" />
+  </svelte:fragment>
+  <svelte:fragment slot="next">
+    <span class="sr-only">Next</span>
+    <ChevronRightOutline class="w-3 h-3" />
+  </svelte:fragment>
+</Pagination>
+```
+
+## Previous and next
+
+Use the following markup to show simple previous and next elements.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte';
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex space-x-3">
+  <PaginationItem on:click={previous}>Previous</PaginationItem>
+  <PaginationItem on:click={next}>Next</PaginationItem>
+</div>
+<div class="flex space-x-3">
+  <PaginationItem large on:click={previous}>Previous</PaginationItem>
+  <PaginationItem large on:click={next}>Next</PaginationItem>
+</div>
+```
+
+## Previous and next with icons
+
+Use the following code to show simple previous and next elements with icons.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte';
+  import { ArrowLeftSolid, ArrowRightSolid } from 'flowbite-svelte-icons';
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex space-x-3">
+  <PaginationItem class="flex items-center" on:click={previous}>
+    <ArrowLeftSolid class="mr-2 w-3.5 h-3.5" />
+    Previous
+  </PaginationItem>
+  <PaginationItem class="flex items-center" on:click={next}>
+    Next
+    <ArrowRightSolid class="ml-2 w-3.5 h-3.5" />
+  </PaginationItem>
+</div>
+<div class="flex space-x-3">
+  <PaginationItem large class="flex items-center" on:click={previous}>
+    <ArrowLeftSolid class="mr-2 w-5 h-5" />
+    Previous
+  </PaginationItem>
+  <PaginationItem large class="flex items-center" on:click={next}>
+    Next
+    <ArrowRightSolid class="ml-2 w-5 h-5" />
+  </PaginationItem>
+</div>
+```
+
+## Table data pagination
+
+You can use the following markup to show the number of data shown inside a table element and also the previous and next action buttons.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { Pagination, PaginationItem } from 'flowbite-svelte';
+
+  let helper = { start: 1, end: 10, total: 100 };
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center gap-2">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
+    to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
+    Entries
+  </div>
+
+  <Pagination table>
+    <span slot="prev">Prev</span>
+  </Pagination>
+</div>
+<div class="flex flex-col items-center justify-center gap-2">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
+    to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
+    Entries
+  </div>
+
+  <Pagination table large>
+    <span slot="prev">Prev</span>
+  </Pagination>
+</div>
+```
+
+## Table data pagination with icons
+
+You can use the following code to show the number of data shown inside a table element and also the previous and next action buttons coupled with icons.
+
+```svelte example class="flex flex-col justify-center items-center gap-3"
+<script>
+  import { Pagination } from 'flowbite-svelte';
+  import { ArrowLeftOutline, ArrowRightOutline } from 'flowbite-svelte-icons';
+  let helper = { start: 1, end: 10, total: 100 };
+
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+</script>
+
+<div class="flex flex-col items-center justify-center gap-2">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
+    to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
+    Entries
+  </div>
+
+  <Pagination table>
+    <div slot="prev" class="flex items-center gap-2 text-white bg-gray-800">
+      <ArrowLeftOutline class="w-3.5 h-3.5 mr-2" />
+      Prev
+    </div>
+    <div slot="next" class="flex items-center gap-2 text-white bg-gray-800">
+      Next
+      <ArrowRightOutline class="w-3.5 h-3.5 ml-2" />
+    </div>
+  </Pagination>
+</div>
+<div class="flex flex-col items-center justify-center gap-2">
+  <div class="text-sm text-gray-700 dark:text-gray-400">
+    Showing <span class="font-semibold text-gray-900 dark:text-white">{helper.start}</span>
+    to
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.end}</span>
+    of
+    <span class="font-semibold text-gray-900 dark:text-white">{helper.total}</span>
+    Entries
+  </div>
+
+  <Pagination table large>
+    <div slot="prev" class="flex items-center gap-2 text-white bg-gray-800">
+      <ArrowLeftOutline class="w-3.5 h-3.5 mr-2" />
+      Prev
+    </div>
+    <div slot="next" class="flex items-center gap-2 text-white bg-gray-800">
+      Next
+      <ArrowRightOutline class="w-3.5 h-3.5 mr-2" />
+    </div>
+  </Pagination>
+</div>
+```
+
+## Event example
+
+```svelte example class="flex justify-center"
+<script lang="ts">
+  import { Pagination } from 'flowbite-svelte';
+
+  let pages = [{ name: "1"}, { name: "2" }, { name: "3" }, { name: "4" }, { name: "5" }];
+  const previous = () => {
+    alert('Previous btn clicked. Make a call to your server to fetch data.');
+  };
+  const next = () => {
+    alert('Next btn clicked. Make a call to your server to fetch data.');
+  };
+  const handleClick = () => {
+    alert('Page clicked');
+  };
+</script>
+
+<Pagination {pages} on:previous={previous} on:next={next} on:click={handleClick} />
+```
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+### Pagination styling
+
+- Use the `class` prop to overwrite the `ul` tag class.
+- Use the `classNormal` prop to overwrite `normalClass`.
+- Use the `classActive` prop to overwrite `activeClass`.
+
+### PaginationItem styling
+
+- Use the `class` prop to overwrite the default class.
+
+<CompoAttributesViewer {components}/>
+
+## References
+
+- [Flowbite Pagination](https://flowbite.com/docs/components/pagination/)