Article Card Grid

Installation

pnpm dlx shadcn@latest add @cleverui/article-card-grid

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

Usage

tsx

import { ArticleCardGrid } from '@/components/blocks/article-card-grid'

Exampletsx

import { ArticleCardGrid } from '@/components/blocks/article-card-grid'

export default function ArticleCardGridDemo() {
  return (
    <div className="mx-auto w-full">
      <ArticleCardGrid
        eyebrow="Journal"
        heading="Latest writing"
        articles={[
          {
            title: 'Designing calm dashboards that still surface risk',
            dek: 'How Meridian Ops rebuilt their incident board around progressive disclosure, fewer red badges, faster time-to-context for on-call engineers.',
            category: 'Product',
            readTime: '6 min',
            author: 'Asha Okonkwo',
            dateLabel: '12 Jul 2026',
            href: '#calm-dashboards',
            featured: true,
          },
          {
            title: 'Why we killed the status page carousel',
            dek: 'A postmortem on animated health widgets that trained users to ignore the only signal that mattered.',
            category: 'Engineering',
            readTime: '4 min',
            author: 'Jonas Reed',
            dateLabel: '8 Jul 2026',
            href: '#status-carousel',
          },
          {
            title: 'Ship notes: the ledger view in Fieldkit 2.4',
            dek: 'What changed in the inspection timeline, why we kept mono labels, and the three tickets we deferred.',
            category: 'Release',
            readTime: '3 min',
            author: 'Priya Nair',
            dateLabel: '3 Jul 2026',
            href: '#fieldkit-24',
          },
          {
            title: 'Writing RFCs that engineers actually open',
            dek: 'A structure borrowed from flight checklists, decision first, alternatives second, appendices last.',
            category: 'Process',
            readTime: '7 min',
            author: 'Elena Voss',
            dateLabel: '28 Jun 2026',
            href: '#rfcs',
          },
          {
            title: 'The case for preformatted dates in UI copy',
            dek: 'SSR honesty, locale traps, and why “12 Jul 2026” beats a client-side toLocaleDateString every time.',
            category: 'Craft',
            readTime: '5 min',
            author: 'Marcus Chen',
            dateLabel: '21 Jun 2026',
            href: '#preformatted-dates',
          },
        ]}
      />
    </div>
  )
}

API reference

ArticleCardGrid accepts the following props.

Prop	Type	Default	Description
`eyebrow`	`string`	–	mono micro-label above the section heading, e.g. 'Journal'
`heading`	`string`	–	section heading, e.g. 'Latest writing'
`articles`*	`ArticleCardItem[]`	–	–

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

Referenced types

Typestsx

export interface ArticleCardItem {
  title: string
  dek: string
  category: string
  /** PREFORMATTED, e.g. '6 min', never built from Date in render */
  readTime: string
  author: string
  /** PREFORMATTED, e.g. '12 Jul 2026', never built from Date in render */
  dateLabel: string
  href: string
  featured?: boolean
}

Related components

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.

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.

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.

Prev Next Articles

End-of-article pagination, two hairline panels with mono direction labels and display titles, hairlines extending on hover. A lone neighbour panel spans the full width.

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.

Grid Break

A deconstructing editorial grid for React, scroll shears each cell off its seat along seeded vectors as the drafting skeleton surfaces, then reseats in reverse. Tailwind-themed, zero dependencies.

Frequently asked questions

How do I install the Article Card Grid component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/article-card-grid`. 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 Article Card Grid require?

Article Card Grid 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 Article Card Grid 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