Security settingsPro

• Type: Block

• Page: https://ui.xzero.co.uk/components/blocks/security-settings

• Markdown: https://ui.xzero.co.uk/components/blocks/security-settings/markdown

• Access: Xzero Pro

• Registry id: security-settings

• Source file: registry/blocks/security-settings/security-settings.tsx

• Built from: Button, Badge, Checkbox, Copy button, Hold to confirm, OTP input, Password field, Password strength

• Keywords: react security settings, two factor setup, 2fa setup flow, totp qr code setup, active sessions list, change password form, backup codes

Use this as the security tab of account settings. Connect Verify to your TOTP check, the backup codes to your generator, Update password to your password endpoint, and Revoke and Sign out to your session API.

When to use

• The security tab of account settings with two-factor setup, password change, and sessions.
• Guided TOTP setup that walks through scan, verify, and backup codes.

When not to use

• Use settings-page for general account and workspace settings.
• Use api-keys for managing developer tokens.
• Use audit-log for the history of security events.

Installation

Register both Xzero UI namespaces in your project's components.json:

{
  "registries": {
    "@xzero-ui": "https://mcp.xzero.co.uk/r/{name}.json",
    "@xzero-ui-pro": "https://mcp.xzero.co.uk/r/pro/{name}.json"
  }
}

npx shadcn@4.23.0 add @xzero-ui-pro/security-settings

Install xzero-foundation once, and import @/components/xzero/foundation.css in your app root. No Xzero token is used by this snapshot. For sample portraits, photos, fonts, or logos, download https://mcp.xzero.co.uk/install-assets.mjs and run node xzero-install-assets.mjs <receiving-project>.

Usage

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

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

API reference

SecuritySettings

An account security page with guided two-factor setup (scan, verify, backup codes), password change with strength meter, and active sessions you can revoke. Account, setup key, demo code (246810), backup codes and initialSessions are sample data in security-settings.tsx.

No props.

Accessibility

• Password errors render in a role="alert" linked with aria-describedby and aria-invalid; the field uses autoComplete="current-password".
• After revoking a session, focus moves to the neighbouring Revoke button or the sessions heading.
• A polite live region announces saves, verification and session changes.

Motion

• Two-factor steps advance along a rail with a gliding marker, and sections expand with a height spring.
• Reduced motion uses instant transitions and skips height animation.

Responsive behavior

• Below a 640px container backup codes drop to two columns.
• Below 560px the QR code stacks above the setup key and section padding tightens.

Performance

• Sections are plain DOM with height springs when expanding; there is no loop or observer cost.
• The session list is not virtualized, which is fine for the handful of sessions an account normally has.

Notes for AI

• Use as the security tab of account settings.
• Verification, backup code download, password update and session revoke are simulated with timers; replace them with your TOTP check, code generator, password endpoint and session API.
• Replace the in-file ACCOUNT, SETUP_KEY, QR pattern and initialSessions with real data from props or a fetch.
• Composes Xzero Button, Badge, Checkbox, Copy button, Hold to confirm, OTP input, Password field and Password strength.

Related

• Settings page: Account settings with a gliding section nav and a save bar that morphs in as you edit.
• API keys: API key management where Create key unfolds into its form and each secret is shown once.
• Password strength: Show how strong a new password is while it is typed.
• OTP input: A six digit verification flow with paste support and keyboard navigation.

Guidance for AI tools

Blocks are complete, self-contained screens with sample data. Replace the sample data and connect the callbacks described above. Follow the declared prop types and do not invent props. Keep keyboard access, reduced motion support, and both light and dark themes intact when adapting it.

Full library index: https://ui.xzero.co.uk/llms.txt