# Feature rows

> Rows of media and text that alternate sides. Only the layout alternates: in reading order, the text always comes first.

Facade UI item `feature-rows` (block, section).
Docs page: https://facadeui.dev/components/feature-rows · Registry JSON: https://facadeui.dev/r/feature-rows.json

## Install

```bash
npx shadcn@latest add @facade/feature-rows
```

Or by URL: `npx shadcn@latest add https://facadeui.dev/r/feature-rows.json`. The CLI also installs what it needs: lucide-react@^1.47.0, @facade/button, @facade/container, @facade/eyebrow, @facade/heading, @facade/section, @facade/section-header, @facade/types, @facade/utils.

Files: `components/sections/feature-rows.tsx`

Usage example as an installable item: `npx shadcn@latest add @facade/feature-rows-demo` (lands in components/examples/).

## Usage

The source of the preview on the docs page. `./content` holds sample data.

```tsx
import { FeatureRows } from "@/components/sections/feature-rows"

import { ROWS } from "./content"

export function Demo() {
  return (
    <FeatureRows
      eyebrow="How it works"
      title="Install a piece, own the source"
      items={ROWS}
      align="center"
    />
  )
}
```

## Props

### FeatureRowsProps

Extends SectionBaseProps, ListSlotProps.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `FeatureRowItem[]` |  |  |
| `title` | `string` |  |  |
| `eyebrow` | `string` |  |  |
| `description` | `string` |  |  |
| `link` | `LinkComponent` |  |  |
| `itemHeadingLevel` | `HeadingLevel` |  |  |
| `mediaFirst` | `boolean` | `false` | Which side the first row's media sits on at `lg` and up. |
| `align` | `"start" \| "center"` | `"start"` |  |