Pagination | COSS for Svelte

Installation

pnpm dlx shadcn-svelte@latest add https://coss.miel.my/r/pagination.json

Usage

<script lang="ts">
  import * as Pagination from "$lib/components/ui/pagination/index.js";
</script>

<Pagination.Root>
  <Pagination.Content>
    <Pagination.Item><Pagination.Previous href="#previous" /></Pagination.Item>
    <Pagination.Item><Pagination.Link href="#page-1">1</Pagination.Link></Pagination.Item>
    <Pagination.Item><Pagination.Ellipsis /></Pagination.Item>
    <Pagination.Item><Pagination.Next href="#next" /></Pagination.Item>
  </Pagination.Content>
</Pagination.Root>

API Reference

This is a custom Svelte component, not a Shards wrapper.

Pagination.Root

Root navigation container with aria-label="pagination".

Pagination.Content

Unordered list container for pagination items.

Pagination.Item

Individual list item container.

Pagination.Link

Link for page numbers. isActive adds aria-current="page" and the active visual treatment. Use as to render another native element, or delegate to compose a custom component.

Prop	Type	Default	Description
`isActive`	`boolean`		Highlights the link as the current page
`size`	`ButtonSize`	`"icon"`	Controls the link size
`as`	`keyof HTMLElementTagNameMap`	`"a"`	Native element to render

The delegate snippet receives { props, ref }. Forward props to your component and bind its native element ref to ref.current.

Prop	Type	Default	Description
`delegate`	`Snippet<[PaginationLinkDelegateProps]>`	-	Render a custom component with the link props and ref

Pagination.Previous

Link to the previous page. Includes a Hugeicons left chevron and “Previous” text.

Pagination.Next

Link to the next page. Includes “Next” text and a Hugeicons right chevron.

Pagination.Ellipsis

Ellipsis indicator for skipped pages with screen reader text “More pages”.