shadcn.io is not affiliated with official shadcn/ui
Pill Tab Expand Preview Features Block for Solid
A features section for an email-automation product: a pill segment control swaps three accordion steps (draft, send, measure), and each open step shows its own small drawing beside its text.
Installation
Overview
A features section for Solid with Ark UI that shows nine features in two levels of choice. A pill segment control in the header picks a stage of Mailstride, an email-automation product (draft, send or measure); the rows below are that stage's three steps in a single-open accordion, ruled rail to rail by the Guides line kit. Opening a step reveals its sentence and a small greyscale drawing beside it: a subject-line A/B pair, an inbox preview, shared content blocks, a send-time curve, sending waves, bounce limits, a funnel, a click ranking or an open-rate slump. It's a segment group, an accordion and a badge, with your theme's tokens for every colour and no button. For products whose features fall into a few stages and are easiest to understand by looking at one.
FAQ
How do I change the stages, steps and drawings?
Edit STAGES at the top of the file: each stage has an id, a label and three steps with a title, a sentence, two badges and a drawing name. Every drawing is a small component beside it (SubjectsDrawing, TimeDrawing, RatesDrawing…) and the Drawing helper picks one by name, so a new step needs a data entry, a component and one line in the helper. The numbers in each drawing come from typed data above it, so the percentages, the winner, the best hour and the dip are derived rather than typed twice.
What happens to the open step when I change stage?
Each stage keeps its own accordion and remembers the step you opened. The three sit stacked in one cell, and the two you are not looking at are invisible, so Tab only reaches the rows you can see and the block keeps the tallest height whichever pill is chosen.
Why can't I close the open step?
One step is always open, because every stage shows a drawing. Opening another step closes the first. The accordion is not collapsible, which keeps the last step open.
How do I use it with a keyboard?
The stage control is a group of radio buttons: Tab to it, then use the arrow keys to move between Draft, Send and Measure, which changes the steps at once. Each step is a real accordion button that opens with Enter or Space. The arrow keys also move between the steps.
Are the drawings real charts?
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 step's sentence. The send-time and slump curves are one SVG path generated from the numbers beside it, with the marker placed from the same data. They keep one fixed height, so opening a step never moves the page.