Polaroid Photo Gallery

Blog26: Polaroid Photo Gallery

A centered header (optional badge, heading, and description) above a responsive 1/2/3-column grid of polaroid-style post cards, each a linked white-bordered frame with a square cover image and a centered title plus an author-and-date caption line, tilted by a repeating rotation pattern that straightens to level 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/blog26?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

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

Quick start

The installed file exports blog26Demo alongside the block: the exact props behind the preview above. Spread it to get a working polaroid gallery in one line.

import { Blog26, blog26Demo } from "@/components/beste/block/blog26";

export default function Page() {
  return <Blog26 {...blog26Demo} />;
}

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

import { Blog26 } from "@/components/beste/block/blog26";

export default function Page() {
  return (
    <Blog26
      badge={{ label: "Gallery", variant: "default" }}
      heading="Photo Stories"
      description="Visual stories from our team."
      posts={[
        {
          image: { src: "/photos/design-systems.jpg", alt: "Design systems" },
          title: "The Future of Design Systems",
          summary: "How design systems are evolving.",
          date: "January 15, 2026",
          author: { name: "Lisa Park", title: "Senior Developer" },
          href: "/blog/design-systems",
        },
      ]}
    />
  );
}

Props

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;
};

Behavior notes

• Each card is rotated by a fixed six-entry pattern (-rotate-2, rotate-1, -rotate-1, rotate-2, -rotate-1, rotate-1) indexed by index % 6, so the tilt sequence repeats every six posts and is deterministic, not random per render.
• On hover the whole <article> animates to hover:rotate-0 (straightening the polaroid) while the inner frame swaps shadow-lg for shadow-xl and the title shifts to text-primary.
• The entire card is a single next/link pointing at post.href, falling back to "#" when href is omitted, so a hrefless card is still clickable but goes nowhere.
• The header block is only rendered when at least one of badge, heading, or description is provided; with all three absent the grid renders alone.
• The caption line prints post.author?.name and appends · {date} only when date is set; if author is missing the caption starts with the separator-less date or renders empty.
• The title uses line-clamp-1, so long titles are truncated to a single line, and cover images are forced into a aspect-square frame with object-cover.
• summary, readTime, author.title, author.avatar, author.href, and every tags field are accepted by the types but never rendered by this block; only image, title, href, author.name, and date reach the DOM.
• Card backgrounds and borders are hardcoded to white in light mode and switch to card tokens under dark:, so the polaroid frame is not theme-token driven in light mode.