Centered headline, four feature tiles in a 2x2 grid, and a CTA. Each tile leads with a large Lucide icon and a short description.
Centered headline and description above a fixed two-column grid of icon-led feature tiles, closed by a row of CTA buttons. There is no badge prop, so the header is copy-only.
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/feature4"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature4"This installs the block to components/beste/block/feature4.tsx and the shadcn/ui button component it depends on.
The installed file exports feature4Demo alongside the block: the exact props behind the preview above. Spread it to get a working two-by-two feature grid in one line.
import { Feature4, feature4Demo } from "@/components/beste/block/feature4";
export default function Page() {
return <Feature4 {...feature4Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { BarChart3, Rocket, Target, Users } from "lucide-react";
import { Feature4 } from "@/components/beste/block/feature4";
export default function Page() {
return (
<Feature4
heading="Why teams pick our agency"
description="We combine data-driven strategy with creative execution."
features={[
{ icon: BarChart3, title: "Data-driven strategies", description: "Every campaign is backed by analytics." },
{ icon: Users, title: "Expert team and support", description: "A dedicated lead for every account." },
{ icon: Rocket, title: "Multi-channel approach", description: "One integrated plan across channels." },
{ icon: Target, title: "Results-focused campaigns", description: "Measured against revenue impact." },
]}
buttons={[{ label: "Get started today", href: "/contact" }]}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
heading | string | – | Section heading; there is no badge prop on this block |
description | string | – | Section intro text |
features | FeatureItem[] | [] | Icon-led tiles in the 2x2 grid |
buttons | ButtonItem[] | [] | CTA buttons below the grid |
className | string | – | Extra classes for the outer <section> |
type FeatureItem = {
icon?: LucideIcon;
title: string;
description: string;
};
type ButtonItem = {
label: string;
href?: string;
variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};badge prop at all on this block, so the header is limited to heading and description, unlike most other feature blocks in this set.md:grid-cols-2 regardless of item count, but with an unusually wide horizontal gap (md:gap-x-32) that visually separates the two columns instead of reading as a tight grid.size-8 with mb-6 spacing, noticeably larger and more spaced than feature3/feature5's size-6 icons, giving each tile a bigger visual anchor.features and buttons are gated independently by their own .length > 0 checks, so either can be supplied without the other.feature5
Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.
feature199
Two-column feature section with a large heading on the left and a 2x2 grid of feature cards on the right, each with a large badge icon, title, and description.
feature3
Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon.
feature160
4-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid.
feature233
A header with a badge, heading, and description, followed by many compact items in a two-column grid — each a lucide icon in a rounded bg-muted tile beside a title and one-line description.
feature203
Two-column feature section with heading, description, and a 2x2 stats grid (icon card, value, label) on one side and a square image on the other. Image position is configurable.