Aurora Pagination
aurora-dinglebear-ai/aurora-paginationUnverifiedComponent
Page navigation controls with Aurora neutral button style and active accent page indicator.
Install it
npx shadcn@latest add https://raw.githubusercontent.com/dinglebear-ai/aurora/main/aurora-pagination.jsonSource
1"use client"23/**4 * Aurora Design System — Pagination5 * No additional peer deps required.6 */78import * as React from "react"9import { ChevronLeft, ChevronRight, Ellipsis } from "lucide-react"10import { Button } from "@/registry/aurora/ui/button"11import { cn } from "@/lib/utils"1213// ─── Pagination root ──────────────────────────────────────────────────────────1415function Pagination({ ref, className, ...props }: React.ComponentProps<"nav"> & { ref?: React.Ref<HTMLElement> }) {16 return (17 <nav18 ref={ref}19 role="navigation"20 aria-label="Pagination"21 className={cn("flex w-full max-w-full items-center justify-center overflow-x-auto", className)}22 {...props}23 />24 )25}2627// ─── PaginationContent ────────────────────────────────────────────────────────2829function PaginationContent({ ref, className, ...props }: React.ComponentProps<"ul"> & { ref?: React.Ref<HTMLUListElement> }) {30 return (31 <ul32 ref={ref}33 className={cn("flex min-w-max items-center gap-1", className)}34 {...props}35 />36 )37}3839// ─── PaginationItem ───────────────────────────────────────────────────────────4041function PaginationItem({ ref, className, ...props }: React.ComponentProps<"li"> & { ref?: React.Ref<HTMLLIElement> }) {42 return <li ref={ref} className={cn("", className)} {...props} />43}4445// ─── PaginationLink ───────────────────────────────────────────────────────────4647type PaginationBaseProps = {48 isActive?: boolean49 size?: "default" | "sm" | "lg"50}5152type PaginationAnchorProps = PaginationBaseProps &53 React.ComponentProps<"a"> & {54 href: string55 }5657type PaginationButtonProps = PaginationBaseProps &58 Omit<59 React.ComponentProps<typeof Button>,60 "variant" | "size" | "asChild" | "filled" | "block" | "shape" | "loading" | "pulse"61 > & {62 href?: undefined63 }6465export type PaginationLinkProps = PaginationAnchorProps | PaginationButtonProps6667// … truncated
What it pulls in
npm packages
Other registry items
Files it writes
More from aurora
All 176 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| Aurora Accordionaurora-accordion | aurora | Components | Unverified | 2 deps | |
| Aurora Alert Dialogaurora-alert-dialog | aurora | Components | Unverified | 2 deps | |
| Aurora Aspect Ratioaurora-aspect-ratio | aurora | Components | Unverified | no deps | |
| Aurora Avataraurora-avatar | aurora | Components | Unverified | 1 dep | |
| Aurora Badgeaurora-badge | aurora | Components | Unverified | 2 deps | |
| Aurora Banneraurora-banner | aurora | Components | Unverified | 1 dep | |
| Aurora Breadcrumbaurora-breadcrumb | aurora | Components | Unverified | 2 deps | |
| Aurora Buttonaurora-button | aurora | Components | Unverified | 2 deps |
