# Features List

> Six capabilities in a calm three-column rhythm.

A shadcn/ui block from the [@blockforge](https://blockforge.terravidhal.me) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/blockforge/features-list).

- Page, with a live preview: https://shadcn.exchange/r/blockforge/features-list
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/blockforge/features-list-light-d0836f3d04506710.png
- Registry item: https://blockforge.terravidhal.me/r/features-list.json
- Categories: features
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://blockforge.terravidhal.me/r/features-list.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- npm packages: `lucide-react`

## Files

### `registry/blocks/features-list.tsx`

```tsx
import {
  GitBranch,
  Globe,
  KeyRound,
  RotateCcw,
  ShieldCheck,
  Webhook,
} from "lucide-react";

const features = [
  {
    icon: GitBranch,
    title: "Preview every branch",
    description: "Each pull request gets its own URL, torn down on merge.",
  },
  {
    icon: Globe,
    title: "Edge by default",
    description: "Static assets and functions deployed to 30+ regions.",
  },
  {
    icon: RotateCcw,
    title: "Instant rollbacks",
    description: "Every deploy is immutable — going back is one click.",
  },
  {
    icon: ShieldCheck,
    title: "SOC 2 Type II",
    description: "Audited yearly, with SSO and audit logs on every plan.",
  },
  {
    icon: Webhook,
    title: "Webhooks for everything",
    description: "Deploys, comments, checks — every event has a hook.",
  },
  {
    icon: KeyRound,
    title: "Scoped tokens",
    description: "Per-project, per-environment credentials that expire.",
  },
];

export default function FeaturesList() {
  return (
    <section className="bg-background">
      <div className="mx-auto w-full max-w-6xl px-6 py-20 sm:py-24">
        <div className="mb-12 max-w-md">
          <h2 className="text-2xl font-semibold tracking-tight text-balance sm:text-3xl">
            Everything you need, nothing to babysit
          </h2>
          <p className="mt-2 text-muted-foreground">
            The features you'd build eventually — already built, already
            tested.
          </p>
        </div>

        <div className="grid gap-x-10 gap-y-10 sm:grid-cols-2 lg:grid-cols-3">
          {features.map((feature) => (
            <div key={feature.title}>
              <div className="flex size-9 items-center justify-center rounded-lg border border-border/60 bg-card">
                <feature.icon className="size-4" />
              </div>
              <h3 className="mt-4 text-sm font-medium">{feature.title}</h3>
              <p className="mt-1.5 text-sm text-muted-foreground">
                {feature.description}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}
```