# Feature Section v1

> Cream-toned six-cell grid with line-art SVG icons, monospace titles, and NO. indexes below sharp-cornered muted cards.

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

- Page, with a live preview: https://shadcn.exchange/r/uiception/feature-section-v1
- Screenshot: https://shadcn.exchange/shot/uiception/feature-section-v1/light.png
- Registry item: https://uiception.com/r/feature-section-v1.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/uiception/feature-section-v1.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: `geist`

## Files

### `registry/new-york/blocks/feature-section-v1/page.tsx`

```tsx
import FeatureSectionV1 from "./components/feature-section-v1"

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

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

```tsx
import { GeistPixelCircle } from "geist/font/pixel"

import FeatureGrid from "./feature-grid"

export default function FeatureSectionV1() {
  return (
    <section className="py-4 md:py-6 lg:py-8">
      <div className="mx-auto max-w-6xl px-4">
        <div className="mb-12 flex max-w-160 flex-col gap-4 md:mb-14 lg:mb-16">
          <h2 className="text-4xl tracking-tighter lg:text-5xl">
            The platform built for <br />
            <span className={`${GeistPixelCircle.className}`}>
              modern teams
            </span>
          </h2>
          <p className="max-w-xl text-3.75 leading-relaxed text-muted-foreground">
            Give your team the tools to move fast, stay aligned, and grow
            without the friction.
          </p>
        </div>
        <FeatureGrid />
      </div>
    </section>
  )
}
```

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

```tsx
"use client"

import { featureSectionItems } from "../lib/features"

import "../styles/feature-grid.css"

export default function FeatureGrid() {
  return (
    <ul className="m-0 grid list-none grid-cols-1 gap-3 p-0 sm:grid-cols-2 lg:grid-cols-3">
      {featureSectionItems.map(({ id, title, description, index, Icon }) => (
        <li key={id} className="flex min-w-0 flex-col">
          <div className="fsv1-card group relative min-h-46 flex-1 overflow-hidden rounded-none bg-background text-foreground ring-1 ring-border">
            <div className="fsv1-card-front absolute inset-0 flex flex-col items-start p-5 pr-5.4 pb-4.6">
              <Icon className="size-[1.65rem] shrink-0 opacity-90" aria-hidden />
              <p className="mt-auto m-0 font-mono text-2.75 leading-[1.35] font-medium tracking-[0.14em] text-foreground/90 uppercase">
                {title}
              </p>
            </div>
            <div className="fsv1-card-back absolute inset-0 flex flex-col justify-start p-5 pr-5.4 pb-4.6">
              <p className="m-0 text-3.25 leading-relaxed text-muted-foreground">
                {description}
              </p>
            </div>
          </div>
          <footer className="pt-3">
            <p className="m-0 font-mono text-xs leading-none font-medium tabular-nums tracking-[0.14em] text-muted-foreground/90 uppercase">
              [{index.toString().padStart(2, "0")}]
            </p>
          </footer>
        </li>
      ))}
    </ul>
  )
}
```

### `registry/new-york/blocks/feature-section-v1/styles/feature-grid.css`

```css
.fsv1-card-front,
.fsv1-card-back {
  transition:
    transform 0.32s cubic-bezier(0.87, 0, 0.13, 1),
    opacity 0.32s cubic-bezier(0.87, 0, 0.13, 1);
  will-change: transform, opacity;
}

.fsv1-card-back {
  transform: translateY(-100%);
  opacity: 0;
}

.fsv1-card:hover .fsv1-card-front {
  transform: translateY(100%);
  opacity: 0;
}

.fsv1-card:hover .fsv1-card-back {
  transform: translateY(0);
  opacity: 1;
}

.fsv1-card::after {
  content: "";
  position: absolute;
  bottom: 0.35rem;
  right: 0.35rem;
  width: 0.55rem;
  height: 0.55rem;
  border-right: 1px dashed color-mix(in oklab, var(--foreground) 25%, transparent);
  border-bottom: 1px dashed color-mix(in oklab, var(--foreground) 25%, transparent);
  pointer-events: none;
  z-index: 10;
}

