Responsive grid of use case cards with hover effects, images, descriptions, and feature checklists. Perfect for displaying solutions for different industries or customer segments.
Responsive card grid for pitching a product at different audiences: each card pairs a 16:9 hover-zoom image with a title, description, and a checklist of feature bullets. The grid runs two or three columns.
Free block
This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.
Radix flavor
npx shadcn add "https://ui.beste.co/r/usecase2"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/usecase2"This installs the block to components/beste/block/usecase2.tsx and the badge shadcn/ui primitive it depends on.
The installed file exports usecase2Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { UseCase2, usecase2Demo } from "@/components/beste/block/usecase2";
export default function Page() {
return <UseCase2 {...usecase2Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { UseCase2 } from "@/components/beste/block/usecase2";
export default function Page() {
return (
<UseCase2
badge={{ label: "Solutions", variant: "secondary" }}
heading="Tailored for Your Needs"
description="Explore how our platform adapts to different industries."
columns={2}
items={[
{
id: "startup",
title: "Startups",
description: "Launch faster with pre-built templates and scalable infrastructure.",
image: { src: "https://images.unsplash.com/photo-1497366216548-37526070297c", alt: "Startup workspace" },
features: [
{ id: "f1", text: "Quick setup in minutes" },
{ id: "f2", text: "Scalable from day one" },
],
},
{
id: "enterprise",
title: "Enterprise",
description: "Security, compliance, and customization for large organizations.",
image: { src: "https://images.unsplash.com/photo-1497366811353-6870744d04b2", alt: "Enterprise building" },
features: [{ id: "f3", text: "SOC 2 compliant" }],
},
]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Pill shown above the heading; omitted when badge.label is falsy |
heading | string | – | Section heading |
description | string | – | Section intro text |
items | UseCaseItem[] | – | Cards rendered in the grid |
columns | 2 | 3 | 3 | Grid column count at md/lg |
className | string | – | Extra classes for the outer <section> |
type UseCaseItem = {
id: string;
title: string;
description: string;
image?: { src: string; alt: string };
features?: UseCaseFeature[];
};
type UseCaseFeature = { id: string; text: string };columns={2} renders md:grid-cols-2; any other value (including the default 3) renders md:grid-cols-2 lg:grid-cols-3, so the grid is always single-column below md regardless of the prop.105% on hover (group-hover/usecase2:scale-105) inside an overflow-hidden wrapper, driven by the group/usecase2 named group on the card root.image collapses to just title, description, and (if given) the checklist.Check icon from lucide-react in text-primary, not a custom bullet character.usecase4
Card grid showcasing industry-specific solutions with icons, images, descriptions, and feature tags. Perfect for highlighting how your platform serves different verticals.
usecase37
Two-column grid of feature cards with icons, extended descriptions, and bullet point highlights. Perfect for comprehensive product feature or capability explanations.
usecase17
Card grid with background images that reveals detailed content on hover via smooth slide-up animation. Perfect for destination showcases or visual feature galleries.
usecase41
A use-case section with an eyebrow over a hairline rule, a two-column heading, and three bordered role cards with an icon chip, a monospace role label, a title, a description, and an arrow link.
usecase18
Card grid showcasing industries with icons, descriptions, and key statistics like company count and user numbers. Perfect for demonstrating market reach across verticals.
usecase1
Tab-based use case section with images, descriptions, and feature checklists that collapse to accordion on mobile. Perfect for showcasing how different teams or departments use your product.