Security Settings

Password, two-factor, passkeys and sessions in grouped rows: a tiny ring counts recommended steps, passkeys are added inline while your device confirms, and signed-out sessions slide off the table one after another.

akapasskeys·two-factor·active sessions

Install

Run this in any project set up for the shadcn CLI. It copies the Security Settings source into your components folder, so the code is yours to change.

npx shadcn@latest add https://devl.dev/r/security-settings.json

Use it

Import it and render it. Every prop has a typed default, so it works straight away, and you pass your own data when you’re ready.

import { SecuritySettings } from "@/components/security-settings";

export default function Page() {
  return <SecuritySettings />;
}

Built with

A free React screen in the Settings collection, written in TypeScript with Tailwind CSS on coss ui. MIT licensed.

coss ui: badge, button, input, label, menu
npm: lucide-react, motion

Props

Read from the Security Settings source. Everything is optional unless it says required.

Prop	Type	Default
className	string	—
passwordChanged	string	"4 months ago"
passkeys	SecurityPasskey[]	defaultPasskeys
sessions	SecuritySession[]	defaultSessions
authenticatorSince	string	"Jan 12, 2026"
recoveryCodesLeft	number	8
recoveryCodesSaved	boolean	false
newPasskey	{ name: string; kind: SecurityDeviceKind; authenticator: string }	defaultNewPasskey
onNavigate	(section: SettingsSectionId) => void	—

More in Settings

267

Profile Settings

Edit your profile: crop a generated photo in a small dialog, claim a username with a live availability check and suggestions, see your local time on a tiny clock, and save from a bar that springs up when something changes.

268

Appearance Settings

Theme cards with miniature previews above a compact live app that re-themes with a circular wipe, eases into your accent colour and glides between densities as you change them.

270

Notification Settings

Channels you can open and tune, per-event email, push and chat toggles grouped under section switches, quiet hours on a small 24-hour track, and a digest line whose item count rolls as you change things.

271

Members & Roles

Invite people, manage members and pending invites, and tune a role-by-permission matrix with a locked owner column, live head counts and a duplicate-to-customise role.

Prop

Type

Default

className

string

—

passwordChanged

string

"4 months ago"

passkeys

SecurityPasskey[]

defaultPasskeys

sessions

SecuritySession[]

defaultSessions

authenticatorSince

string

"Jan 12, 2026"

recoveryCodesLeft

number

recoveryCodesSaved

boolean

false

newPasskey

{ name: string; kind: SecurityDeviceKind; authenticator: string }

defaultNewPasskey

onNavigate

(section: SettingsSectionId) => void

—