shadcn.io is not affiliated with official shadcn/ui
Icon Medallion CTA Block for Vue
A split security prompt for a password vault: the headline and two actions at the start, and at the end a settings panel where a medallion swaps from an alert shield to a checked one when the two-factor switch turns on.
Installation
Overview
Nudge people to secure their account with this split prompt for Vue with Ark UI. Between solid rails, the start side holds the headline, a sentence about Pinegate (a fictional password vault), the Shine Button and a ghost "Remind me later"; a solid divider that meets the top rule separates it from a settings panel in a hairline frame with + marks on its corners. In the panel a round medallion sits beside the labelled two-factor switch; turning the switch on swaps the medallion's alert shield for a checked one with a foreground ring, and the Shine Button changes from "Enable 2FA" to "Manage 2FA". "Remind me later" is a toggle that sets a reminder, with a check beside it. It's built from Guides, Swap, Switch, Shine Button and Button, with CSS transitions and your theme's tokens, and nothing moves under reduced motion. On a phone the panel stacks under the text with a rule between them, so the main button stays on the first screen. Made for post-sign-up checklists, security nudges, settings prompts and any block where one choice should visibly change the state of the page.
FAQ
What does the switch do, and how do I connect it?
It's a controlled switch named "Two-factor authentication": its state, on, drives the medallion, the helper text and the button label, so the whole card shows one source of truth. Here it only changes this card. To wire it up, call your API from the toggle handler: turn it on once your server confirms, and set the state back if the request fails, so the card never claims protection the account doesn't have.
How does the medallion change, and is it announced?
The icons swap with a short scale and fade, and the ring and fill change with a colour transition; with reduced motion on, both are instant. The medallion is decoration, so it's hidden from assistive technology; instead, a polite status line, empty until someone acts, says "Two-factor authentication is on" or "off", and "We'll remind you later" for the reminder. Nothing is announced when the page loads.
Do the labels change the layout?
No. The helper text beside the switch and the button's label are each rendered in both versions in one grid cell, and the one that isn't current is invisible, so the cell has the width of the longer text and nothing around it moves when the state changes. The hidden text is out of the accessibility tree, so a screen reader reads only the current one.
What does Remind me later do?
It's a toggle button with aria-pressed: pressing it sets reminded and shows a check beside its label, and pressing it again clears it. Connect it to however you postpone prompts, for example a cookie or a field on the user's profile. It's disabled once two-factor is on, since there's nothing left to postpone.
Where does the main button go?
The Shine Button is a link, to your setup flow when the switch is off and your security settings when it's on: change its href with the state if they differ. A band of light sweeps across it once on hover and keyboard focus, and with reduced motion it fades in where it stands.
The button takes asChild with your link inside it.