Category Tabs Filter

Blog8: Category Tabs Filter

A category-tabbed blog grid: a centered badge/heading/description header sits above a shadcn Tabs bar whose triggers come from your category list, and each tab panel renders a responsive card grid of matching posts, every card showing a hover-zoomed cover image, a two-line-clamped title and summary, and an author avatar with read time.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/blog8?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/blog8?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/blog8.tsx, plus the badge, avatar, and tabs shadcn/ui primitives it uses for the header eyebrow, author images, and the category tab bar.

Quick start

The installed file exports blog8Demo alongside the block: the exact props behind the preview above. Spread it to get a working filterable blog grid in one line.

import { Blog8, blog8Demo } from "@/components/beste/block/blog8";

export default function Page() {
  return <Blog8 {...blog8Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Blog8 } from "@/components/beste/block/blog8";

export default function Page() {
  return (
    <Blog8
      badge={{ label: "Blog", variant: "default" }}
      heading="Browse by Category"
      description="Find articles that match your interests."
      categories={[
        { label: "All", value: "all" },
        { label: "Design", value: "design" },
        { label: "Development", value: "development" },
      ]}
      posts={[
        {
          image: { src: "/covers/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems evolve to meet complex app demands.",
          readTime: "8 min read",
          author: { name: "Lisa Park", avatar: { src: "/authors/lisa.jpg", alt: "Lisa Park" } },
          category: "design",
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

type Category = {
  label: string;
  value: string;
};

type Author = {
  name: string;
  title?: string;
  avatar?: { src: string; alt: string };
  href?: string;
};

type Tag = {
  label: string;
  href?: string;
};

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  author?: Author;
  tags?: Tag[];
  href?: string;
  category?: string;
};

Behavior notes

• The active tab defaults to categories[0]?.value ?? "all", so the first category you list is the one shown on mount; the whole tab bar is hidden when categories is empty.
• Filtering is by exact string match: a tab with value "all" returns every post untouched, and any other value keeps only posts whose category equals it, so posts with no category only ever appear under the "all" tab.
• The component renders one TabsContent panel per category and re-filters posts inside each, meaning a post assigned to two categories would need two matching category values to appear in both.
• Each card's cover image and title link to post.href, falling back to "#" when href is omitted; the image scales to 105% on card hover and the title shifts to text-primary.
• The author block renders only when post.author is set, and the avatar image only when post.author.avatar is present; otherwise an AvatarFallback shows the author's initials derived from splitting name on spaces.
• title and summary are each clamped to two lines via line-clamp-2, and readTime (when present) sits opposite the author using text-xs.
• Post cards are keyed by array index rather than a stable id, so reordering or filtering large lists can reuse DOM nodes unexpectedly; there are no click callbacks, only plain navigation links.