Skip to content

ProUnlock everything for $49.99 a year, or $79.99 once. See plans ›

Nexus UI

Liquid Pagination, animated React component

Page controls where the selection is a drop of water. Pick a page and the drop stretches toward it, its front edge racing ahead of its back edge, then pulls itself round; numbers turn white only where the drop covers them, and the row of numbers reflows a beat later, sliding in from the side you are heading. Grab the drop and drag it, fling it and it coasts to a page, pull it past either end and it stretches against the edge. The dots variant is the iPhone page control: tap either side to step, or press and slide along it to scrub. Arrow keys, Home and End work in both. Use it controlled with page and onChange, or uncontrolled with defaultPage. Until you touch it, it moves through the pages by itself.

  • Pro
  • Inputs & Controls
  • Spring

Play with it

Move the controls and watch it change. Copy code gives you a snippet with only the props you changed.

Props

PropTypeDefaultWhat it does
countnumber—The number of pages. Defaults to 24 for numbers and 6 for dots.
pagenumber—The current page, 1-based, to control it yourself.
defaultPagenumber—The page to start on when you do not control it. Defaults to 6 for numbers and 1 for dots.
onChange(page: number) => void—Called with the new page.
variant"numbers" | "dots""numbers"Numbered pages with arrows, or a row of dots like the iPhone page control.
siblingsnumber1Pages shown either side of the current one, for the numbers variant.
colorstring"#1d1d1f"The colour of the drop.
labelstring—The accessible label for the control. Defaults to Pagination for numbers and Page for dots.
autoplaybooleanfalseMoves through the pages by itself until the first interaction.
classNamestring—Extra classes for the outer wrapper.

Add it to your project

  1. 1

    Set up your project once

    You need a Next.js project with Tailwind CSS and the @/ import alias. In its root folder, run this once. It creates components.json and the cn() helper in src/lib/utils.ts:

    npx shadcn@latest init -d

    Starting from nothing? The Quick Start walks through the whole thing.

  2. 2

    Connect the registry with your API key

    Liquid Pagination is a Pro item, so the CLI has to send your API key. Do this once per project:

    1. Create a key at nexus-ui.com/dashboard/api-key. Copy it straight away: it starts with nxs_ and is shown only once.
    2. In your project root, next to package.json, create a file named .env.local with this line, using your own key:
      NEXUS_API_KEY=nxs_your_key_here
    3. Open components.json and add this entry inside the outermost braces, next to "aliases". Leave {name} and ${NEXUS_API_KEY} exactly as written; the CLI fills them in:
      "registries": {
  "@nexus-labs": {
    "url": "https://www.nexus-ui.com/api/registry/{name}",
    "headers": {
      "Authorization": "Bearer ${NEXUS_API_KEY}"
    }
  }
}

More inputs & controls