diff --git a/.changeset/nasty-books-return.md b/.changeset/nasty-books-return.md
new file mode 100644
index 0000000..e7e4b8b
--- /dev/null
+++ b/.changeset/nasty-books-return.md
@@ -0,0 +1,5 @@
+---
+'@jeanne-mas/svelte-ui': patch
+---
+
+Added pagination component
diff --git a/package.json b/package.json
index 998019b..f62ad6d 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
     "formsnap": "^1.0.0",
     "lucide-svelte": "^0.368.0",
     "mode-watcher": "^0.3.0",
+    "svelte-legos": "^0.2.2",
     "svelte-sonner": "^0.3.22",
     "sveltekit-superforms": "^2.12.5",
     "tailwind-merge": "^2.2.2",
@@ -94,6 +95,10 @@
       "types": "./dist/components/label/index.d.ts",
       "svelte": "./dist/components/label/index.js"
     },
+    "./components/pagination": {
+      "types": "./dist/components/pagination/index.d.ts",
+      "svelte": "./dist/components/pagination/index.js"
+    },
     "./components/popover": {
       "types": "./dist/components/popover/index.d.ts",
       "svelte": "./dist/components/popover/index.js"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1eed71e..e4538d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -29,6 +29,9 @@ importers:
       mode-watcher:
         specifier: ^0.3.0
         version: 0.3.0(svelte@4.2.12)
+      svelte-legos:
+        specifier: ^0.2.2
+        version: 0.2.2(svelte@4.2.12)
       svelte-sonner:
         specifier: ^0.3.22
         version: 0.3.22(svelte@4.2.12)
@@ -885,6 +888,9 @@ packages:
   caniuse-lite@1.0.30001605:
     resolution: {integrity: sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==}
 
+  canvas-confetti@1.9.3:
+    resolution: {integrity: sha512-rFfTURMvmVEX1gyXFgn5QMn81bYk70qa0HLzcIOSVEyl57n6o9ItHeBtUSWdvKAPY0xlvBHno4/v3QPrT83q9g==}
+
   chai@4.4.1:
     resolution: {integrity: sha512-13sOfMv2+DWduEU+/xbun3LScLoqN17nBeTLUsmDfKdoiC1fr0n9PU4guu4AhRcOVFk/sW8LyZWHuhWtQZiF+g==}
     engines: {node: '>=4'}
@@ -2130,6 +2136,13 @@ packages:
     resolution: {integrity: sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
 
+  prism-svelte@0.5.0:
+    resolution: {integrity: sha512-db91Bf3pRGKDPz1lAqLFSJXeW13mulUJxhycysFpfXV5MIK7RgWWK2E5aPAa71s8TCzQUXxF5JOV42/iOs6QkA==}
+
+  prismjs@1.29.0:
+    resolution: {integrity: sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==}
+    engines: {node: '>=6'}
+
   property-expr@2.0.6:
     resolution: {integrity: sha512-SVtmxhRE/CGkn3eZY1T6pC8Nln6Fr/lu1mKSgRud0eC73whjGfoAogbn78LkD8aFL0zz3bAFerKSnOl7NlErBA==}
 
@@ -2421,6 +2434,11 @@ packages:
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
 
+  svelte-legos@0.2.2:
+    resolution: {integrity: sha512-HTVkCIqhrxdy+OpXjxGr/4xIJEGv4d2cRQwTjm0SYfLw/YF1I1l/TQR59nb2WvjccnO8TNFNTvAWP5pgXQnU+w==}
+    peerDependencies:
+      svelte: ^4.0.0
+
   svelte-preprocess@5.1.3:
     resolution: {integrity: sha512-xxAkmxGHT+J/GourS5mVJeOXZzne1FR5ljeOUAMXUkfEhkLEllRreXpbl3dIYJlcJRfL1LO1uIAPpBpBfiqGPw==}
     engines: {node: '>= 16.0.0', pnpm: ^8.0.0}
@@ -3651,6 +3669,8 @@ snapshots:
 
   caniuse-lite@1.0.30001605: {}
 
+  canvas-confetti@1.9.3: {}
+
   chai@4.4.1:
     dependencies:
       assertion-error: 1.1.0
@@ -4918,6 +4938,10 @@ snapshots:
       ansi-styles: 5.2.0
       react-is: 18.2.0
 
+  prism-svelte@0.5.0: {}
+
+  prismjs@1.29.0: {}
+
   property-expr@2.0.6:
     optional: true
 
@@ -5272,6 +5296,13 @@ snapshots:
     dependencies:
       svelte: 4.2.12
 
+  svelte-legos@0.2.2(svelte@4.2.12):
+    dependencies:
+      canvas-confetti: 1.9.3
+      prism-svelte: 0.5.0
+      prismjs: 1.29.0
+      svelte: 4.2.12
+
   svelte-preprocess@5.1.3(postcss-load-config@5.0.3(jiti@1.21.0)(postcss@8.4.38))(postcss@8.4.38)(svelte@4.2.12)(typescript@5.4.4):
     dependencies:
       '@types/pug': 2.0.10
diff --git a/src/lib/components/alert-dialog/AlertDialogAction.svelte b/src/lib/components/alert-dialog/AlertDialogAction.svelte
index e7a65b4..f7f9c68 100644
--- a/src/lib/components/alert-dialog/AlertDialogAction.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogAction.svelte
@@ -89,6 +89,8 @@
     variant,
   })}"
   el="{el}"