@media (prefers-reduced-motion: reduce) {
  .fsv1-card-front,
  .fsv1-card-back {
    transition: none;
  }
}
```

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

```tsx
import type { SVGProps } from "react"

export function IconBrain(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M244,132a52.10391,52.10391,0,0,0-31.99951-48.01416L212,72a43.99041,43.99041,0,0,0-84-18.2959A43.99041,43.99041,0,0,0,44,72l-.00049,11.98584A52.00675,52.00675,0,0,0,44,179.99463V184a43.99041,43.99041,0,0,0,84,18.2959A43.99041,43.99041,0,0,0,212,184v-4.00537A52.07716,52.07716,0,0,0,244,132ZM88,220a36.04061,36.04061,0,0,1-36-36v-1.41309A51.91966,51.91966,0,0,0,64,184h8a4,4,0,0,0,0-8H64A44.00806,44.00806,0,0,1,49.33252,90.50293a4,4,0,0,0,2.6665-3.77148L52,72a36,36,0,0,1,72,0v86.74841A43.96994,43.96994,0,0,0,88,140a4,4,0,0,0,0,8,36,36,0,0,1,0,72Zm104-44h-8a4,4,0,0,0,0,8h8a51.91966,51.91966,0,0,0,12-1.41309V184a36,36,0,1,1-36-36,4,4,0,0,0,0-8,43.96994,43.96994,0,0,0-36,18.74841V72a36,36,0,0,1,72,0l.001,14.73145a4,4,0,0,0,2.6665,3.77148A44.00806,44.00806,0,0,1,192,176ZM92,92a32.036,32.036,0,0,1-32,32,4,4,0,0,1,0-8A24.02718,24.02718,0,0,0,84,92V84a4,4,0,0,1,8,0Zm108,28a4.0002,4.0002,0,0,1-4,4,32.036,32.036,0,0,1-32-32V84a4,4,0,0,1,8,0v8a24.02718,24.02718,0,0,0,24,24A4.0002,4.0002,0,0,1,200,120Z" />
    </svg>
  )
}

export function IconMagnifier(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M226.82129,221.17236,180.955,175.306a88.10138,88.10138,0,1,0-5.657,5.65649L221.165,226.82959a3.99992,3.99992,0,0,0,5.65625-5.65723ZM35.999,116a80,80,0,1,1,80,80A80.09041,80.09041,0,0,1,35.999,116Z" />
    </svg>
  )
}

export function IconGitMerge(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M174.63,81.37a80,80,0,1,0-93.26,93.26,80,80,0,1,0,93.26-93.26ZM100.69,136,120,155.31A63.48,63.48,0,0,1,96,160,63.48,63.48,0,0,1,100.69,136Zm33.75,11.13-25.57-25.57a64.65,64.65,0,0,1,12.69-12.69l25.57,25.57A64.65,64.65,0,0,1,134.44,147.13ZM155.31,120,136,100.69A63.48,63.48,0,0,1,160,96,63.48,63.48,0,0,1,155.31,120ZM32,96a64,64,0,0,1,126-16A80.08,80.08,0,0,0,80.05,158,64.11,64.11,0,0,1,32,96ZM160,224A64.11,64.11,0,0,1,98,176,80.08,80.08,0,0,0,176,98,64,64,0,0,1,160,224Z" />
    </svg>
  )
}

export function IconLightning(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M215.79,118.17a8,8,0,0,0-5-5.66L153.18,90.9l14.66-73.33a8,8,0,0,0-13.69-7l-112,120a8,8,0,0,0,3,13l57.63,21.61L88.16,238.43a8,8,0,0,0,13.69,7l112-120A8,8,0,0,0,215.79,118.17ZM109.37,214l10.47-52.38a8,8,0,0,0-5-9.06L62,132.71l84.62-90.66L136.16,94.43a8,8,0,0,0,5,9.06l52.8,19.8Z" />
    </svg>
  )
}

