Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Hover Accordion Mockup Split Features Block for Svelte

A features section for an operations console: an accordion of four features whose open row swaps the console screen drawn in a framed figure beside it, by pointer, focus or tap.

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, where the list and the picture answer each other. A compact header sits over a band split by a hairline that meets the page's top rule with a plus mark. On the start side an accordion lists four features of Spoolhouse, an operations console (live queues, an incident timeline, runbooks and an on-call rota); on the end side a framed figure shows that feature's screen. Pointing at a row, focusing it with the keyboard or tapping it opens it and cross-fades the drawing, so the figure never changes size. It's an accordion, a badge and the Guides line kit, with your theme's tokens for every colour and no button. For consoles, dashboards and any product that is easiest to show one screen at a time.

FAQ

How do I change the features and screens?

Edit FEATURES at the top of the file for the rows (a title, an icon, a sentence and two badges) and write each screen as a small component beside it: QueuesScreen, IncidentScreen, RunbookScreen and RotaScreen. A screen shows when the open row's id matches the Layer it sits in, so a new feature needs a row, a screen and a layer with the same id.

Does it only work on hover?

No. Pointing at a row opens it, but so does focusing it with Tab or the arrow keys and so does a tap or a click, because the open row is plain state shared by the accordion and the figure. The rows are real accordion buttons, so a screen reader hears the row that is open.

Why can't I close the open row?

One row is always open, because the figure always shows a screen. Opening another row closes the first. The accordion is not collapsible, which keeps the last row open.

Are the screens real?

They are drawings, built from the page's own tokens in greyscale and hidden from assistive technology, so everything they say is also in the row's sentence. They never change the layout: all four sit in one grid cell and only the open one is visible.

What moves, and what happens with reduced motion?

The header and the band fade up once when the page loads, the open row's panel slides open, the screens cross-fade, and the live dot in the queues screen pulses. With reduced motion the fade-up, the cross-fade and the pulse are off and the screens swap instantly.

How does it fit on a phone?

The accordion comes first and the figure follows under a hairline, at a shorter height, still showing the open row's screen. Tapping a row changes it.

All 170 features blocks