# Feature Section v7

> Three-column AI platform section with agent workflows, grounded knowledge, and production deploy copy, bordered cards with corner marks, and outline pill CTAs.

A shadcn/ui block from the [@uiception](https://uiception.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/uiception/feature-section-v7).

- Page, with a live preview: https://shadcn.exchange/r/uiception/feature-section-v7
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/uiception/feature-section-v7-light-5e5d2948684d4d08.png
- Registry item: https://uiception.com/r/feature-section-v7.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://uiception.com/r/feature-section-v7.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/new-york/blocks/feature-section-v7/page.tsx`

```tsx
/** inspired by x.ai */

import FeatureSectionV7 from "./components/feature-section-v7"

export default function Page() {
  return <FeatureSectionV7 />
}
```

### `registry/new-york/blocks/feature-section-v7/components/feature-section-v7.tsx`

```tsx
import FeatureGrid from "./feature-grid"

export default function FeatureSectionV7() {
  return (
    <section className="w-full bg-background py-4 text-foreground md:py-6">
      <div className="mx-auto w-full max-w-7xl px-6 sm:px-8 lg:px-10">
        <h2 className="max-w-[22ch] text-4xl font-medium leading-[1.1] tracking-[-0.03em] text-foreground lg:text-5xl">
          From a rough idea to something people trust
        </h2>
        <p className="mt-3 max-w-2xl text-[0.9375rem] leading-relaxed text-muted-foreground">
          Most AI products stall somewhere between a clever demo and a real
          launch. Here is how teams close that gap, one step at a time.
        </p>
        <FeatureGrid />
      </div>
    </section>
  )
}
```

### `registry/new-york/blocks/feature-section-v7/components/feature-grid.tsx`

```tsx
import { ArrowUpRightIcon } from "lucide-react"
import Link from "next/link"

import { cn } from "@/lib/utils"

import { FeatureCardCorners } from "./feature-card-corners"
import { featureColumns } from "../lib/features"

export default function FeatureGrid() {
  return (
    <ul className="m-0 mt-6 grid list-none grid-cols-1 p-0 lg:mt-8 lg:grid-cols-3">
      {featureColumns.map(({ id, title, description, ctaLabel, ctaHref }, index) => (
        <li
          key={id}
          className={cn(
            "group relative flex flex-col gap-8 border border-border px-6 py-12 sm:px-8 sm:py-14 lg:gap-10 lg:px-10 lg:py-16",
            index > 0 && "-mt-px lg:mt-0 lg:-ml-px"
          )}
        >
          <FeatureCardCorners />

          <div>
            <h3 className="m-0 text-xl font-medium tracking-[-0.02em] text-foreground sm:text-[1.375rem]">
              {title}
            </h3>
            <p className="m-0 mt-3 max-w-[36ch] text-[0.9375rem] leading-[1.65] text-muted-foreground">
              {description}
            </p>
          </div>

          <div className="mt-auto flex justify-center pt-2">
            <Link
              href={ctaHref}
              className="inline-flex items-center gap-1.5 rounded-full border border-border px-6 py-2.5 text-sm font-medium text-foreground transition-colors hover:border-foreground/30 hover:bg-muted"
            >
              {ctaLabel}
              <ArrowUpRightIcon className="size-3.5 shrink-0" aria-hidden />
            </Link>
          </div>
        </li>
      ))}
    </ul>
  )
}
```

### `registry/new-york/blocks/feature-section-v7/components/feature-card-corners.tsx`

```tsx
const cornerClassName =
  "pointer-events-none absolute z-10 size-1.5 bg-foreground"

export function FeatureCardCorners() {
  return (
    <>
      <span className={`${cornerClassName} top-0 left-0 -translate-x-1/2 -translate-y-1/2`} aria-hidden />
      <span
        className={`${cornerClassName} top-0 right-0 translate-x-1/2 -translate-y-1/2`}
        aria-hidden
      />
      <span
        className={`${cornerClassName} bottom-0 left-0 -translate-x-1/2 translate-y-1/2`}
        aria-hidden
      />
      <span
        className={`${cornerClassName} bottom-0 right-0 translate-x-1/2 translate-y-1/2`}
        aria-hidden
      />
    </>
  )
}
```

### `registry/new-york/blocks/feature-section-v7/lib/features.ts`

```ts
export type FeatureColumn = {
  id: string
  title: string
  description: string
  ctaLabel: string
  ctaHref: string
}

export const featureColumns: FeatureColumn[] = [
  {
    id: "agents",
    title: "Give it a job to do",
    description:
      "You describe the outcome. The agent plans the work, reaches into your tools, and shows you every choice it made along the way.",
    ctaLabel: "See how agents work",
    ctaHref: "#",
  },
  {
    id: "knowledge",
    title: "Teach it what you know",
    description:
      "Point it at your docs, code, and data. Answers start sounding like your product, not like a model guessing in the dark.",
    ctaLabel: "Bring your sources",
    ctaHref: "#",
  },
  {
    id: "deploy",
    title: "Put it in front of people",
    description:
      "When it is ready, you ship behind one API. Latency, cost, and safety stay visible so the launch feels calm, not reckless.",
    ctaLabel: "Explore the platform",
    ctaHref: "#",
  },
]
```