Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Tabbed Carousel Banner Block for Solid

A tabbed announcement for a documentation platform: a card with three underline tabs (What's new, Tips, Updates) and a panel under them, driven by the visitor, with no autoplay.

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 tabbed announcement for Solid with Ark UI, for a slot that has three things to say and lets the visitor choose. A card sits between the page's solid rails with a row of underline tabs on its own hairline, What's new, Tips and Updates, and under it the chosen panel: a badge, a headline, two lines and an underlined link. Nothing rotates by itself; the arrow keys move between the tabs, and the card keeps one height whichever tab is open because the three panels share one grid cell. On a narrow phone the tab row scrolls sideways. It's built from Tabs, Badge and Guides, with CSS for the entrance and your theme's tokens for every colour. For changelogs, feature news and docs headers that group their messages by kind.

FAQ

How do I change the tabs and their panels?

Edit ENTRIES at the top of the file: each entry is an id, the tab's label, and the panel's badge, title, line, link and href. The tabs and the panels are both drawn from the list, so adding a fourth entry adds both.

Why doesn't the card change height between tabs?

All panels stay mounted and take the same grid cell, and the cell is as tall as the tallest panel. The closed ones are hidden by the tabs: invisible, out of the tab order and out of the page's reading order, so a keyboard never lands on a hidden link. The tabs keep every panel mounted with lazyMount and unmountOnExit turned off.

Which keys work?

Tab moves focus into the tab row, the arrow keys move between the tabs (a tab opens its panel when it takes focus), Home and End jump to the first and last, and Tab again moves on to the open panel's link.

Why is there no autoplay?

The rotating carousel banner owns that: it needs a Pause button, pausing on hover and focus, and a reduced-motion guard. Here the visitor drives, so there is nothing to pause, and nothing moves under their cursor.

What moves, and what happens with reduced motion?

The card fades up once on load and the tab underline moves to the chosen tab, with CSS only. With reduced motion turned on the entrance is off and the underline jumps.

How does it fit on a phone?

The tab row scrolls sideways inside the card when the three labels don't fit, and the panel text wraps. Nothing else scrolls at 320 pixels, and in a right-to-left layout the tabs, the underline and the arrow mirror.

All 100 banner blocks