Mesh gradient

Blog card grid on soft mesh gradients.

Usage

import { Cards01 } from '@/components/blocks/cards-01'


<Cards01
  title="Latest from the team"
  actionLabel="All posts"
  actionHref="/blog"
  items={[
    { title: 'Fewer meetings, clearer weeks', gradient: 'tint', category: 'Workflow', date: 'Sep 12, 2026', description: 'How small async rituals give teams back their focus time', href: '/blog/fewer-meetings' },
    { title: 'Handoffs that never drop the ball', gradient: 'stone', category: 'Teams', date: 'Aug 28, 2026', href: '/blog/handoffs' },
    { title: 'Turning busywork into momentum', gradient: 'graphite', category: 'Product', date: 'Aug 9, 2026', href: '/blog/momentum' },
  ]}
/>

Install

pnpm dlx shadcn@latest add @pastaui-pro/cards-01

npx shadcn@latest add @pastaui-pro/cards-01

yarn dlx shadcn@latest add @pastaui-pro/cards-01

bunx --bun shadcn@latest add @pastaui-pro/cards-01

Source

Props

Mesh gradient props
Prop	Type	Default	Description
title	ReactNode	= Fresh reads for focused teams	Section heading.
actionLabel / actionHref	string	= View all / #	Pill button beside the heading; pass an empty label to hide it.
items	Card01Item[]	= Three sample cards	Each card: title (on the gradient), gradient, and optional category, date, description (below the gradient), and href.
items[].gradient	'tint' \| 'stone' \| 'graphite'	= —	Mesh-gradient palette behind the title.
animated	boolean	= true	Slowly drifts the gradient blobs; respects reduced motion.
className	string	= —	Additional classes for the section.