Blazing fast websites
High-performance sites optimized for speed and user experience.
Our web agency offers a complete suite of tools and services to build, grow, and optimize your online presence.
High-performance sites optimized for speed and user experience.
Boost rankings and track performance with advanced SEO and analytics tools.
Industry-standard encryption and protection for every customer touchpoint.
Reach audiences worldwide with scalable, cloud-based infrastructure.
Connect to the tools and platforms your team already runs on.
Round-the-clock expert support so your site stays online and on-brand.
No upfront costs. Start your free consultation today.
Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon.
Centered header above a three-column grid of capability cards, each leading with a Lucide icon over a title and description, closed off by a single centered CTA button with an optional line of supporting text underneath.
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/feature3"Base UI flavor
npx shadcn add "https://ui.beste.co/r-base/feature3"This installs the block to components/beste/block/feature3.tsx and the shadcn/ui badge and button components it depends on.
The installed file exports feature3Demo alongside the block: the exact props behind the preview above. Spread it to get a working service grid in one line.
import { Feature3, feature3Demo } from "@/components/beste/block/feature3";
export default function Page() {
return <Feature3 {...feature3Demo} />;
}Then replace the demo with your own props. Written out, the same setup looks like this:
import { Globe, Shield, Zap } from "lucide-react";
import { Feature3 } from "@/components/beste/block/feature3";
export default function Page() {
return (
<Feature3
badge={{ label: "Services", variant: "default" }}
heading="All-in-one web solutions"
description="A complete suite of tools to build, grow, and optimize your site."
features={[
{ icon: Zap, title: "Blazing fast websites", description: "Optimized for speed and UX." },
{ icon: Shield, title: "Robust security", description: "Encryption on every touchpoint." },
{ icon: Globe, title: "Global scalability", description: "Cloud infrastructure worldwide." },
]}
button={{ label: "Launch your site", href: "/contact" }}
bottomText="No upfront costs. Start your free consultation today."
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
badge | { label: string; variant?: "default" | "secondary" | "outline" } | – | Badge above the heading |
heading | string | – | Section heading |
description | string | – | Section intro text |
features | FeatureItem[] | [] | Capability cards in the grid |
button | ButtonItem | – | A single centered CTA button below the grid; unlike most feature blocks this is one object, not a buttons array |
bottomText | string | – | Line of supporting text under the button |
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";
};button is a single optional object rather than an array, so this block renders at most one CTA, unlike feature2/feature4/feature8, which all accept a buttons array.button and bottomText share one wrapper gated by (button || bottomText), stacked and centered; either can be supplied independently, so bottomText alone renders without a button.feature.icon is set ({Icon && <Icon .../>}), with no fallback icon, unlike education99's grid which defaults to Building.sm:grid-cols-2 lg:grid-cols-3; there is no item-count-based dynamic column logic.bg-muted/30 tinted surface rather than the plain bordered bg-card treatment other feature grids in this set use.