Tutorial Series Cards

Blog36: Tutorial Series Cards

Renders a centered badge/heading/description header above a vertical stack of series cards, where each card shows a book icon with a "N Part Series" label, the series title and description, and a list of post rows linking to each part with a thumbnail, title, summary, optional date and read time, and a chevron that slides on hover.

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/blog36?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/blog36.tsx, plus the badge shadcn/ui primitive it uses for the header eyebrow.

Quick start

The installed file exports blog36Demo alongside the block: the exact props behind the preview above. Spread it to get a working tutorial series listing in one line.

import { Blog36, blog36Demo } from "@/components/beste/block/blog36";

export default function Page() {
  return <Blog36 {...blog36Demo} />;
}

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

import { Blog36 } from "@/components/beste/block/blog36";

export default function Page() {
  return (
    <Blog36
      badge={{ label: "Learn", variant: "default" }}
      heading="Tutorial Series"
      description="Step-by-step guides to master new skills."
      series={[
        {
          title: "Building a Design System",
          description: "Create a scalable design system from scratch.",
          totalParts: 2,
          posts: [
            {
              image: { src: "/foundations.jpg", alt: "Foundations" },
              title: "Part 1: Foundations & Principles",
              summary: "Establishing core design tokens and guidelines.",
              date: "January 5, 2026",
              readTime: "8 min",
              href: "/blog/design-system-1",
            },
            {
              image: { src: "/components.jpg", alt: "Components" },
              title: "Part 2: Component Architecture",
              summary: "Building reusable component patterns.",
              date: "January 8, 2026",
              readTime: "12 min",
              href: "/blog/design-system-2",
            },
          ],
        },
      ]}
    />
  );
}

Props

type BlogPost = {
  image: { src: string; alt: string };
  title: string;
  summary: string;
  date?: string;
  readTime?: string;
  href?: string;
};

type Series = {
  title: string;
  description: string;
  totalParts: number;
  posts: BlogPost[];
};

Behavior notes

• The entire header block is conditionally rendered and only appears when at least one of badge, heading, or description is provided; with all three omitted the series stack sits at the top of the section.
• badge.variant falls back to "default" when unset, and heading and description each render only when individually present.
• The totalParts value is a display-only label rendered as "N Part Series"; it is not derived from posts.length, so the number can disagree with the actual count of rows if you set them inconsistently.
• Each post row is a next/link Link pointing at post.href, defaulting to "#" when href is omitted, so a post without a link becomes a same-page anchor rather than being disabled.
• Post title and summary are each clamped to a single line with line-clamp-1, and the date / readTime metadata row renders each span only when that field is present (read time is suffixed with " read").
• Images use a plain <img> with object-cover inside a fixed size-16 square; there is no next/image, lazy-loading, or aspect-ratio handling beyond the crop.
• The chevron starts nudged one step right (translate-x-1) and animates back to translate-x-0 on hover via the group/blog36 hover group; it is decorative only and carries no separate click target.
• There are no callbacks, no lifted state, and no client interactivity beyond hover styling, despite the "use client" directive at the top of the file.