+  data-size="{size}"
+  data-variant="{variant}"
   let:builder
   on:click
   on:keydown
diff --git a/src/lib/components/alert-dialog/AlertDialogCancel.svelte b/src/lib/components/alert-dialog/AlertDialogCancel.svelte
index a18f999..52db964 100644
--- a/src/lib/components/alert-dialog/AlertDialogCancel.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogCancel.svelte
@@ -92,6 +92,8 @@
     size,
     variant,
   })}"
+  data-size="{size}"
+  data-variant="{variant}"
   el="{el}"
   let:builder
   on:click
diff --git a/src/lib/components/alert-dialog/AlertDialogFooter.svelte b/src/lib/components/alert-dialog/AlertDialogFooter.svelte
index 8710601..8f6af45 100644
--- a/src/lib/components/alert-dialog/AlertDialogFooter.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogFooter.svelte
@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>
diff --git a/src/lib/components/alert-dialog/AlertDialogHeader.svelte b/src/lib/components/alert-dialog/AlertDialogHeader.svelte
index 585e2d1..fa680b1 100644
--- a/src/lib/components/alert-dialog/AlertDialogHeader.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogHeader.svelte
@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>
diff --git a/src/lib/components/alert-dialog/AlertDialogPortal.svelte b/src/lib/components/alert-dialog/AlertDialogPortal.svelte
index a069173..7be77e4 100644
--- a/src/lib/components/alert-dialog/AlertDialogPortal.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogPortal.svelte
@@ -22,7 +22,7 @@
    * The styles of the portal.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/alert-dialog/AlertDialogTrigger.svelte b/src/lib/components/alert-dialog/AlertDialogTrigger.svelte
index 308c71f..f5fa054 100644
--- a/src/lib/components/alert-dialog/AlertDialogTrigger.svelte
+++ b/src/lib/components/alert-dialog/AlertDialogTrigger.svelte
@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/alert/AlertRoot.svelte b/src/lib/components/alert/AlertRoot.svelte
index 39a6afd..5acf323 100644
--- a/src/lib/components/alert/AlertRoot.svelte
+++ b/src/lib/components/alert/AlertRoot.svelte
@@ -84,6 +84,7 @@
     variant,
   })}"
   role="alert"
+  data-variant="{variant}"
 >
   <slot />
 </div>
diff --git a/src/lib/components/breadcrumb/BreadcrumbList.svelte b/src/lib/components/breadcrumb/BreadcrumbList.svelte
index 5ffb1e9..032f3f5 100644
--- a/src/lib/components/breadcrumb/BreadcrumbList.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbList.svelte
@@ -74,6 +74,7 @@
   type $$Slots = Slots;
 
   export let asChild: Props['asChild'] = undefined;
+  export let breakpoint: Props['breakpoint'] = undefined;
   export let el: Props['el'] = undefined;
 
   $: attributes = $$restProps as Attributes;
@@ -88,8 +89,10 @@
   <ol
     {...attributes}
     class="{styles({
+      breakpoint,
       class: attributes.class,
     })}"
+    data-breakpoint="{breakpoint}"
     bind:this="{el}"
   >
     <slot />
diff --git a/src/lib/components/breadcrumb/BreadcrumbRoot.svelte b/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
index 80ee791..4c19223 100644
--- a/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
+++ b/src/lib/components/breadcrumb/BreadcrumbRoot.svelte
@@ -31,7 +31,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/button/Button.svelte b/src/lib/components/button/Button.svelte
index e468bba..196425f 100644
--- a/src/lib/components/button/Button.svelte
+++ b/src/lib/components/button/Button.svelte
@@ -112,6 +112,8 @@
     size,
     variant,
   })}"
