Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Account blocks

Pro

Beta Programs Account Block for Vue

Early-access security programs as rows with stage and risk by word, a join switch, the number of participants and join date, and a closed What changes section; leaving a program that alters sign-in asks in an alert dialog.

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

Let people try new security features early with this beta programs panel for Vue with Ark UI. A compact header holds the title and one sentence, and inside a hairline frame a heading counts the programs joined. Each row names a program, shows its stage by word (Alpha or Beta) and its risk by word (Low or Medium risk) with an icon, how many people are in it and the day you joined, and ends in a Switch named for the program. A closed Collapsible, What changes, says in plain words what joining alters. Joining takes effect at once; leaving a program that alters how you sign in asks first in an Alert Dialog with focus on Cancel. It is built from Switch, Badge, Collapsible, Alert Dialog and Guides, with a CSS entrance only and no Shine Button because the switches apply at once. For the security settings of any product with an early-access channel.

FAQ

How do I add a program?

Add an object to PROGRAMS: an id, a title, the stage and risk words, people, whether it alters sign-in (signin, which makes leaving ask), the sentence what and the sentence leave the dialog shows. START lists the programs already joined with the ISO day.

Which programs ask before you leave?

Only those with signin set, because leaving changes how you get into your account. The switch stays on while the dialog is open and the dialog says what changes in its description. Stay returns focus to the switch; Leave program turns it off and says so in the status line. Other programs switch at once.

How is the joined count worked out?

From the list of joined programs, so it always matches the switches: 2 programs joined, 1 program joined. The participant counts are typed data, formatted without the browser's locale so they read the same everywhere.

What stays local in the demo?

Membership. Joining and leaving change the page's state, record the as-of day as the join date and say so in the polite status line; nothing is sent. In your app call your server in join and leave.

Is it accessible?

Each switch is named Join followed by the program, the badges carry words as well as icons, and What changes is a labelled disclosure button. The dialog traps focus and starts on Cancel. The dialog's initial focus option puts focus on Cancel.

How does it look on a phone?

The switch stays at the end of the row beside the name and badges, the facts wrap under them, and What changes sits under the row. Nothing scrolls sideways.

All 100 account blocks