Prev Next Articles

Installation

pnpm dlx shadcn@latest add @cleverui/prev-next-articles

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { PrevNextArticles } from '@/components/blocks/prev-next-articles'

Exampletsx

import { PrevNextArticles } from '@/components/blocks/prev-next-articles'

export default function PrevNextArticlesDemo() {
  return (
    <div className="mx-auto w-full max-w-6xl px-4 py-12 sm:px-6">
      <PrevNextArticles
        previous={{
          title: 'Why we killed the status page carousel',
          href: '#status-carousel',
          category: 'Engineering',
        }}
        next={{
          title: 'Ship notes: the ledger view in Fieldkit 2.4',
          href: '#fieldkit-24',
          category: 'Release',
        }}
      />
    </div>
  )
}

API reference

PrevNextArticles accepts the following props.

Prop	Type	Default	Description
`previous`	`PrevNextArticleLink`	–	the earlier article; omit when none exists
`next`	`PrevNextArticleLink`	–	the later article; omit when none exists
`previousLabel`	`string`	`'Previous'`	–
`nextLabel`	`string`	`'Next'`	–
`label`	`string`	`'Article pagination'`	accessible name for the nav landmark

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface PrevNextArticleLink {
  title: string
  href: string
  category?: string
}

Related components

Article TOC Rail

Sticky table-of-contents rail for React articles, mono indices, a hairline spine, and a primary tick that slides to the active heading via built-in scroll-spy. Tailwind tokens throughout.

Article Card Grid

Editorial article cards, mono kicker with category and read time, display titles, a dek line, and initials-avatar bylines. The featured story spans wide inside a hairline frame.

Article Header

The opening block of a post, category eyebrow, display title, standfirst, and a byline row with preformatted date and read time, closed by a hairline rule that draws itself.

Author Bio Card

End-of-article author bio for React blogs, mono initials avatar, role, short bio, quiet text links, and a 'More from' reading list with preformatted dates. Tailwind tokens, zero icon clutter.

Pull Quote Break

An in-article pause, an oversized pull quote set against a primary quote-bar keyline, attribution in mono, and generous whitespace on both sides. Typography does all the work.

Index Sheet Footer

A footer set like a book's index, dense, beautifully-ordered link columns with mono folio numbers, a hairline frame, and a colophon line. For sites with real depth.

Frequently asked questions

How do I install the Prev Next Articles component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/prev-next-articles`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Prev Next Articles require?

Prev Next Articles uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Prev Next Articles to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code