+  data-size="{size}"
+  data-variant="{variant}"
   on:click
   on:keydown
 >
diff --git a/src/lib/components/calendar/CalendarGridBody.svelte b/src/lib/components/calendar/CalendarGridBody.svelte
index 3a63ba8..2bd9ae7 100644
--- a/src/lib/components/calendar/CalendarGridBody.svelte
+++ b/src/lib/components/calendar/CalendarGridBody.svelte
@@ -22,7 +22,7 @@
    * The styles of the grid body.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/calendar/CalendarGridHead.svelte b/src/lib/components/calendar/CalendarGridHead.svelte
index c3e1628..ca654f0 100644
--- a/src/lib/components/calendar/CalendarGridHead.svelte
+++ b/src/lib/components/calendar/CalendarGridHead.svelte
@@ -22,7 +22,7 @@
    * The styles of the grid head.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/calendar/CalendarMonths.svelte b/src/lib/components/calendar/CalendarMonths.svelte
index c2e20d6..c310542 100644
--- a/src/lib/components/calendar/CalendarMonths.svelte
+++ b/src/lib/components/calendar/CalendarMonths.svelte
@@ -78,6 +78,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>
diff --git a/src/lib/components/collapsible/CollapsibleContent.svelte b/src/lib/components/collapsible/CollapsibleContent.svelte
index d89eccf..47480d9 100644
--- a/src/lib/components/collapsible/CollapsibleContent.svelte
+++ b/src/lib/components/collapsible/CollapsibleContent.svelte
@@ -34,7 +34,7 @@
    * The styles of the collapsible.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/collapsible/CollapsibleRoot.svelte b/src/lib/components/collapsible/CollapsibleRoot.svelte
index ae1a453..3df482e 100644
--- a/src/lib/components/collapsible/CollapsibleRoot.svelte
+++ b/src/lib/components/collapsible/CollapsibleRoot.svelte
@@ -22,7 +22,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/collapsible/CollapsibleTrigger.svelte b/src/lib/components/collapsible/CollapsibleTrigger.svelte
index 2526c70..515abb3 100644
--- a/src/lib/components/collapsible/CollapsibleTrigger.svelte
+++ b/src/lib/components/collapsible/CollapsibleTrigger.svelte
@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/container/Container.svelte b/src/lib/components/container/Container.svelte
index dfcef77..c520a7e 100644
--- a/src/lib/components/container/Container.svelte
+++ b/src/lib/components/container/Container.svelte
@@ -69,6 +69,8 @@
     xAxis,
     yAxis,
   })}"
+  data-x-axis="{xAxis}"
+  data-y-axis="{yAxis}"
 >
   <slot />
 </div>
diff --git a/src/lib/components/form/FormRoot.svelte b/src/lib/components/form/FormRoot.svelte
index 29dae2d..5767421 100644
--- a/src/lib/components/form/FormRoot.svelte
+++ b/src/lib/components/form/FormRoot.svelte
@@ -35,7 +35,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/input/Input.svelte b/src/lib/components/input/Input.svelte
index 8ac2d5a..79c8017 100644
--- a/src/lib/components/input/Input.svelte
+++ b/src/lib/components/input/Input.svelte
@@ -95,6 +95,7 @@
     class="{styles({
       class: attributes.class,
     })}"
+    data-variant="{variant}"
     bind:value="{value}"
     on:blur
     on:change
@@ -118,6 +119,7 @@
     class="{styles({
       class: attributes.class,
     })}"
+    data-variant="{variant}"
     bind:value="{value}"
     on:blur
     on:change
