Sneak Peek Feature Grid

ComingSoon5: Sneak Peek Feature Grid

A centered coming-soon section that stacks a badge, heading, description, and a revealed-count line above a responsive grid of feature cards, where unrevealed cards blur their contents behind a lock overlay, and closes with a pulsing-dot footer note.

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

Base UI flavor

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

This installs the block to components/beste/block/comingsoon5.tsx.

Quick start

The installed file exports comingsoon5Demo alongside the block: the exact props behind the preview above. Spread it to get a working sneak-peek grid in one line.

import { ComingSoon5, comingsoon5Demo } from "@/components/beste/block/comingsoon5";

export default function Page() {
  return <ComingSoon5 {...comingsoon5Demo} />;
}

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

import { BarChart3, Lock } from "lucide-react";
import { ComingSoon5 } from "@/components/beste/block/comingsoon5";

export default function Page() {
  return (
    <ComingSoon5
      badge={{ label: "Sneak peek", variant: "secondary" }}
      heading="A glimpse of what's next"
      description="A preview of the capabilities we're building behind the scenes."
      features={[
        {
          icon: <BarChart3 className="size-6" />,
          title: "Advanced analytics",
          hint: "Real-time dashboards over your data",
          revealed: true,
        },
        {
          icon: <Lock className="size-6" />,
          title: "Enterprise security",
          hint: "SOC 2 compliance and threat protection",
          revealed: false,
        },
      ]}
      labels={{
        revealedCount: "{revealed} of {total} features revealed",
        comingSoon: "Coming soon",
      }}
      footerText="More features to be announced soon"
    />
  );
}

Props

interface FeaturePreview {
  icon: React.ReactNode;
  title: string;
  hint: string;
  revealed?: boolean;
}

Behavior notes

• The revealed-count line derives revealedCount from features.filter((f) => f.revealed).length, then interpolates it into labels.revealedCount by replacing the {revealed} and {total} tokens with the counts.
• Each card branches on feature.revealed: revealed cards use a solid bg-card surface, while unrevealed cards get a dashed border, a backdrop-blur-[2px] overlay with a Lock icon and the comingSoon label, and their content dimmed to opacity-40 select-none.
• The feature grid, its count line, and each card only render when features.length > 0; the badge, heading, description, and footer each render only when their prop is present.
• The grid is a fixed responsive layout stepping from one column to sm:grid-cols-2 to lg:grid-cols-3, and every card carries the caller-supplied icon node in a rounded tile beside its title.
• footerText renders with an animate-pulse dot, and every string is plain text with no inline markup parsing, so HTML passed in shows as escaped text.
• Uses the shadcn Badge primitive for the eyebrow and lucide icons for the per-feature and lock glyphs.