# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/feature2. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Feature](/blocks/feature)
5. /
6. Alternating Rows With Mixed Media

# Alternating Rows With Mixed MediaFREE

Hero header with a CTA, then alternating image-left / image-right rows. Each row's media slot accepts an image, video, or live registry-component asset.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/feature2`

## Feature2: Alternating Rows With Mixed Media

Header with a badge, heading, description, and CTA buttons, followed by a stack of rows that alternate media-left/media-right by position. Each row's media slot follows the Media Slot Standard, so it can hold a static image, a looping video, or a live registry-piece asset.

Free block

This block is free. No license or account is required: install it with the CLI and use it in unlimited projects.

### Installation

**Radix flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r/feature2"
```

**Base UI flavor**

bashCopy

```
npx shadcn add "https://ui.beste.co/r-base/feature2"
```

This installs the block to `components/beste/block/feature2.tsx`, the shadcn/ui `badge` and `button` components it depends on, and the `browser27`, `browser28`, and `calendar19` pieces it embeds as media-slot fillers (installed to `components/beste/piece/{name}.tsx`).

### Quick start

The installed file exports `feature2Demo` alongside the block: the exact props behind the preview above. Spread it to get a working alternating-rows section in one line.

tsxCopy

```
import { Feature2, feature2Demo } from "@/components/beste/block/feature2";

export default function Page() {
  return <Feature2 {...feature2Demo} />;
}
```

Then replace the demo with your own props. Written out, a trimmed setup mixing an image row and a live-asset row looks like this:

tsxCopy

```
import { Browser27 } from "@/components/beste/piece/browser27";
import { Feature2 } from "@/components/beste/block/feature2";

export default function Page() {
  return (
    <Feature2
      badge={{ label: "Product tour", variant: "secondary" }}
      heading="Three pieces of the toolkit"
      description="Tiny cards you can drop into hero shots and product walkthroughs."
      buttons={[{ label: "Read the playbook", href: "/playbook" }]}
      rows={[
        {
          title: "Site identity, made glanceable",
          description: "A site-info popover that mirrors browser chrome users already know.",
          media: { type: "component", component: <Browser27 domain="acme.com" /> },
        },
        {
          title: "Show the finished product",
          description: "A static screenshot of the workspace your customers land in.",
          media: {
            type: "image",
            src: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?w=1200&h=675&fit=crop",
            alt: "Dashboard screen",
          },
        },
      ]}
    />
  );
}
```

### Props

| Prop        | Type                                                | Default     | Description                           |                         |
| ----------- | --------------------------------------------------- | ----------- | ------------------------------------- | ----------------------- |
| badge       | { label: string; variant?: "default" \| "secondary" | "outline" } | –                                     | Badge above the heading |
| heading     | string                                              | –           | Section heading                       |                         |
| description | string                                              | –           | Section intro text                    |                         |
| buttons     | ButtonItem\[\]                                      | \[\]        | CTA buttons below the description     |                         |
| rows        | FeatureRow\[\]                                      | \[\]        | Alternating media/copy rows           |                         |
| className   | string                                              | –           | Extra classes for the outer <section> |                         |

tsCopy

```
type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

type FeatureRow = {
  title: string;
  description: string;
  media: RowMedia;
};

type RowMedia =
  | { type: "image"; src: string; alt?: string }
  | { type: "video"; src: string; alt?: string }
  | {
      type: "component";
      component: React.ReactNode;
      background?: ComponentBackground;
    };

type ComponentBackground =
  | { type: "dots" }
  | { type: "none" }
  | { type: "image"; src: string; alt?: string }
  | { type: "video"; src: string; alt?: string };
```

### Behavior notes

* Rows alternate sides by index: `index % 2 === 1` applies `md:flex-row-reverse`, so the first row (index 0) shows media on the left and copy on the right, the second flips, and so on.
* Below `md` every row collapses to a single column with the media stacked above the copy, since the reverse/order classes only apply at `md` and up.
* The media surface uses a `16:9` (`aspect-video`) box with a `rounded-md border` and a `bg-muted/30` dotted-grid default background behind `component`\-variant media, distinct from `feature1`'s `4:3` box.
* All three demo rows use the `component` media variant to embed browser-chrome and calendar pieces; the `image`/`video` variants exist on the `RowMedia` type but are not used by the shipped demo.
* Buttons render only when `buttons.length > 0`, right after the description inside the same left-aligned header block, using the standard `gap-3` spacing.

## More Feature blocks

[View all Feature](/blocks/feature)

[](/block/feature211)

PRO

feature211

### Alternating Features

Alternating image-and-copy feature rows with checklists.

[](/block/feature248)

PRO

feature248

### Alternating Proof Rows

Feature rows that alternate the image side on every second entry, each pairing an eyebrow, display title and explanation with one oversized outcome figure on its own rule, headed by an outline pill CTA pinned to the top right.

[](/block/feature187)

PRO

feature187

### Two-Column Alternating Cards over Media

Alternating two-column feature cards with large icons over background media, left-right zigzag layout

[](/block/feature194)

FREE

feature194

### Three Cards With Asset Media

Three feature cards that swap an icon for a real micro-asset: a bar chart, a before/after stat, and a terminal prompt. Demonstrates how registry-pieces drop into block media slots.

[](/block/feature1)

FREE

feature1

### Accordion With Live Media

Accordion on the left, swappable media surface on the right. Each row picks its own media kind: image, video, or live registry-component asset.

[](/block/feature206)

PRO

feature206

### Centered Heading with CTA and Icon Row

Centered service-style block with optional badge, large heading, description, primary CTA buttons, and a row of icon-prefixed items below. Each item icon defaults to a check, and the row collapses to a stack on mobile.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.