diff --git a/src/lib/components/pagination/PaginationContent.svelte b/src/lib/components/pagination/PaginationContent.svelte
new file mode 100644
index 0000000..c532436
--- /dev/null
+++ b/src/lib/components/pagination/PaginationContent.svelte
@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { Events, Slot } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the content.
+   */
+  export type Attributes = SvelteHTMLElements['ul'];
+  /**
+   * The props of the content.
+   */
+  export type Props = Record<never, never>;
+  /**
+   * The slots of the content.
+   */
+  export type Slots = {
+    default: Slot;
+  };
+
+  /**
+   * The styles of the content.
+   */
+  export const styles = tv({
+    base: ['flex flex-row items-center gap-1'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<ul
+  {...attributes}
+  class="{styles({
+    class: attributes.class,
+  })}"
+>
+  <slot />
+</ul>
diff --git a/src/lib/components/pagination/PaginationEllipsis.svelte b/src/lib/components/pagination/PaginationEllipsis.svelte
new file mode 100644
index 0000000..efb7f66
--- /dev/null
+++ b/src/lib/components/pagination/PaginationEllipsis.svelte
@@ -0,0 +1,54 @@
+<script context="module" lang="ts">
+  import Ellipsis from 'lucide-svelte/icons/ellipsis';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { Events, Slot } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the ellipsis.
+   */
+  export type Attributes = SvelteHTMLElements['span'];
+  /**
+   * The props of the ellipsis.
+   */
+  export type Props = Record<never, never>;
+  /**
+   * The slots of the ellipsis.
+   */
+  export type Slots = {
+    default: Slot;
+  };
+
+  /**
+   * The styles of the ellipsis.
+   */
+  export const styles = tv({
+    base: ['flex h-9 w-9 items-center justify-center'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<span
+  {...attributes}
+  class="{styles({
+    class: attributes.class,
+  })}"
+  aria-hidden="true"
+>
+  <slot>
+    <Ellipsis class="h-4 w-4" />
+
+    <span class="sr-only">More pages</span>
+  </slot>
+</span>
diff --git a/src/lib/components/pagination/PaginationItem.svelte b/src/lib/components/pagination/PaginationItem.svelte
new file mode 100644
index 0000000..8f4379c
--- /dev/null
+++ b/src/lib/components/pagination/PaginationItem.svelte
@@ -0,0 +1,48 @@
+<script context="module" lang="ts">
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { Events, Slot } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the item.
+   */
+  export type Attributes = SvelteHTMLElements['li'];
+  /**
+   * The props of the item.
+   */
+  export type Props = Record<never, never>;
+  /**
+   * The slots of the item.
+   */
+  export type Slots = {
+    default: Slot;
+  };
+
+  /**
+   * The styles of the item.
+   */
+  export const styles = tv({
+    base: [] as string[],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<li
+  {...attributes}
+  class="{styles({
+    class: attributes.class,
+  })}"
+>
+  <slot />
+</li>
diff --git a/src/lib/components/pagination/PaginationLink.svelte b/src/lib/components/pagination/PaginationLink.svelte
new file mode 100644
index 0000000..d1b550f
--- /dev/null
+++ b/src/lib/components/pagination/PaginationLink.svelte
@@ -0,0 +1,70 @@
+<script context="module" lang="ts">
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import {
+    styles as buttonStyles,
+    type Props as ButtonProps,
+  } from '$lib/components/button/index.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the link.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the link.
+   */
+  export type Props = Omit<PaginationPrimitive.PageProps, keyof Attributes> &
+    Omit<ButtonProps, 'variant'> & {
+      isActive?: boolean;
+    };
+  /**
+   * The slots of the link.
+   */
+  export type Slots = ComponentSlots<PaginationPrimitive.Page>;
+
+  /**
+   * The styles of the link.
+   */
+  export const styles = tv({
+    ...buttonStyles,
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events<PaginationPrimitive.PageEvents>;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let asChild: Props['asChild'] = undefined;
+  export let el: Props['el'] = undefined;
+  export let isActive: Props['isActive'] = undefined;
+  export let page: Props['page'];
+  export let size: Props['size'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+  $: variant = isActive ? ('outline' as const) : ('ghost' as const);
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<PaginationPrimitive.Page
+  {...attributes}
+  asChild="{asChild}"
+  class="{styles({
+    class: attributes.class,
+    size,
+    variant,
+  })}"
+  el="{el}"
+  page="{page}"
+  data-size="{size}"
+  data-variant="{variant}"
+  let:builder
+  on:click
+>
+  <slot builder="{builder}" />
+</PaginationPrimitive.Page>
diff --git a/src/lib/components/pagination/PaginationNextButton.svelte b/src/lib/components/pagination/PaginationNextButton.svelte
new file mode 100644
index 0000000..995ddda
--- /dev/null
+++ b/src/lib/components/pagination/PaginationNextButton.svelte
@@ -0,0 +1,61 @@
+<script context="module" lang="ts">
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import Button from '$lib/components/button/index.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the next button.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the next button.
+   */
+  export type Props = Omit<PaginationPrimitive.NextButtonProps, keyof Attributes | 'asChild'>;
+  /**
+   * The slots of the next button.
+   */
+  export type Slots = ComponentSlots<PaginationPrimitive.NextButton>;
+
+  /**
+   * The styles of the next button.
+   */
+  export const styles = tv({
+    base: ['gap-1 pr-2.5'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events<PaginationPrimitive.NextButtonEvents>;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<PaginationPrimitive.NextButton asChild let:builder>
+  <Button
+    {...attributes}
+    builders="{[builder]}"
+    class="{styles({
+      class: attributes.class,
+    })}"
+    el="{el}"
+    variant="ghost"
+    on:click
+  >
+    <slot builder="{builder}">
+      <span>Next</span>
+
+      <ChevronRight class="h-4 w-4" />
+    </slot>
+  </Button>
+</PaginationPrimitive.NextButton>
diff --git a/src/lib/components/pagination/PaginationPreviousButton.svelte b/src/lib/components/pagination/PaginationPreviousButton.svelte
new file mode 100644
index 0000000..123016e
--- /dev/null
+++ b/src/lib/components/pagination/PaginationPreviousButton.svelte
@@ -0,0 +1,61 @@
+<script context="module" lang="ts">
+  import { Pagination as PaginationPrimitive } from 'bits-ui';
+  import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import Button from '$lib/components/button/index.js';
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the previous button.
+   */
+  export type Attributes = SvelteHTMLElements['button'];
+  /**
+   * The props of the previous button.
+   */
+  export type Props = Omit<PaginationPrimitive.PrevButtonProps, keyof Attributes | 'asChild'>;
+  /**
+   * The slots of the previous button.
+   */
+  export type Slots = ComponentSlots<PaginationPrimitive.PrevButton>;
+
+  /**
+   * The styles of the previous button.
+   */
+  export const styles = tv({
+    base: ['gap-1 pl-2.5'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events<PaginationPrimitive.PrevButtonEvents>;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let el: Props['el'] = undefined;
+
+  $: attributes = $$restProps as Attributes;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<PaginationPrimitive.PrevButton asChild let:builder>
+  <Button
+    {...attributes}
+    builders="{[builder]}"
+    class="{styles({
+      class: attributes.class,
+    })}"
+    el="{el}"
+    variant="ghost"
+    on:click
+  >
+    <slot builder="{builder}">
+      <ChevronLeft class="h-4 w-4" />
+
+      <span>Previous</span>
+    </slot>
+  </Button>
+</PaginationPrimitive.PrevButton>
diff --git a/src/lib/components/pagination/PaginationRoot.svelte b/src/lib/components/pagination/PaginationRoot.svelte
new file mode 100644
index 0000000..f74c8c0
--- /dev/null
+++ b/src/lib/components/pagination/PaginationRoot.svelte
@@ -0,0 +1,75 @@
+<script context="module" lang="ts">
+  import { Pagination as PaginationPrimitive, type PageItem } from 'bits-ui';
+  import type { SvelteHTMLElements } from 'svelte/elements';
+  import { tv } from 'tailwind-variants';
+
+  import type { ComponentSlots, Events } from '$lib/utils/types.js';
+
+  /**
+   * The attributes of the root.
+   */
+  export type Attributes = SvelteHTMLElements['div'];
+  /**
+   * The props of the root.
+   */
+  export type Props = Omit<PaginationPrimitive.Props, keyof Attributes | 'asChild'>;
+  /**
+   * The slots of the root.
+   */
+  export type Slots = {
+    default: Omit<ComponentSlots<PaginationPrimitive.Root>['default'], 'pages'> & {
+      currentPage: number | undefined;
+      pages: PageItem[];
+    };
+  };
+
+  /**
+   * The styles of the root.
+   */
+  export const styles = tv({
+    base: ['mx-auto flex w-full flex-col items-center'],
+  });
+</script>
+
+<script lang="ts">
+  type $$Events = Events<PaginationPrimitive.Events>;
+  type $$Props = Attributes & Props;
+  type $$Slots = Slots;
+
+  export let count: Props['count'];
+  export let el: Props['el'] = undefined;
+  export let onPageChange: Props['onPageChange'] = undefined;
+  export let page: Props['page'] = 1;
+  export let perPage: Props['perPage'] = 10;
+  export let siblingCount: Props['siblingCount'] = 1;
+
+  $: attributes = $$restProps as Attributes;
+  $: currentPage = page;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<PaginationPrimitive.Root
+  {...attributes}
+  asChild
+  count="{count}"
+  el="{el}"
+  onPageChange="{onPageChange}"
+  perPage="{perPage}"
+  siblingCount="{siblingCount}"
+  bind:page="{page}"
+  let:builder
+  let:pages
+  let:range
+>
+  <nav
+    {...builder}
+    class="{styles({
+      class: attributes.class,
+    })}"
+    use:builder.action
+  >
+    <slot builder="{builder}" currentPage="{currentPage}" pages="{pages}" range="{range}" />
+  </nav>
+</PaginationPrimitive.Root>
diff --git a/src/lib/components/pagination/index.ts b/src/lib/components/pagination/index.ts
new file mode 100644
index 0000000..0912c6f
--- /dev/null
+++ b/src/lib/components/pagination/index.ts
@@ -0,0 +1,49 @@
+export {
+  default as Content,
+  styles as contentStyles,
+  type Attributes as ContentAttributes,
+  type Props as ContentProps,
+  type Slots as ContentSlots,
+} from './PaginationContent.svelte';
+export {
+  default as Ellipsis,
+  styles as ellipsisStyles,
+  type Attributes as EllipsisAttributes,
+  type Props as EllipsisProps,
+  type Slots as EllipsisSlots,
+} from './PaginationEllipsis.svelte';
+export {
+  default as Item,
+  styles as itemStyles,
+  type Attributes as ItemAttributes,
+  type Props as ItemProps,
+  type Slots as ItemSlots,
+} from './PaginationItem.svelte';
+export {
+  default as Link,
+  styles as linkStyles,
+  type Attributes as LinkAttributes,
+  type Props as LinkProps,
+  type Slots as LinkSlots,
+} from './PaginationLink.svelte';
+export {
+  default as NextButton,
+  styles as nextButtonStyles,
+  type Attributes as NextButtonAttributes,
+  type Props as NextButtonProps,
+  type Slots as NextButtonSlots,
+} from './PaginationNextButton.svelte';
+export {
+  default as PreviousButton,
+  styles as previousButtonStyles,
+  type Attributes as PreviousButtonAttributes,
+  type Props as PreviousButtonProps,
+  type Slots as PreviousButtonSlots,
+} from './PaginationPreviousButton.svelte';
+export {
+  default as Root,
+  styles as rootStyles,
+  type Attributes as RootAttributes,
+  type Props as RootProps,
+  type Slots as RootSlots,
+} from './PaginationRoot.svelte';
diff --git a/src/lib/components/popover/PopoverClose.svelte b/src/lib/components/popover/PopoverClose.svelte
index 4ebf06d..8694e3f 100644
--- a/src/lib/components/popover/PopoverClose.svelte
+++ b/src/lib/components/popover/PopoverClose.svelte
@@ -22,7 +22,7 @@
    * The styles of the close.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/popover/PopoverTrigger.svelte b/src/lib/components/popover/PopoverTrigger.svelte
