# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature3. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Service Grid With Icons

# Service Grid With IconsFREE

Centered header, three-column grid of capability cards, and an optional CTA with bottom text. Each card leads with a Lucide icon.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature3`

## Feature3: Service Grid With Icons

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.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/feature3"
```

**Base UI flavor**

bashCopy

```
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.

### Quick start

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.

tsxCopy

```
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:

tsxCopy

```
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."
    />
  );
}
```

### Props

| 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>                                                                           |                         |

tsCopy

```
type FeatureItem = {
  icon?: LucideIcon;
  title: string;
  description: string;
};

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};
```

### Behavior notes

* `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.
* Each card's icon is rendered only when `feature.icon` is set (`{Icon && <Icon .../>}`), with no fallback icon, unlike `education99`'s grid which defaults to `Building`.
* The grid is a fixed `sm:grid-cols-2 lg:grid-cols-3`; there is no item-count-based dynamic column logic.
* Cards use a `bg-muted/30` tinted surface rather than the plain bordered `bg-card` treatment other feature grids in this set use.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature107)

FREE

feature107

### Icon-Centered Grid Cards

3-column grid of centered feature cards with large icons and brief descriptions. Perfect for capability highlights, service features, or platform offerings.

[](/block/feature160)

PRO

feature160

### Centered Icon Cards Grid

4-column grid of feature icons with titles and descriptions below. Perfect for capability highlights, feature icons, or simple feature grid.

[](/block/feature5)

FREE

feature5

### Compact Two-Column Capabilities

Left-aligned headline followed by a compact two-column grid of capability rows. Each row leads with a Lucide icon.

[](/block/feature161)

PRO

feature161

### Icon Row Feature Grid

3-column grid of horizontal feature items with icon and text side by side. Clean layout for capability highlights and feature overviews.

[](/block/feature241)

PRO

feature241

### Icon Capability Grid

A capability section with an eyebrow over a hairline rule, a two-column heading, and a responsive grid of icon-led features with tinted chips, titles, and descriptions.

[](/block/feature199)

PRO

feature199

### Feature with Side Heading and Icon Grid

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.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.