export function IconPlug(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M224,56H176V16a8,8,0,0,0-16,0V56H96V16a8,8,0,0,0-16,0V56H32.55C26.28,56,24,60.78,24,64a8,8,0,0,0,8,8H48v88a40,40,0,0,0,40,40h32v40a8,8,0,0,0,16,0V200h32a40,40,0,0,0,40-40V72h16a8,8,0,0,0,0-16ZM168,184H88a24,24,0,0,1-24-24V72H192v88A24,24,0,0,1,168,184Zm-17.42-60.56a8,8,0,0,1,.91,7.37l-12,32a8,8,0,0,1-15-5.62l8-21.19H112a8,8,0,0,1-7.49-10.81l12-32a8,8,0,1,1,15,5.62l-8,21.19H144A8,8,0,0,1,150.58,123.44Z" />
    </svg>
  )
}

export function IconShield(props: SVGProps<SVGSVGElement>) {
  return (
    <svg
      viewBox="0 0 256 256"
      aria-hidden
      xmlns="http://www.w3.org/2000/svg"
      fill="currentColor"
      {...props}
    >
      <path d="M208,40H48A16,16,0,0,0,32,56v56c0,52.72,25.52,84.67,46.93,102.19,23.06,18.86,46,25.26,47,25.53a8,8,0,0,0,4.2,0c1-.27,23.91-6.67,47-25.53C198.48,196.67,224,164.72,224,112V56A16,16,0,0,0,208,40ZM167.4,201.42A129.3,129.3,0,0,1,128,223.62a128.25,128.25,0,0,1-38.92-21.81,111.82,111.82,0,0,1-24.51-27.64L128,129.77l63.43,44.4A111.56,111.56,0,0,1,167.4,201.42ZM208,112q0,26.31-9.14,47.84l-66.27-46.39a8,8,0,0,0-9.18,0L57.13,159.84C51.06,145.52,48,129.54,48,112l0-56,160,0Z" />
    </svg>
  )
}
```

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

```ts
import type { ComponentType, SVGProps } from "react"

import {
  IconBrain,
  IconGitMerge,
  IconLightning,
  IconMagnifier,
  IconPlug,
  IconShield,
} from "../components/feature-icons"

export type FeatureDefinition = {
  id: string
  title: string
  description: string
  index: number
  Icon: ComponentType<SVGProps<SVGSVGElement>>
}

export const featureSectionItems: FeatureDefinition[] = [
  {
    id: "smart-automation",
    title: "Smart automation",
    description:
      "Stop wasting time on tasks your tools should be handling. We help you automate the boring parts so your team can spend their energy on work that actually makes a difference.",
    index: 1,
    Icon: IconBrain,
  },
  {
    id: "deep-analytics",
    title: "Deep analytics",
    description:
      "Gut feeling is great, but data is better. Get a clear picture of what is driving results, where things are slipping, and what your team should be paying attention to right now.",
    index: 2,
    Icon: IconMagnifier,
  },
  {
    id: "team-collaboration",
    title: "Team collaboration",
    description:
      "Nobody likes being out of the loop. Keep your whole team aligned with shared workflows, real-time updates, and one place where decisions actually get made.",
    index: 3,
    Icon: IconGitMerge,
  },
  {
    id: "instant-performance",
    title: "Instant performance",
    description:
      "Slow software costs you users. Everything we build is optimized to be fast from day one, and it stays that way as your traffic grows and your product gets more complex.",
    index: 4,
    Icon: IconLightning,
  },
  {
    id: "100-integrations",
    title: "100+ integrations",
    description:
      "Your team already has tools they love. We connect with over a hundred of them so you can plug us in without changing how you work or asking engineering for a favor.",
    index: 5,
    Icon: IconPlug,
  },
  {
    id: "secure-by-default",
    title: "Secure by default",
    description:
      "Security should not be an afterthought. We built it into the foundation so you are covered from the start, whether you are a two-person startup or a team of thousands.",
    index: 6,
    Icon: IconShield,
  },
]
```