Pagination

A component for navigating between pages of content.

<script setup lang="ts">
import { Pagination } from '@destyler-ui/vue'
</script>
<template>
  <Pagination.Root :count="100" :page-size="10" :sibling-count="2">
    <Pagination.PrevTrigger>
      Previous
      <span className="visually-hidden">Page</span>
    </Pagination.PrevTrigger>
    <Pagination.Context v-slot="pagination">
      <template v-for="(page, index) in pagination.pages">
        <Pagination.Item v-if="page.type === 'page'" :key="index" :value="page.value" :type="page.type">
          {{ page.value }}
        </Pagination.Item>
        <Pagination.Ellipsis v-else :key="'e' + index" :index="index">&#8230;</Pagination.Ellipsis>
      </template>
    </Pagination.Context>
    <Pagination.NextTrigger>
      Next
      <span className="visually-hidden">Page</span>
    </Pagination.NextTrigger>
  </Pagination.Root>
</template>

import { Pagination } from '@destyler-ui/react'

export function Basic() {
  return (
    <Pagination.Root count={100} pageSize={10} siblingCount={2}>
      <Pagination.PrevTrigger>
        Previous
        <span className="visually-hidden">Page</span>
      </Pagination.PrevTrigger>
      <Pagination.Context>
        {pagination => (
          <>
            {pagination.pages.map((page, index) => (
              page.type === 'page'
                ? (
                    <Pagination.Item key={index} value={page.value} type={page.type}>
                      {page.value}
                    </Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis key={`e${index}`} index={index}>
                      &#8230;
                    </Pagination.Ellipsis>
                  )
            ))}
          </>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>
        Next
        <span className="visually-hidden">Page</span>
      </Pagination.NextTrigger>
    </Pagination.Root>
  )
}

import { Pagination } from '@destyler-ui/solid/pagination'
import { For } from 'solid-js'

export function Basic() {
  return (
    <Pagination.Root count={5000} pageSize={10} siblingCount={2}>
      <Pagination.PrevTrigger>Previous Page</Pagination.PrevTrigger>
      <Pagination.Context>
        {api => (
          <For each={api().pages}>
            {(page, index) =>
              page.type === 'page'
                ? (
                    <Pagination.Item {...page}>{page.value}</Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
                  )}
          </For>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>Next Page</Pagination.NextTrigger>
    </Pagination.Root>
  )
}

<script lang="ts">
  import { Pagination } from '@destyler-ui/svelte'
</script>

<Pagination.Root count={100} pageSize={10} siblingCount={2}>
  <Pagination.PrevTrigger>Previous <span class="visually-hidden">Page</span></Pagination.PrevTrigger>
  <Pagination.Context>
    {#snippet render(pagination)}
      {#each pagination().pages as page, index}
        {#if page.type === 'page'}
          <Pagination.Item value={page.value} type={page.type}>{page.value}</Pagination.Item>
        {:else}
          <Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
        {/if}
      {/each}
    {/snippet}
  </Pagination.Context>
  <Pagination.NextTrigger>Next <span class="visually-hidden">Page</span></Pagination.NextTrigger>
</Pagination.Root>

Anatomy

<script setup lang="ts">
import { Pagination } from '@destyler-ui/vue'
</script>

<template>
  <Pagination.Root>
    <Pagination.PrevTrigger />
    <Pagination.Item />
    <Pagination.Ellipsis />
    <Pagination.NextTrigger />
  </Pagination.Root>
</template>

import { Pagination } from '@destyler-ui/react'

export default function Basic() {
  return (
    <Pagination.Root>
      <Pagination.PrevTrigger />
      <Pagination.Item />
      <Pagination.Ellipsis />
      <Pagination.NextTrigger />
    </Pagination.Root>
  )
}

import { Pagination } from '@destyler-ui/solid'

export default function Basic() {
  return (
    <Pagination.Root count={100}>
      <Pagination.PrevTrigger />
      <Pagination.Item type="page" value={1}>1</Pagination.Item>
      <Pagination.Ellipsis index={1} />
      <Pagination.NextTrigger />
    </Pagination.Root>
  )
}

<script lang="ts">
  import { Pagination } from '@destyler-ui/svelte'
</script>

<Pagination.Root count={100} pageSize={10} siblingCount={2}>
  <Pagination.PrevTrigger>Previous <span class="visually-hidden">Page</span></Pagination.PrevTrigger>
  <Pagination.Context>
    {#snippet render(pagination)}
      {#each pagination().pages as page, index}
        {#if page.type === 'page'}
          <Pagination.Item value={page.value} type={page.type}>{page.value}</Pagination.Item>
        {:else}
          <Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
        {/if}
      {/each}
    {/snippet}
  </Pagination.Context>
  <Pagination.NextTrigger>Next <span class="visually-hidden">Page</span></Pagination.NextTrigger>
</Pagination.Root>

Examples

Basic

<script setup lang="ts">
import { Pagination } from '@destyler-ui/vue'
</script>
<template>
  <Pagination.Root :count="100" :page-size="10" :sibling-count="2">
    <Pagination.PrevTrigger>
      Previous
      <span className="visually-hidden">Page</span>
    </Pagination.PrevTrigger>
    <Pagination.Context v-slot="pagination">
      <template v-for="(page, index) in pagination.pages">
        <Pagination.Item v-if="page.type === 'page'" :key="index" :value="page.value" :type="page.type">
          {{ page.value }}
        </Pagination.Item>
        <Pagination.Ellipsis v-else :key="'e' + index" :index="index">&#8230;</Pagination.Ellipsis>
      </template>
    </Pagination.Context>
    <Pagination.NextTrigger>
      Next
      <span className="visually-hidden">Page</span>
    </Pagination.NextTrigger>
  </Pagination.Root>
</template>

import { Pagination } from '@destyler-ui/react'

export function Basic() {
  return (
    <Pagination.Root count={100} pageSize={10} siblingCount={2}>
      <Pagination.PrevTrigger>
        Previous
        <span className="visually-hidden">Page</span>
      </Pagination.PrevTrigger>
      <Pagination.Context>
        {pagination => (
          <>
            {pagination.pages.map((page, index) => (
              page.type === 'page'
                ? (
                    <Pagination.Item key={index} value={page.value} type={page.type}>
                      {page.value}
                    </Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis key={`e${index}`} index={index}>
                      &#8230;
                    </Pagination.Ellipsis>
                  )
            ))}
          </>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>
        Next
        <span className="visually-hidden">Page</span>
      </Pagination.NextTrigger>
    </Pagination.Root>
  )
}

import { Pagination } from '@destyler-ui/solid/pagination'
import { For } from 'solid-js'

export function Basic() {
  return (
    <Pagination.Root count={5000} pageSize={10} siblingCount={2}>
      <Pagination.PrevTrigger>Previous Page</Pagination.PrevTrigger>
      <Pagination.Context>
        {api => (
          <For each={api().pages}>
            {(page, index) =>
              page.type === 'page'
                ? (
                    <Pagination.Item {...page}>{page.value}</Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
                  )}
          </For>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>Next Page</Pagination.NextTrigger>
    </Pagination.Root>
  )
}

<script lang="ts">
  import { Pagination } from '@destyler-ui/svelte'
</script>

<Pagination.Root count={100} pageSize={10} siblingCount={2}>
  <Pagination.PrevTrigger>Previous <span class="visually-hidden">Page</span></Pagination.PrevTrigger>
  <Pagination.Context>
    {#snippet render(pagination)}
      {#each pagination().pages as page, index}
        {#if page.type === 'page'}
          <Pagination.Item value={page.value} type={page.type}>{page.value}</Pagination.Item>
        {:else}
          <Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
        {/if}
      {/each}
    {/snippet}
  </Pagination.Context>
  <Pagination.NextTrigger>Next <span class="visually-hidden">Page</span></Pagination.NextTrigger>
</Pagination.Root>

Customized

Customize the pagination appearance and behavior.

<script setup lang="ts">
import { Pagination } from '@destyler-ui/vue'
</script>

<template>
  <Pagination.Root
    :count="5000"
    :page-size="20"
    :sibling-count="3"
    :translations="{
      nextTriggerLabel: 'Next',
      prevTriggerLabel: 'Prev',
      itemLabel: (details) => `Page ${details.page}`,
    }"
  >
    <Pagination.PrevTrigger>
      Previous
      <span className="visually-hidden">Page</span>
    </Pagination.PrevTrigger>
    <Pagination.Context v-slot="pagination">
      <template v-for="(page, index) in pagination.pages">
        <Pagination.Item v-if="page.type === 'page'" :key="index" :value="page.value" :type="page.type">
          {{ page.value }}
        </Pagination.Item>
        <Pagination.Ellipsis v-else :key="'e' + index" :index="index">&#8230;</Pagination.Ellipsis>
      </template>
    </Pagination.Context>
    <Pagination.NextTrigger>
      Next
      <span className="visually-hidden">Page</span>
    </Pagination.NextTrigger>
  </Pagination.Root>
</template>

import { Pagination } from '@destyler-ui/react'

export function Customized() {
  return (
    <Pagination.Root
      count={5000}
      pageSize={20}
      siblingCount={3}
      translations={{
        nextTriggerLabel: 'Next',
        prevTriggerLabel: 'Prev',
        itemLabel: details => `Page ${details.page}`,
      }}
    >
      <Pagination.PrevTrigger>
        Previous
        <span className="visually-hidden">Page</span>
      </Pagination.PrevTrigger>
      <Pagination.Context>
        {pagination => (
          <>
            {pagination.pages.map((page, index) => (
              page.type === 'page'
                ? (
                    <Pagination.Item key={index} value={page.value} type={page.type}>
                      {page.value}
                    </Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis key={`e${index}`} index={index}>
                      &#8230;
                    </Pagination.Ellipsis>
                  )
            ))}
          </>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>
        Next
        <span className="visually-hidden">Page</span>
      </Pagination.NextTrigger>
    </Pagination.Root>
  )
}

import { Pagination } from '@destyler-ui/solid/pagination'
import { For } from 'solid-js'

export function Customized() {
  return (
    <Pagination.Root
      count={5000}
      pageSize={20}
      siblingCount={3}
      translations={{
        nextTriggerLabel: 'Next',
        prevTriggerLabel: 'Prev',
        itemLabel: details => `Page ${details.page}`,
      }}
    >
      <Pagination.PrevTrigger>Previous Page</Pagination.PrevTrigger>
      <Pagination.Context>
        {api => (
          <For each={api().pages}>
            {(page, index) =>
              page.type === 'page'
                ? (
                    <Pagination.Item {...page}>{page.value}</Pagination.Item>
                  )
                : (
                    <Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
                  )}
          </For>
        )}
      </Pagination.Context>
      <Pagination.NextTrigger>Next Page</Pagination.NextTrigger>
    </Pagination.Root>
  )
}

<script lang="ts">
  import { Pagination } from '@destyler-ui/svelte'
</script>

<Pagination.Root
  count={5000}
  pageSize={20}
  siblingCount={3}
  translations={{ nextTriggerLabel: 'Next', prevTriggerLabel: 'Prev', itemLabel: ({ page }) => `Page ${page}` }}
>
  <Pagination.PrevTrigger>Previous <span class="visually-hidden">Page</span></Pagination.PrevTrigger>
  <Pagination.Context>
    {#snippet render(pagination)}
      {#each pagination().pages as page, index}
        {#if page.type === 'page'}
          <Pagination.Item value={page.value} type={page.type}>{page.value}</Pagination.Item>
        {:else}
          <Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
        {/if}
      {/each}
    {/snippet}
  </Pagination.Context>
  <Pagination.NextTrigger>Next <span class="visually-hidden">Page</span></Pagination.NextTrigger>
</Pagination.Root>

Root Provider

<script setup lang="ts">
import { Pagination, usePagination } from '@destyler-ui/vue'

const pagination = usePagination({ count: 100, pageSize: 10, siblingCount: 2 })
</script>

<template>
  <button @click="pagination.goToNextPage()">Next Page</button>

  <Pagination.RootProvider :value="pagination">
    <Pagination.PrevTrigger>
      Previous
      <span className="visually-hidden">Page</span>
    </Pagination.PrevTrigger>
    <Pagination.Context v-slot="pagination">
      <template v-for="(page, index) in pagination.pages">
        <Pagination.Item v-if="page.type === 'page'" :key="index" :value="page.value" :type="page.type">
          {{ page.value }}
        </Pagination.Item>
        <Pagination.Ellipsis v-else :key="'e' + index" :index="index">&#8230;</Pagination.Ellipsis>
      </template>
    </Pagination.Context>
    <Pagination.NextTrigger>
      Next
      <span className="visually-hidden">Page</span>
    </Pagination.NextTrigger>
  </Pagination.RootProvider>
</template>

import { Pagination, usePagination } from '@destyler-ui/react'

export function RootProvider() {
  const pagination = usePagination({ count: 100, pageSize: 10, siblingCount: 2 })

  return (
    <>
      <button onClick={() => pagination.goToNextPage()}>Next Page</button>

      <Pagination.RootProvider value={pagination}>
        <Pagination.PrevTrigger>
          Previous
          <span className="visually-hidden">Page</span>
        </Pagination.PrevTrigger>
        <Pagination.Context>
          {ctx => (
            <>
              {ctx.pages.map((page, index) => (
                page.type === 'page'
                  ? (
                      <Pagination.Item key={index} value={page.value} type={page.type}>
                        {page.value}
                      </Pagination.Item>
                    )
                  : (
                      <Pagination.Ellipsis key={`e${index}`} index={index}>
                        &#8230;
                      </Pagination.Ellipsis>
                    )
              ))}
            </>
          )}
        </Pagination.Context>
        <Pagination.NextTrigger>
          Next
          <span className="visually-hidden">Page</span>
        </Pagination.NextTrigger>
      </Pagination.RootProvider>
    </>
  )
}

import { Pagination, usePagination } from '@destyler-ui/solid/pagination'
import { For } from 'solid-js'

export function RootProvider() {
  const pagination = usePagination({ count: 5000, pageSize: 10, siblingCount: 2 })

  return (
    <>
      <button onClick={() => pagination().goToNextPage()}>Next Page</button>

      <Pagination.RootProvider value={pagination}>
        <Pagination.PrevTrigger>Previous Page</Pagination.PrevTrigger>
        <Pagination.Context>
          {api => (
            <For each={api().pages}>
              {(page, index) =>
                page.type === 'page'
                  ? (
                      <Pagination.Item {...page}>{page.value}</Pagination.Item>
                    )
                  : (
                      <Pagination.Ellipsis index={index()}>&#8230;</Pagination.Ellipsis>
                    )}
            </For>
          )}
        </Pagination.Context>
        <Pagination.NextTrigger>Next Page</Pagination.NextTrigger>
      </Pagination.RootProvider>
    </>
  )
}

<script lang="ts">
  import { Pagination, usePagination } from '@destyler-ui/svelte'

  const id = $props.id()
  const pagination = usePagination({ id, count: 100, pageSize: 10, siblingCount: 2 })
</script>

<button type="button" onclick={() => pagination().goToNextPage()}>Next Page</button>
<Pagination.RootProvider value={pagination}>
  <Pagination.PrevTrigger>Previous <span class="visually-hidden">Page</span></Pagination.PrevTrigger>
  <Pagination.Context>
    {#snippet render(api)}
      {#each api().pages as page, index}
        {#if page.type === 'page'}
          <Pagination.Item value={page.value} type={page.type}>{page.value}</Pagination.Item>
        {:else}
          <Pagination.Ellipsis {index}>&#8230;</Pagination.Ellipsis>
        {/if}
      {/each}
    {/snippet}
  </Pagination.Context>
  <Pagination.NextTrigger>Next <span class="visually-hidden">Page</span></Pagination.NextTrigger>
</Pagination.RootProvider>

API Reference

Root

Prop	Default	Type
`count*`	—	`number` Total number of data items
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultPage`	—	`number` The initial page of the pagination when it is first rendered. Use when you do not need to control the state of the pagination.
`id`	—	`string` The unique identifier of the machine.
`ids`	—	`Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>` The ids of the elements in the collapse. Useful for composition.
`page`	`1`	`number` The active page
`pageSize`	`10`	`number` Number of data items per page
`siblingCount`	`1`	`number` Number of pages to show beside active page
`translations`	—	`pagination.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"button"`	`"button" \| "link"` The type of the trigger element

Emit	Event
`pageChange`	`[details: PageChangeDetails]` Called when the page number is changed
`pageSizeChange`	`[details: PageSizeChangeDetails]` Called when the page size is changed

Context

No serializable props or emits are declared for this part.

Ellipsis

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`"page"`
`value*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`MachineApi<PropTypes>`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`count*`	—	`number` Total number of data items
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultPage`	—	`number` The initial page of the pagination when it is first rendered. Use when you do not need to control the state of the pagination.
`ids`	—	`Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>` The ids of the elements in the accordion. Useful for composition.
`onPageChange`	—	`(details: pagination.PageChangeDetails) => void` Called when the page number is changed
`onPageSizeChange`	—	`(details: pagination.PageSizeChangeDetails) => void` Called when the page size is changed
`page`	`1`	`number` The active page
`pageSize`	`10`	`number` Number of data items per page
`siblingCount`	`1`	`number` Number of pages to show beside active page
`translations`	—	`pagination.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"button"`	`"button" \| "link"` The type of the trigger element

Context

Prop	Default	Type
`children*`	—	`(context: UsePaginationContext) => ReactNode`

Ellipsis

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`"page"`
`value*`	—	`number`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UsePaginationReturn`
`asChild`	—	`false \| true` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`count*`	—	`number` Total number of data items
`asChild`	—	`(props: (userProps?: solid_js332.JSX.HTMLAttributes<HTMLElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultPage`	—	`number` The initial page of the pagination when it is first rendered. Use when you do not need to control the state of the pagination.
`ids`	—	`Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>` The ids of the elements in the accordion. Useful for composition.
`onPageChange`	—	`(details: PageChangeDetails) => void` Called when the page number is changed
`onPageSizeChange`	—	`(details: PageSizeChangeDetails) => void` Called when the page size is changed
`page`	`1`	`number` The active page
`pageSize`	`10`	`number` Number of data items per page
`siblingCount`	`1`	`number` Number of pages to show beside active page
`translations`	—	`pagination.IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"button"`	`"button" \| "link"` The type of the trigger element

Context

Prop	Default	Type
`children*`	—	`(context: UsePaginationContext) => Element`

Ellipsis

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js332.JSX.HTMLAttributes<HTMLDivElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Item

Prop	Default	Type
`type*`	—	`"page"`
`value*`	—	`number`
`asChild`	—	`(props: (userProps?: solid_js332.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

NextTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js332.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

PrevTrigger

Prop	Default	Type
`asChild`	—	`(props: (userProps?: solid_js332.JSX.ButtonHTMLAttributes<HTMLButtonElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

RootProvider

Prop	Default	Type
`value*`	—	`UsePaginationReturn`
`asChild`	—	`(props: (userProps?: solid_js332.JSX.HTMLAttributes<HTMLElement> \| undefined) => JSX.HTMLAttributes<any>) => JSX.Element` Use the provided child element as the default rendered element, combining their props and behavior.

Root

Prop	Default	Type
`count*`	—	`number` Total number of data items
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]>`
`children`	—	`Snippet<[]> \| undefined`
`defaultPage`	—	`number`
`id`	—	`string`
`ids`	—	`Partial<{ root: string; ellipsis: (index: number) => string; prevTrigger: string; nextTrigger: string; item: (page: number) => string; }>` The ids of the elements in the accordion. Useful for composition.
`onPageChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").PaginationPageChangeDetails) => void` Called when the page number is changed
`onPageSizeChange`	—	`(details: import("/home/runner/work/ui/ui/packages/svelte/dist/index").PaginationPageSizeChangeDetails) => void` Called when the page size is changed
`page`	`1`	`number` The active page
`pageSize`	`10`	`number` Number of data items per page
`siblingCount`	`1`	`number` Number of pages to show beside active page
`translations`	—	`IntlTranslations \| undefined` Specifies the localized strings that identifies the accessibility elements and their states
`type`	`"button"`	`"button" \| "link"` The type of the trigger element

Context

Prop	Default	Type
`render*`	—	`Snippet<[UsePaginationContext]>`

Ellipsis

Prop	Default	Type
`index*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"div">]>`
`children`	—	`Snippet<[]> \| undefined`

Item

Prop	Default	Type
`type*`	—	`"page"`
`value*`	—	`number`
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

NextTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

PrevTrigger

Prop	Default	Type
`asChild`	—	`import("svelte").Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"button">]>`
`children`	—	`Snippet<[]> \| undefined`

RootProvider

Prop	Default	Type
`value*`	—	`UsePaginationReturn`
`asChild`	—	`Snippet<[import("/home/runner/work/ui/ui/packages/svelte/dist/types").PropsFn<"nav">]>`
`children`	—	`Snippet<[]> \| undefined`