index 709dbe0..bda6022 100644
--- a/src/lib/components/popover/PopoverTrigger.svelte
+++ b/src/lib/components/popover/PopoverTrigger.svelte
@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/select/SelectGroup.svelte b/src/lib/components/select/SelectGroup.svelte
index 867d5c8..d347a5e 100644
--- a/src/lib/components/select/SelectGroup.svelte
+++ b/src/lib/components/select/SelectGroup.svelte
@@ -22,7 +22,7 @@
    * The styles of the group.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/select/SelectInput.svelte b/src/lib/components/select/SelectInput.svelte
index de65d57..1593777 100644
--- a/src/lib/components/select/SelectInput.svelte
+++ b/src/lib/components/select/SelectInput.svelte
@@ -23,7 +23,7 @@
    * The styles of the input.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/select/SelectValue.svelte b/src/lib/components/select/SelectValue.svelte
index 2cf7e91..7ca240f 100644
--- a/src/lib/components/select/SelectValue.svelte
+++ b/src/lib/components/select/SelectValue.svelte
@@ -22,7 +22,7 @@
    * The styles of the value.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/separator/Separator.svelte b/src/lib/components/separator/Separator.svelte
index 11156d3..f377f19 100644
--- a/src/lib/components/separator/Separator.svelte
+++ b/src/lib/components/separator/Separator.svelte
@@ -76,6 +76,7 @@
   decorative="{decorative}"
   el="{el}"
   orientation="{orientation}"
