shadcn.io is not affiliated with official shadcn/ui
Tabbed Hero Feature Split Features Block for Solid
A features section for a contract-signing tool: pill tabs over one framed card whose contract drawing changes with the stage, a signature field that fills when you press Sign, and the copy under it in two columns.
Installation
Overview
A features section for Solid with Ark UI, where three stages of one product share a single card. A centred header sits over three pill tabs (Draft, Review and Sign) and one framed figure with a plus mark on each corner. The top of the card draws the contract page for the open stage: an editor with its toolbar and outline, a redlined clause with a comment thread, and a signature field. Under the drawing the copy sits in two columns: the title and sentence, then three ticks and the page's one Shine Button. It's tabs, a button, a badge, avatars and the Guides line kit, with your theme's tokens for every colour. For products that are easiest to show as a short sequence on one document.
FAQ
How do I change the stages and the copy?
Edit VIEWS at the top of the file: each stage has a label, a title, a sentence and three ticks. Each drawing is its own small component (DraftDrawing, ReviewDrawing and SignDrawing), picked in Stage by the stage's id, so a fourth stage needs an entry, a drawing and one line in Stage.
Does the Sign button really do something?
It toggles the block's signed state: the signature is revealed from its start, the badge on the page changes to Signed, the signers list counts you in and a polite status line says so. The label becomes Clear signature, so the field can be reset with the keyboard. The state lives above the tabs, so it survives switching to another stage and back. Nothing is sent anywhere.
Why doesn't the card change size when I switch tabs?
The three copies sit in one hidden grid cell under the open panel, and the drawing has a fixed height, so the card is always as tall as the tallest stage. That hidden copy is invisible and inert: it can't be focused or read by a screen reader.
How do the tabs work?
They are real tabs with real panels, so Tab moves into the open panel and the arrow keys move between stages. The tab list keeps its own sliding indicator behind the open tab.
Are the drawings accessible?
The Draft and Review drawings are decoration: they are hidden from assistive technology and can't be focused, because the title and sentence under them say the same. The Sign drawing is live, so its page text, its button and its status line are readable and the stand-in lines and the signature itself are hidden.
Related
- Tab Swap Split Showcase FeaturesTabs and accordions
- Segmented Tab Split Frame FeaturesTabs and accordions
- Pill-Driven Flagship Card FeaturesTabs and accordions
- Framed Preview Card Trio FeaturesCard grids
- Vertical Tab Accordion Preview FeaturesTabs and accordions
- Tabbed Product Views HeroInteractive demos