Skip to content
Beautiful UI

App screensLumen Halo

Security SettingsProv1.0.0

An account's security page: change password with the new one rated as you type; two-factor sign-in set up in place (scan or type the key, confirm a code, save recovery codes shown once); and the devices signed in, each signed out with a second press.

.md
pnpm dlx shadcn@latest add @beautiful-ui-pro/lumen-security-settings

Needs your registry key. Your components.json style picks the Base UI or Radix build: radix-*, new-york and default get Radix, base-* gets Base UI.

Styles didn't apply?

The CLI adds the styles to the CSS file named in components.json (tailwind.css). Check that it points at your global stylesheet, that the project uses Tailwind CSS v4, and that the file is imported in your root layout. Installed by hand: paste styles.css into that file.

Set up the Beautiful UI registry

Free pieces install from their URL with no setup (that URL gives the Base UI build; Radix projects use /r/radix-nova/<name>.json, or add the registries below and the CLI picks your build). Pro pieces need the registries below and BEAUTIFUL_UI_TOKEN in .env.local.

components.json
{
  "registries": {
    "@beautiful-ui": "https://beautiful-ui.dev/r/{style}/{name}.json",
    "@beautiful-ui-pro": {
      "url": "https://beautiful-ui.dev/r/pro/{style}/{name}.json",
      "headers": { "Authorization": "Bearer ${BEAUTIFUL_UI_TOKEN}" }
    }
  }
}

MCP server

claude mcp add --transport http beautiful-ui https://beautiful-ui.dev/api/mcp
Catalog for agents: /llms.txt
Two-factor on

Usage

Import it and pass your content. The props that matter most are listed next.

Example
"use client";
import * as React from "react";
import { SecuritySettings, type SecuritySession } from "@/components/ui/lumen/blocks/security-settings";

async function post<T>(url: string, body?: unknown): Promise<T> {
  const res = await fetch(url, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(body ?? {}) });
  if (!res.ok) throw new Error((await res.json().catch(() => null))?.error ?? "Something went wrong. Try again.");
  return res.json();
}

export function SecurityPage({ initial }: { initial: { twoFactor: boolean; sessions: SecuritySession[] } }) {
  const [twoFactor, setTwoFactor] = React.useState(initial.twoFactor);
  const [sessions, setSessions] = React.useState(initial.sessions);
  return (
    <SecuritySettings
      onChangePassword={(input) => post("/api/account/password", input)}
      twoFactor={twoFactor}
      onStartTwoFactor={() => post("/api/account/2fa/start")}
      onVerifyTwoFactor={async (code) => {
        const r = await post<{ recoveryCodes: string[] }>("/api/account/2fa/verify", { code });
        setTwoFactor(true);
        return r;
      }}
      onDisableTwoFactor={async () => {
        await post("/api/account/2fa/disable");
        setTwoFactor(false);
      }}
      sessions={sessions}
      onSignOutSession={async (s) => {
        await post(`/api/account/sessions/${s.id}/revoke`);
        setSessions((all) => all.filter((x) => x.id !== s.id));
      }}
      onSignOutOthers={async () => {
        await post("/api/account/sessions/revoke-others");
        setSessions((all) => all.filter((x) => x.current));
      }}
    />
  );
}

Props

  • onChangePassword–

    ({ current, next }) => Promise<void>

    Change it; throw an Error with the message to show. Omit to hide the password section.

  • twoFactor–

    boolean

    Two-factor is on now.

  • onStartTwoFactor–

    () => Promise<{ secret, otpauthUrl }>

    Start setup on your server; the QR code shows otpauthUrl and the key is shown to type.

  • onVerifyTwoFactor–

    (code) => Promise<{ recoveryCodes }>

    Check the 6-digit code; resolve with recovery codes (shown once), throw when it's wrong.

  • onDisableTwoFactor–

    () => unknown

    Turn it off (asked for with a second press).

  • sessions / onSignOutSession / onSignOutOthers–

    SecuritySession[] / (session) => unknown / () => unknown

    SecuritySession = { id, device, location?, lastActive, current? }. The current one can't be signed out here.

Show all 7 props

  • labels–

    Partial<SecurityLabels>

    Every word, for i18n.

Source

components/ui/lumen/blocks/security-settings.tsx

This component is included with Pro.

Try the live preview above. Get Pro to install the source.

Get All-Access
121 more Pro pieces in Lumen HaloEvery story chart, block and screen in the same language. Previews are live for everyone; the code comes with Pro.See the plans

More in App screens