+  data-orientation="{orientation}"
   let:builder
 >
   <slot builder="{builder}" />
diff --git a/src/lib/components/sonner/Sonner.svelte b/src/lib/components/sonner/Sonner.svelte
index 4988ef0..bdaf534 100644
--- a/src/lib/components/sonner/Sonner.svelte
+++ b/src/lib/components/sonner/Sonner.svelte
@@ -177,6 +177,9 @@
     },
   }}"
   visibleToasts="{visibleToasts}"
+  data-dir="{dir}"
+  data-position="{position}"
+  data-theme="{theme}"
 >
   <!-- <slot name="loading-icon" slot="loading-icon">
     <Loader visible="{toast.type === 'loading'}" />
diff --git a/src/lib/components/tabs/TabsRoot.svelte b/src/lib/components/tabs/TabsRoot.svelte
index 9e090f6..50421a4 100644
--- a/src/lib/components/tabs/TabsRoot.svelte
+++ b/src/lib/components/tabs/TabsRoot.svelte
@@ -26,7 +26,7 @@
    * The styles of the root.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
     defaultVariants: {
       orientation: 'horizontal',
     },
@@ -83,6 +83,7 @@
   loop="{loop}"
   onValueChange="{onValueChange}"
   orientation="{orientation}"
+  data-orientation="{orientation}"
   bind:value="{value}"
   let:builder
   let:value
