Feature rows

Pro

Features told one at a time: the text on one side and a live picture on the other, switching sides row by row. Stacks on phones with the picture under the text.

npx prodular-ui add feature-rows

Part of Prodular UI Pro. Preview and read the docs freely, install with a license. See pricing

Two rows

Live components as the pictures, the second row flipped.

Invoicing

Invoices that send themselves

Line items, taxes and payment links from your price list. Recurring invoices go out on their own and land in the ledger.

Recurring schedules
Card, ACH and bank transfer
PDF and payment page

INV-2104Northwind LogisticsPaid$5,900
INV-2103Kestrel HealthDue Friday$8,420
INV-2102Ironclad SecurityOverdue$18,647

Cash

See the money coming

Expected payments by day, based on how each customer has paid before.

Expected this monthUpdated hourly

$238,450

On track to close the month early

import { CheckCircle2Icon, ClockIcon } from "lucide-react"
import { Badge } from "@/components/ui/badge"import { Button } from "@/components/ui/button"import { FeatureRows } from "@/components/ui/feature-rows"import { Sparkline } from "@/components/ui/sparkline"
const invoices = [  { id: "INV-2104", customer: "Northwind Logistics", status: "Paid", tone: "success" as const, amount: "$5,900" },  { id: "INV-2103", customer: "Kestrel Health", status: "Due Friday", tone: "info" as const, amount: "$8,420" },  { id: "INV-2102", customer: "Ironclad Security", status: "Overdue", tone: "destructive" as const, amount: "$18,647" },]
export default function FeatureRowsDemo() {  return (    <div className="w-full max-w-5xl py-6">      <FeatureRows        rows={[          {            eyebrow: "Invoicing",            title: "Invoices that send themselves",            description: "Line items, taxes and payment links from your price list. Recurring invoices go out on their own and land in the ledger.",            bullets: ["Recurring schedules", "Card, ACH and bank transfer", "PDF and payment page"],            media: (              <ul className="divide-y p-6 text-sm">                {invoices.map((i) => (                  <li key={i.id} className="flex h-12 items-center gap-3">                    <span className="w-20 font-mono text-[13px] text-muted-foreground">{i.id}</span>                    <span className="min-w-0 flex-1 truncate">{i.customer}</span>                    <Badge variant={i.tone} size="sm">                      {i.status}                    </Badge>                    <span className="w-16 text-right font-medium tabular-nums">{i.amount}</span>                  </li>                ))}              </ul>            ),          },          {            eyebrow: "Cash",            title: "See the money coming",            description: "Expected payments by day, based on how each customer has paid before.",            action: <Button variant="outline">See the forecast</Button>,            media: (              <div className="flex flex-col gap-4 p-6">                <div className="flex items-baseline justify-between text-sm">                  <span className="font-medium">Expected this month</span>                  <span className="flex items-center gap-1.5 text-muted-foreground">                    <ClockIcon className="size-3.5" />                    Updated hourly                  </span>                </div>                <p className="text-3xl font-semibold tracking-tight tabular-nums">$238,450</p>                <Sparkline data={[10, 18, 21, 29, 33, 38, 45, 52, 58, 61, 70]} variant="area" curved className="h-32 w-full" />                <p className="flex items-center gap-1.5 text-[13px] text-success-subtle-foreground">                  <CheckCircle2Icon className="size-3.5" />                  On track to close the month early                </p>              </div>            ),          },        ]}      />    </div>  )}

Anatomy

<Section>  <FeatureRows rows={[{ title, description, bullets, media: <Preview /> }]} /></Section>

Guidance

Use it when

For the three or four features that sell the product, each with a picture worth looking at.
Live components in media, so the picture matches the product and themes with it.

Avoid

More than four rows. Use a Feature grid for the rest.
Screenshots of text. Build the picture from components or leave it out.

Rules for AI agents

Published in llms-full.txt, the registry and the MCP server, so coding agents follow them when they build with this component.

Put it in a Section. Keep bullets to four short lines.
Give media its own padding; the panel around it has none.

API

FeatureRows

Prop	Type	Default	Description
rows	{ eyebrow?, title, description, bullets?, action?, media }[]		One row per feature. Odd rows put the picture first on wide screens.

Installation

The Prodular UI CLI adds the source to components/ui with everything it depends on. In a project that already uses shadcn/ui, the shadcn CLI installs it from the Prodular registry too. See Installation for the first setup.

npx prodular-ui add feature-rows# or, with the registry in components.jsonnpx shadcn@latest add @prodular/feature-rows

Used in these screens

AI product landing