Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Alternating Rows Features Block for Svelte

Two plain alternating rows for a design-system kit in one box of shared hairlines: a permissions card with three toggles, and a notification card over a stack of avatars.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A features section for Svelte with Ark UI in its simplest alternating form. Two rows sit in one rounded box of shared hairlines, so every edge is a single line. Each row is a cell of copy (a heading, a sentence and a text link) beside a tinted cell holding a component vignette rather than a full screen: a permissions card with three toggles, and a notification card laid over a stack of avatars. The first row puts its vignette at the start and the second at the end. The toggles and avatars are the catalog's Switch and Avatar group, drawn in the foreground colour and in your theme's tokens. For component libraries, design systems and any product where a single card explains the feature.

FAQ

How do I swap in my own vignettes?

Each vignette is a small component (PermissionsCard, NotificationCard) passed as the children of a Row. Replace it with any card you like, and edit ROLES and PEOPLE at the top of the file to change what the two existing ones show. A Row supplies the heading, the sentence, the link and the tinted cell.

Are the toggles interactive?

No. They are the catalog's Switch drawn at its small size, but the whole vignette is inert and hidden from assistive technology: it is a picture of the product, and the heading and sentence beside it say what it shows. Remove inert and aria-hidden from the cell if you want a working demo, and give each switch a real label.

How do I change which side a row starts on?

Pass flip to a row to put its vignette at the start on wide screens. The copy always comes first in the reading order and on a phone, so the heading is never read after a picture.

Does it follow my theme?

Yes. The box, the tinted cells and the cards use theme tokens only, so they are light on a light page and dark on a dark one. The switches that are on use the foreground colour, so the primary colour stays free for a real button elsewhere on the page.

What moves, and what happens with reduced motion?

The header fades up once on load and the link arrows slide on hover. With reduced motion every transition is off and the section simply appears.

How does it fit on a phone?

Each row stacks with its text first, then the tinted cell with its vignette centred. The shared hairlines and the single radius stay, and nothing scrolls sideways at 320 pixels.

All 170 features blocks