diff --git a/src/lib/components/tooltip/TooltipTrigger.svelte b/src/lib/components/tooltip/TooltipTrigger.svelte
index 9a72bff..7034fe3 100644
--- a/src/lib/components/tooltip/TooltipTrigger.svelte
+++ b/src/lib/components/tooltip/TooltipTrigger.svelte
@@ -22,7 +22,7 @@
    * The styles of the trigger.
    */
   export const styles = tv({
-    base: [],
+    base: [] as string[],
   });
 </script>
 
diff --git a/src/lib/components/top-navigation/TopNavigationButton.svelte b/src/lib/components/top-navigation/TopNavigationButton.svelte
index d6050ac..835c886 100644
--- a/src/lib/components/top-navigation/TopNavigationButton.svelte
+++ b/src/lib/components/top-navigation/TopNavigationButton.svelte
@@ -61,6 +61,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </button>
diff --git a/src/lib/components/top-navigation/TopNavigationLink.svelte b/src/lib/components/top-navigation/TopNavigationLink.svelte
index a7edfd0..e821f96 100644
--- a/src/lib/components/top-navigation/TopNavigationLink.svelte
+++ b/src/lib/components/top-navigation/TopNavigationLink.svelte
@@ -62,6 +62,7 @@
   })}"
   href="{href}"
   data-active="{isActive}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </a>
diff --git a/src/lib/components/top-navigation/TopNavigationRoot.svelte b/src/lib/components/top-navigation/TopNavigationRoot.svelte
index 33c5bae..75649ec 100644
--- a/src/lib/components/top-navigation/TopNavigationRoot.svelte
+++ b/src/lib/components/top-navigation/TopNavigationRoot.svelte
@@ -127,6 +127,8 @@
     viewport: 'desktop',
   })}"
   xAxis
+  data-breakpoint="{breakpoint}"
+  data-viewport="desktop"
 >
   <div class="flex h-16 flex-row justify-between">
     <slot />
@@ -141,6 +143,8 @@
     class: attributes.class,
     viewport: 'mobile',
   })}"
+  data-breakpoint="{breakpoint}"
+  data-viewport="mobile"
   bind:open="{open}"
 >
   <Collapsible.Trigger asChild let:builder>
diff --git a/src/lib/components/top-navigation/TopNavigationSection.svelte b/src/lib/components/top-navigation/TopNavigationSection.svelte
index e776118..1e141d8 100644
--- a/src/lib/components/top-navigation/TopNavigationSection.svelte
+++ b/src/lib/components/top-navigation/TopNavigationSection.svelte
@@ -58,6 +58,7 @@
     breakpoint,
     class: attributes.class,
   })}"
+  data-breakpoint="{breakpoint}"
 >
   <slot />
 </div>
diff --git a/src/lib/utils/internal.ts b/src/lib/utils/internal.ts
index 089002d..9adfd8a 100644
--- a/src/lib/utils/internal.ts
+++ b/src/lib/utils/internal.ts
@@ -12,3 +12,28 @@
 export function castAsAny(value: unknown): any {
   return value;
 }
