Orvain UI

Rows per page, Keeps your place

Tables people read down, where a new page size should not lose the row.

Get Pro to installPro18 blocksReact, Vue and Figma
MCPConnect the MCP server

Invoices

  • INV-2061Halden Studio$1,703.80
  • INV-2062Northwind Supply$1,782.99
  • INV-2063Blue Fern Cafe$1,862.18
  • INV-2064Kestrel Labs$1,941.37
  • INV-2065Atlas Freight$2,020.56

Reading from INV-2061

More in Pagination blocks#

Chevron ends

A tight row where the ends need to be reachable rather than explained

Of-N stepper

A narrow footer: one number, its total, and a way to jump straight to a page

Labelled ends

A footer with room for words: Previous and Next survive translation and a screen reader better

Go to page

Long sets where paging one at a time is not the point: type the page and go

Rows per page

The other half of paging: how many rows a page is, before which page you are on

Raised Next

A screen where moving between pages is the main thing happening

Chevron ends, Lens

A tight row where the motion should say which way you went

Chevron ends, Scrub

Sets where the middle pages matter as much as the neighbours

Of-N stepper, Type in place

A narrow footer where people know the page they want

Of-N stepper, Capsule

A compact pager that also shows how far through the set you are

Labelled ends, Destinations

Docs and long reads where the next page has a name

Labelled ends, Load more

Feeds and long lists where pages are an implementation detail

Go to page, Jump field

Long sets where people type the page and want to see it is valid first

Go to page, By name

Alphabetical sets where people remember a surname, not a page number

Rows per page, Table footer

Data tables that need the footer everyone expects

Rows per page, Keeps your place

Tables people read down, where a new page size should not lose the row

Raised Next, Next leads

Readers who mostly go forward

Raised Next, Segments

A short set where the shape of the whole thing is worth seeing

When to use#

  • A result set long enough that people jump to a page rather than scroll to one.
  • Under a table, where the reader also has to choose how many rows a page is.
  • Queries paged on the server, where a page is a request rather than a slice of something already loaded.
  • A position that has to survive a reload, a shared link or a colleague reading it out.

The whole set, with its codePro

Pro opens the Code tab on every block here, in React and Vue, plus the Figma file and the MCP server for your editor.

Open in BlocksSee plans