Case studies

Customer story grid for shadcn/ui: a centred heading stack over six Cards, each with a cover photo, an industry Badge floating on the image, a lucide wordmark, a story title, one large tabular headline metric with its label and a "Read story" arrow link that covers the whole card. Collapses to two columns on tablets and one on phones. The default customers index for a product marketing site.

Featured case study for shadcn/ui: a two-column Card with a full-height photo on the left and, on the right, a wordmark eyebrow, headline, three result metrics in a bordered grid-cols-3 row, a customer quote with Avatar and a Button. Below it a three-cell divided row of smaller stories showing only a title and a metric. Good for the top of a customers page or a homepage proof section.

Filterable customer stories for shadcn/ui: pill Buttons with counts for All, Fintech, Healthcare, Mobility and SaaS drive a useState filter over a two-column grid of wide horizontal Cards – a small photo on the left, wordmark, title and metric Badges on the right. Includes a dashed empty state with a reset Button when nothing matches. Suits companies that sell across several verticals.

Dense results list for shadcn/ui: a heading with lead above five divide-y rows that place the wordmark in a fixed-width left column, title plus one-line summary in the centre and a large tabular metric with an ArrowUpRight icon on the right. Each row is a single hover-tinted link. Works well as a proof section between features and pricing.

Full-bleed bg-muted testimonial band for shadcn/ui: a wordmark, a large text-2xl to text-3xl blockquote, an Avatar with name, role and company, three bordered stat tiles in an md:grid-cols-3 row and a footer with a one-line company profile and a "Read the full story" link. Ideal for a single strong customer quote between two white sections.

Hero for a single case study built with shadcn/ui: a Customers breadcrumb, wordmark, text-4xl to text-5xl title, lead, a meta row of Badges for industry, company size and products used, a 21:9 cover photo and an md:grid-cols-3 body with article copy and a pull quote with Avatar on the left and a sticky "At a glance" Card listing Challenge, Solution and Results with Separators on the right.

Combined proof section for shadcn/ui: a muted six-up row of lucide wordmarks (grid-cols-3 md:grid-cols-6), three story Cards with a 4:3 photo, a large headline metric and a title, and a bordered bg-muted CTA row that offers an introduction to a similar customer with primary and outline Buttons. A compact way to put social proof and a conversion step in one block.