+
+/**
+ * Omits the given keys from the object.
+ * This is the functionnal equivalent of Typescript's `Omit` utility type.
+ *
+ * @param object The object to omit the keys from.
+ * @param keys The keys to omit.
+ * @returns The object without the given keys.
+ *
+ * @private
+ */
+export function omit<TObject extends Record<string, unknown>, TKeys extends (keyof TObject)[]>(
+  object: TObject,
+  keys: TKeys,
+): Omit<TObject, TKeys[number]> {
+  const result = {
+    ...object,
+  };
+
+  for (const key of keys) {
+    delete result[key];
+  }
+
+  return result;
+}
diff --git a/src/routes/pagination/+page.svelte b/src/routes/pagination/+page.svelte
new file mode 100644
index 0000000..46955c4
--- /dev/null
+++ b/src/routes/pagination/+page.svelte
@@ -0,0 +1,156 @@
+<script context="module" lang="ts">
+  import Separator from '$lib/components/separator/index.js';
+  import ChevronLeft from 'lucide-svelte/icons/chevron-left';
+  import ChevronRight from 'lucide-svelte/icons/chevron-right';
+  import { superForm as createSuperForm, defaults } from 'sveltekit-superforms';
+  import { zod } from 'sveltekit-superforms/adapters';
+  import z from 'zod';
+
+  import * as Form from '$lib/components/form/index.js';
+  import Input from '$lib/components/input/index.js';
+  import * as Pagination from '$lib/components/pagination/index.js';
+
+  const adapter = zod(
+    z.object({
+      count: z.number().int().min(0).default(20),
+      perPage: z.number().int().min(1).default(10).optional(),
+      page: z.number().int().min(1).default(1).optional(),
+      siblingCount: z.number().int().min(1).default(1).optional(),
+    }),
+  );
+</script>
+
+<script lang="ts">
+  const superForm = createSuperForm(defaults(adapter), {
+    SPA: true,
+    validators: adapter,
+  });
+  const { form: superFormData } = superForm;
+</script>
+
+<!-- <style lang="postcss">
+</style> -->
+
+<Form.Root superForm="{superForm}">
+  <Form.Field name="count" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Count</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="numeric"
+        step="{1}"
+        variant="number"
+        bind:value="{$superFormData.count}"
+      />
+    </Form.Control>
+
+    <Form.Description>The total number of items to be paginated.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="perPage" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Per page</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="numeric"
+        step="{1}"
+        variant="number"
+        bind:value="{$superFormData.perPage}"
+      />
+    </Form.Control>
+
+    <Form.Description>Number of items per page.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="page" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Page</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="numeric"
+        step="{1}"
+        variant="number"
+        bind:value="{$superFormData.page}"
+      />
+    </Form.Control>
+
+    <Form.Description>
+      The selected page. This updates as the users selects new pages. You can bind this to a value
+      to programmatically control the value state.
+    </Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+
+  <Form.Field name="siblingCount" superForm="{superForm}" let:constraints>
+    <Form.Control let:attrs>
+      <Form.Label>Sibling count</Form.Label>
+
+      <Input
+        {...attrs}
+        {...constraints}
+        inputmode="numeric"
+        step="{1}"
+        variant="number"
+        bind:value="{$superFormData.siblingCount}"
+      />
+    </Form.Control>
+
+    <Form.Description>Number of visible items before and after the current page.</Form.Description>
+
+    <Form.FieldErrors />
+  </Form.Field>
+</Form.Root>
+
+<Separator />
+
+<Pagination.Root
+  count="{$superFormData.count}"
+  perPage="{$superFormData.perPage}"
+  siblingCount="{$superFormData.siblingCount}"
+  bind:page="{$superFormData.page}"
+  let:pages
+  let:currentPage
+>
+  <Pagination.Content>
+    <Pagination.Item>
+      <Pagination.PreviousButton>
+        <ChevronLeft class="h-4 w-4" />
+
+        <span class="hidden sm:block">Previous</span>
+      </Pagination.PreviousButton>
+    </Pagination.Item>
+
+    {#each pages as page (page.key)}
+      {#if page.type === 'ellipsis'}
+        <Pagination.Item>
+          <Pagination.Ellipsis />
+        </Pagination.Item>
+      {:else}
+        <Pagination.Item>
+          <Pagination.Link isActive="{currentPage === page.value}" page="{page}">
+            {page.value}
+          </Pagination.Link>
+        </Pagination.Item>
+      {/if}
+    {/each}
+
+    <Pagination.Item>
+      <Pagination.NextButton>
+        <span class="hidden sm:block">Next</span>
+
+        <ChevronRight class="h-4 w-4" />
+      </Pagination.NextButton>
+    </Pagination.Item>
+  </Pagination.Content>
+</Pagination.Root>