Post Grid

Preview

Install

1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

   npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

   npx shadcn@latest add @txbrendan/theme

3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

   npx shadcn@latest add @txbrendan/post-grid

Props

• posts

  The posts, newest first. Each href must be unique, since it is the key. A post with a tag joins the filter under that tag.

  Post[]

• Post

  Type. One post. `date` is an ISO date, like "2026-03-04", shown as "Mar 4, 2026". `readingTime` is words, like "6 min read". `tone` colors the default cover, default "neutral".

  { href: string; title: ReactNode; excerpt?: ReactNode; tag?: string; date: string; readingTime?: string; author?: { name: string; avatar?: string }; cover?: ReactNode; tone?: "neutral" | "brand" | "danger" | "success" | "warning" }

• featured

  Draws the first post wide across the top, with its cover beside the words from 48rem, while every post shows.

  boolean · default false

• filter

  Shows a row of tags over the grid, All first, then each tag in the order the posts bring them. The grid slides to the picked tag's posts.

  boolean · default false

• value

  The tag shown, or null for every post. Pass it to control the filter.

  string | null

• defaultValue

  The tag shown first, when the filter is not controlled.

  string | null · default null

• onValueChange

  Called with the tag picked, or null for All.

  (value: string | null) => void

• renderLink

  Draws each post's link. Spread the props onto your router's link: (props) => <Link {...props} />.

  (props: PostGridLinkProps) => ReactNode · default a plain <a>

• headingLevel

  The level of each post's title, so it fits under the heading above it.

  2 | 3 | 4 · default 3

• locale

  The language the dates are written in.

  string · default "en-US"

• allLabel

  The first tag, which shows every post.

  string · default "All"

• filterLabel

  The name screen readers give the row of tags.

  string · default "Filter posts by tag"

• emptyLabel

  What shows when no post is left to show.

  ReactNode · default "No posts yet."

• showAllLabel

  The button under the empty line while a tag is picked. It goes back to every post.

  string · default "Show all"

• className

  Extra classes on the root, which holds the container query.

  string

Accessibility

• The posts are a list, and each one is an article with its title as a heading at `headingLevel`.
• Each post is one link: the title, stretched over the whole post. Screen readers hear one link per post, named by its title.
• A focused post outlines the whole card.
• The date is a <time> with the ISO date, and the avatar is hidden, since the name is written beside it.
• The default cover is hidden from screen readers. Give an <img> cover an empty alt, since the title already says what the post is.
• The row of tags is a tablist named by `filterLabel`. The arrow keys move between tags, and the grid is its panel.
• While the grid slides, the posts leaving are inert, so nothing in them takes focus or a press.
• For a moment after a switch, a press on a post that just slid in under the pointer opens nothing, so a double click never opens a post by mistake.
• In forced colors each cover gets a border, so its edge still shows when its fill is painted away.

Examples

<Article
  title="Shared folders are here"
  date="2026-10-28"
  tag="Product"
  cover={<PostGridCover post={{ href: "/blog/shared-folders", tag: "Product", tone: "brand" }} />}
>
  <p>Put files in one folder that the whole team can open.</p>
</Article>

<PostGrid
  featured
  filter
  headingLevel={2}
  posts={[
    {
      href: "/blog/shared-folders",
      title: "Shared folders are here",
      excerpt: "Put files in one folder that the whole team can open.",
      tag: "Product",
      date: "2026-10-28",
      readingTime: "4 min read",
      author: { name: "Priya Raman" },
      tone: "brand",
    },
    {
      href: "/blog/review-designs",
      title: "How we review designs each week",
      tag: "Design",
      date: "2026-10-21",
      author: { name: "Elin Sato", avatar: "/people/elin.jpg" },
      cover: <img src="/covers/review.jpg" alt="" />,
    },
  ]}
/>

<PostGrid
  posts={morePosts.slice(0, 3)}
  renderLink={(props) => <Link {...props} />}
/>

const [tag, setTag] = useState<string | null>(searchParams.get("tag"));

<PostGrid
  filter
  posts={posts}
  value={tag}
  onValueChange={(next) => {
    setTag(next);
    router.replace(next ? `/blog?tag=${encodeURIComponent(next)}` : "/blog", { scroll: false });
  }}
/>

<PostGrid posts={posts} locale="de-DE" allLabel="Alle" filter filterLabel="Beiträge nach Thema filtern" />