Pagination

Pagination with page navigation, next and previous links.

package examples import "github.com/axadrn/shadcn-templ/v2/components/pagination"

package examples import "github.com/axadrn/shadcn-templ/v2/components/pagination" templ PaginationDemo() {	@pagination.Pagination() {		@pagination.Content() {			@pagination.Item() {				@pagination.Previous(pagination.PreviousProps{Href: "#"})			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					1				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {					2				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					3				}			}			@pagination.Item() {				@pagination.Ellipsis()			}			@pagination.Item() {				@pagination.Next(pagination.NextProps{Href: "#"})			}		}	}}

Installation

shadcn-templ add pagination

Copy and paste the following code into your project.

components/pagination/pagination.templ

package pagination import (	"github.com/axadrn/shadcn-templ/v2/components/button"	"github.com/axadrn/shadcn-templ/v2/components/icon"	"github.com/axadrn/shadcn-templ/v2/utils") type Props struct {	ID         string	Class      string	Attributes templ.Attributes} type ContentProps struct {	ID         string	Class      string	Attributes templ.Attributes} type ItemProps struct {	ID         string	Class      string	Attributes templ.Attributes} type LinkProps struct {	ID         string	Class      string	Attributes templ.Attributes	Href       string	IsActive   bool	Disabled   bool} type PreviousProps struct {	ID         string	Class      string	Attributes templ.Attributes	Href       string	Disabled   bool	Text      string} type NextProps struct {	ID         string	Class      string	Attributes templ.Attributes	Href       string	Disabled   bool	Text      string} templ Pagination(props ...Props) {	{{ var p Props }}	if len(props) > 0 {		{{ p = props[0] }}	}	<nav		if p.ID != "" {			id={ p.ID }		}		role="navigation"		aria-label="pagination"		data-slot="pagination"		class={ utils.CN("cn-pagination mx-auto flex w-full justify-center", p.Class) }		{ p.Attributes... }	>		{ children... }	</nav>} templ Content(props ...ContentProps) {	{{ var p ContentProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<ul		if p.ID != "" {			id={ p.ID }		}		data-slot="pagination-content"		class={ utils.CN("cn-pagination-content flex items-center", p.Class) }		{ p.Attributes... }	>		{ children... }	</ul>} templ Item(props ...ItemProps) {	{{ var p ItemProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	<li		if p.ID != "" {			id={ p.ID }		}		data-slot="pagination-item"		if p.Class != "" {			class={ p.Class }		}		{ p.Attributes... }	>		{ children... }	</li>} templ Link(props ...LinkProps) {	{{ var p LinkProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Disabled {		@button.Button(button.Props{			ID:         p.ID,			Disabled:   true,			Size:       button.SizeIcon,			Variant:    button.VariantGhost,			Class:      utils.CN("cn-pagination-link", p.Class),			Attributes: p.Attributes,		}) {			{ children... }		}	} else {		{{			attrs := templ.Attributes{"data-slot": "pagination-link"}			if p.IsActive {				attrs["aria-current"] = "page"				attrs["data-active"] = "true"			}			for k, v := range p.Attributes {				attrs[k] = v			}		}}		@button.Button(button.Props{			ID:         p.ID,			Href:       p.Href,			Size:       button.SizeIcon,			Variant:    button.Variant(buttonVariant(p.IsActive)),			Class:      utils.CN("cn-pagination-link", p.Class),			Attributes: attrs,		}) {			{ children... }		}	}} templ Previous(props ...PreviousProps) {	{{ var p PreviousProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Text == "" {		{{ p.Text = "Previous" }}	}	{{		attrs := templ.Attributes{"aria-label": "Go to previous page", "data-slot": "pagination-link"}		for k, v := range p.Attributes {			attrs[k] = v		}	}}	@button.Button(button.Props{		ID:         p.ID,		Href:       p.Href,		Disabled:   p.Disabled,		Variant:    button.VariantGhost,		Class:      utils.CN("cn-pagination-previous", p.Class),		Attributes: attrs,	}) {		@icon.ChevronLeft(icon.Props{Class: "cn-rtl-flip", Attributes: templ.Attributes{"data-icon": "inline-start"}})		<span class="cn-pagination-previous-text hidden sm:block">{ p.Text }</span>	}} templ Next(props ...NextProps) {	{{ var p NextProps }}	if len(props) > 0 {		{{ p = props[0] }}	}	if p.Text == "" {		{{ p.Text = "Next" }}	}	{{		attrs := templ.Attributes{"aria-label": "Go to next page", "data-slot": "pagination-link"}		for k, v := range p.Attributes {			attrs[k] = v		}	}}	@button.Button(button.Props{		ID:         p.ID,		Href:       p.Href,		Disabled:   p.Disabled,		Variant:    button.VariantGhost,		Class:      utils.CN("cn-pagination-next", p.Class),		Attributes: attrs,	}) {		<span class="cn-pagination-next-text hidden sm:block">{ p.Text }</span>		@icon.ChevronRight(icon.Props{Class: "cn-rtl-flip", Attributes: templ.Attributes{"data-icon": "inline-end"}})	}} templ Ellipsis() {	<span aria-hidden="true" data-slot="pagination-ellipsis" class="cn-pagination-ellipsis flex items-center justify-center">		@icon.Ellipsis()		<span class="sr-only">More pages</span>	</span>} func buttonVariant(isActive bool) button.Variant {	if isActive {		return button.VariantOutline	}	return button.VariantGhost}

Update the import paths to match your project setup.

Usage

import "github.com/axadrn/shadcn-templ/v2/components/pagination"

@pagination.Pagination() {	@pagination.Content() {		@pagination.Item() {			@pagination.Previous(pagination.PreviousProps{Href: "#"})		}		@pagination.Item() {			@pagination.Link(pagination.LinkProps{Href: "#"}) {				1			}		}		@pagination.Item() {			@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {				2			}		}		@pagination.Item() {			@pagination.Ellipsis()		}		@pagination.Item() {			@pagination.Next(pagination.NextProps{Href: "#"})		}	}}

Composition

Use the following composition to build a Pagination:

pagination.Pagination└── pagination.Content    ├── pagination.Item    │   └── pagination.Previous    ├── pagination.Item    │   └── pagination.Link    ├── pagination.Item    │   └── pagination.Ellipsis    └── pagination.Item        └── pagination.Next

Simple

A simple pagination with only page numbers.

package examples import "github.com/axadrn/shadcn-templ/v2/components/pagination"

package examples import "github.com/axadrn/shadcn-templ/v2/components/pagination" templ PaginationSimple() {	@pagination.Pagination() {		@pagination.Content() {			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					1				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#", IsActive: true}) {					2				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					3				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					4				}			}			@pagination.Item() {				@pagination.Link(pagination.LinkProps{Href: "#"}) {					5				}			}		}	}}

Icons Only

Use just the previous and next buttons without page numbers. This is useful for data tables with a rows per page selector.

Rows per page

package examples import (

package examples import (	"github.com/axadrn/shadcn-templ/v2/components/field"	"github.com/axadrn/shadcn-templ/v2/components/pagination"	selectcomp "github.com/axadrn/shadcn-templ/v2/components/select") templ PaginationIconsOnly() {	<div class="flex items-center justify-between gap-4">		@field.Field(field.Props{Orientation: field.OrientationHorizontal, Class: "w-fit"}) {			@field.Label(field.LabelProps{For: "select-rows-per-page"}) {				Rows per page			}			@selectcomp.Select(selectcomp.Props{Value: "25"}) {				@selectcomp.Trigger(selectcomp.TriggerProps{ID: "select-rows-per-page", Class: "w-20"}) {					@selectcomp.Value()				}				@selectcomp.Content(selectcomp.ContentProps{Align: selectcomp.AlignStart}) {					@selectcomp.Group() {						@selectcomp.Item(selectcomp.ItemProps{Value: "10"}) {							10						}						@selectcomp.Item(selectcomp.ItemProps{Value: "25"}) {							25						}						@selectcomp.Item(selectcomp.ItemProps{Value: "50"}) {							50						}						@selectcomp.Item(selectcomp.ItemProps{Value: "100"}) {							100						}					}				}			}		}		@pagination.Pagination(pagination.Props{Class: "mx-0 w-auto"}) {			@pagination.Content() {				@pagination.Item() {					@pagination.Previous(pagination.PreviousProps{Href: "#"})				}				@pagination.Item() {					@pagination.Next(pagination.NextProps{Href: "#"})				}			}		}	</div>}

API Reference

Pagination

The Pagination component is the nav landmark that wraps the page controls.

Prop	Type	Default
`Class`	`string`	-

PaginationContent

The pagination.Content component is the list that holds the items.

Prop	Type	Default
`Class`	`string`	-

PaginationItem

The pagination.Item component wraps a single control.

Prop	Type	Default
`Class`	`string`	-

PaginationLink

The pagination.Link component is a page link, outlined while active.

Prop	Type	Default
`Href`	`string`	-
`IsActive`	`bool`	`false`
`Disabled`	`bool`	`false`
`Class`	`string`	-

PaginationPrevious

The pagination.Previous component links to the previous page.

Prop	Type	Default
`Href`	`string`	-
`Text`	`string`	`Previous`
`Disabled`	`bool`	`false`
`Class`	`string`	-

PaginationNext

The pagination.Next component links to the next page.

Prop	Type	Default
`Href`	`string`	-
`Text`	`string`	`Next`
`Disabled`	`bool`	`false`
`Class`	`string`	-

PaginationEllipsis

The pagination.Ellipsis component marks collapsed pages.

Prop	Type	Default
-	-	-

Label Popover

On This Page

Installation Usage Composition Simple Icons Only API Reference Pagination PaginationContent PaginationItem PaginationLink PaginationPrevious PaginationNext PaginationEllipsis

Ship your shadcn-templ app with goilerplate

The Go + templ SaaS boilerplate. Auth, payments, UI. Done.

Now $99 instead of $199.