Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Alternating Device Frame Rows Features Block for Svelte

Two alternating rows for a transit app, each pairing a sentence with a phone drawn as a ring on a hairline floor: the trip planner with line chips and the live arrivals with countdowns.

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 that shows a mobile app on a phone. Two rows share one page column: a badge, a heading, a sentence and a text link on one side, and a phone on the other, the sides swapping from row to row. The phone is built from CSS alone: its bezel is a ring, with no notch art, and it stands on a hairline floor inside a frame with + marks on its corners, so it never runs flush to the page's rails. The first screen is a trip planner with line chips and journey times; the second is a live arrivals list with a countdown per line. Both are drawn in greyscale from theme tokens. For consumer apps, mobile products and any feature that is best shown in a hand-held frame.

FAQ

How do I draw my own screens?

Each screen is a small component (PlannerScreen, ArrivalsScreen) that renders inside the shared Phone, which supplies the bezel, the status bar and the room for a tab bar. Fill it with your own rows, and change the data lists at the top of the file (JOURNEYS, ARRIVALS, LINE_CHIPS) to change what they show.

Why are the phones hidden from screen readers?

They are pictures of the product, not content: the heading and sentence beside each one say what it shows. The phone is marked as decorative and holds no links or buttons, so Tab moves from one row's link to the next.

Does it follow my theme?

Yes. The bezel, the screen and the floor use theme tokens only, so they are light on a light page and dark on a dark one in any preset. The one selected chip and the first arrival use the foreground colour as their accent.

What moves, and what happens with reduced motion?

The header fades up once on load and the link arrows slide on hover. The phones are still. 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 frame. The phone drawing gets a little smaller and drops its third list row, so it fits in the frame without scrolling, and nothing scrolls sideways at 320 pixels.

All 170 features blocks