export const title = "Pagination components"
export const description = "Free and open-source React pagination components built for modern applications and websites. These pagination components are built using React Aria and styled with Tailwind CSS."
export const links = {
    github: "https://github.com/untitleduico/react/tree/main/components/application/pagination",
}

import * as Demos from "@/components/application/pagination/pagination.story.tsx";

<PreviewAndCode title="Pagination example">
    <ResizablePreview id="preview" className="flex px-4 md:px-8 py-32 min-h-[320px] justify-center items-center gap-3 rounded-[20px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationPageDefault />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationPageDefault" />
    </TabPanel>
</PreviewAndCode>

<Divider />

## Installation

You can add this pagination component using our CLI or manually:

<Tabs className="w-full mt-8">
    <TabList type="underline" items={[{ id:'cli', label:'CLI' }, { id:'manual', label:'Manual' }]} />

    <TabPanel id="cli" className="mt-8">
        ```bash
        npx untitledui@latest add pagination
        ```
    </TabPanel>

    <TabPanel id="manual">
        <Steps>
            <Step title="Copy component files">
                Copy the files below into your project:

                <ComponentCodeTabs component="application/pagination" filepath="pagination" />
            </Step>
            <Step title="Start using the components">
                Great! Now you can start using the pagination components in your project by just copy/pasting our examples below.
            </Step>
        </Steps>
    </TabPanel>
</Tabs>

<Divider />

## Pagination examples

Below are examples and variations of this pagination component:

### Page default {{ tocOnly:true }}

<PreviewAndCode title="Page default">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationPageDefault />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationPageDefault" />
    </TabPanel>
</PreviewAndCode>

### Page minimal center {{ tocOnly:true }}

<PreviewAndCode title="Page minimal center">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationPageMinimalCenter />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationPageMinimalCenter" />
    </TabPanel>
</PreviewAndCode>

### Card default {{ tocOnly:true }}

<PreviewAndCode title="Card default">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardDefault />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardDefault" />
    </TabPanel>
</PreviewAndCode>

### Card minimal right aligned {{ tocOnly:true }}

<PreviewAndCode title="Card minimal right aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardMinimalRightAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardMinimalRightAligned" />
    </TabPanel>
</PreviewAndCode>

### Card minimal center aligned {{ tocOnly:true }}

<PreviewAndCode title="Card minimal center aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardMinimalCenterAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardMinimalCenterAligned" />
    </TabPanel>
</PreviewAndCode>

### Card minimal left aligned {{ tocOnly:true }}

<PreviewAndCode title="Card minimal left aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardMinimalLeftAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardMinimalLeftAligned" />
    </TabPanel>
</PreviewAndCode>

### Button group right aligned {{ tocOnly:true }}

<PreviewAndCode title="Button group right aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationButtonGroupRightAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationButtonGroupRightAligned" />
    </TabPanel>
</PreviewAndCode>

### Button group center aligned {{ tocOnly:true }}

<PreviewAndCode title="Button group center aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationButtonGroupCenterAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationButtonGroupCenterAligned" />
    </TabPanel>
</PreviewAndCode>

### Button group left aligned {{ tocOnly:true }}

<PreviewAndCode title="Button group left aligned">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationButtonGroupLeftAligned />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationButtonGroupLeftAligned" />
    </TabPanel>
</PreviewAndCode>

### Card advanced {{ tocOnly:true }}

<PreviewAndCode title="Card advanced">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardAdvanced />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardAdvanced" />
    </TabPanel>
</PreviewAndCode>

### Card advanced center {{ tocOnly:true }}

<PreviewAndCode title="Card advanced center">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center px-4 md:px-8 flex-col py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationCardAdvancedCenter />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationCardAdvancedCenter" />
    </TabPanel>
</PreviewAndCode>

### Pagination dot {{ tocOnly:true }}

<PreviewAndCode title="Pagination dot">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center items-center px-4 md:px-8 py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationDotMd />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationDotMd" />
    </TabPanel>
</PreviewAndCode>

### Pagination line {{ tocOnly:true }}

<PreviewAndCode title="Pagination line">
    <ResizablePreview id="preview" className="rounded-[20px] flex gap-3 justify-center items-center px-4 md:px-8 py-32 min-h-[320px] ring-1 ring-inset ring-secondary bg-primary">
        <Demos.PaginationLineMd />
    </ResizablePreview>
    <TabPanel id="code" className="min-h-(--preview-height)">
        <ComponentCode component="pagination/PaginationLineMd" />
    </TabPanel>
</PreviewAndCode>