Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Features blocks

Pro

Animated Reveal Features Block for Radix UI

A features section for a dashboard builder with a framed drawing of its editor at the start and four steps as vertical tabs at the end: each step adds a layer to the drawing and keeps the ones before it.

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 React with Radix UI, told as a build-up. At the start, a framed drawing of Oriel's editor with + marks on its corners; at the end, a header and four steps as vertical tabs. The drawing begins as a bare board of three figures and a chart. Choosing the second step slides a sidebar open, the third drops a toolbar in above the canvas and the fourth fades up a comment thread, and every step keeps all the layers before it: stepping back takes only the later layers away. Under the steps, the open step's panel says what it adds. A hairline divider with + marks splits the two sides, and on a phone the drawing sits between the header and the steps. It's built from Tabs, Badge and Guides, with CSS transitions for every reveal and your theme's tokens for every colour. For builders, editors and any product that is easiest to explain as layers.

FAQ

How do I change the steps and the drawing?

Edit STEPS at the top of the file for the titles, summaries and the parts each step adds; the tabs and panels read from it. The drawing is OrielEditor: each layer is wrapped in a fade(step, from) class, where from is the step it first appears on, so moving a layer to another step changes one number. Adding a fifth step means one more entry and one more layer.

Does stepping back lose anything?

Nothing before the step you pick. Step 3 shows the board, the sidebar and the toolbar; going back to step 2 fades the toolbar out and leaves the first two layers as they were. The drawing is driven by one number, the chosen step, so it is the same whichever way you got there.

Why tabs and not radio buttons?

The steps choose what is shown, and each has a panel that says what it adds, which is what tabs are for. They also behave the same on every target: the Up and Down arrows move between steps and open each as you go, and the panel is named by its step. The drawing is decoration and is hidden from assistive technology, so the panel's text carries the same information.

What changes between targets?

The tabs are controlled with value and onValueChange, and the open step is styled by data-active, so its bar is a border.

What moves, and what happens with reduced motion?

The header and the two sides fade up once on load. When you pick a step, the sidebar's width and the toolbar's height transition and the layers fade, all with CSS. With reduced motion every transition is off and the layers simply appear and disappear.

How does it fit on a phone?

The header comes first, then the drawing at a fixed height under a hairline, then the steps, so choosing a step shows its effect without scrolling. Inside the drawing the panels shrink and the chart takes the space that is left. Nothing scrolls sideways at 320 pixels.

All 170 features blocks