shadcn.io is not affiliated with official shadcn/ui
Security Features Carousel Block for Ark UI
Eight account protections for an account-safety panel on a swipeable track, each saying Off, Setting up or On and walking a two-step set-up in place, over a derived count, a strength word and one Turn on recommended button.
Installation
Overview
Let people harden an account one protection at a time, with this security features carousel for React with Ark UI. Shieldmoor, an account-safety panel, lists eight protections (two-step sign-in, recovery codes, sign-in alerts, session timeout, trusted devices, passkeys, allowed networks and a security summary) on one ruled track, three at a time from the large breakpoint, two from medium and one on a phone. Each slide has an icon, a sentence and a status word (Off, Setting up or On). "Set up" walks a short step in the slide itself: choose how, check, then "Turn on"; "Turn off" undoes it, and the three steps share one box so the slide never changes height. A band above the track derives how many protections are on and a strength word and bar from a typed weight rule (a sample rule, said so), and holds the block's one primary, a Shine Button "Turn on recommended". The foot holds the status line, a dot for each step, and Previous and Next Buttons. The ruled bands come from Guides. Shieldmoor and the protections are made up for the example.
FAQ
How do I use my own protections?
Edit FEATURES. Each has an id, a label, a sentence, two options for the set-up choice, a recommended flag, a starting stage (on or off) and a weight. The count, the strength word and bar, the slide names and the dots are derived from that list. To add a protection, add an entry and a line to the Glyph component for its icon.
How is the strength worked out?
By one helper, strengthOf. Each protection has a weight and the weights add up to one hundred; the sum of what is on gives the score, and under 30 reads Weak, under 60 Fair, under 85 Strong, and above that Very strong. The band says it is a sample rule. Replace the weights and the thresholds with your own policy, or load a real score.
What does Turn on recommended do?
It turns on every protection marked Recommended that is not already on, using the first option where none was chosen, and the status line says how many it turned on. When they are all on, the button stays in place, marked as unavailable, and pressing it says so.
How does it work with a keyboard?
Tab reaches the buttons of the slides in view. Pressing "Set up" moves focus to the step's heading, the arrow keys move between the choices, and "Next", "Turn on", "Back" and "Cancel" are buttons. After each move focus lands on the new step, and when a protection is turned off or on it lands on its main button. Slides that are out of view are hidden from the tab order and from screen readers.
Why doesn't pressing a button swipe the track?
The set-up controls sit in a box marked data-no-drag, and the track ignores a drag that starts in one.
The Carousel's mouse drag is off and the controls take touch-action: pan-y.
What stays local in the demo?
Everything. Nothing is protected: the protections are typed example data, the steps only change this page, and the status line says "Nothing was changed". To wire it for real, make move and turnOnRecommended call your account API (enrol the factor, store the codes) and only then update stage.