Security Settings - defuss-shadcn

On this page (2)

Component Skill — components/security-settings/component-skill.md

Native basis

A stack of <section> cards: rows (.mk-security-settings-row) with an icon, a title, a status line and an action; two-factor as a Switch; passkeys and sessions as lists with labelled sign-out / remove buttons.

Built from

Switch, Badge, Button.

Web Platform APIs

:has()<time>Container queries

Classes

.mk-security-settings.mk-security-settings-section.mk-security-settings-row.mk-security-settings-status.mk-security-settings-list.mk-security-settings-device.mk-security-settings-foot

Data attributes

None.

§Default

Section cards of rows: the password (with <time> of the last change), two-factor as a Switch and a status chip, passkeys, and every signed-in session with a labelled sign-out.

<div class="mk-security-settings">
  <section class="mk-security-settings-section" aria-labelledby="sec-sign">
    <h2 id="sec-sign">Signing in</h2>
    <div class="mk-security-settings-row"><i data-lucide="key-round"></i><div><strong>Password</strong><p>Last changed <time datetime="2026-07-02">3 months ago</time></p></div><a class="btn" data-variant="outline" data-size="sm" href="#">Change</a></div>
    <div class="mk-security-settings-row"><i data-lucide="smartphone"></i><div><strong>Two-factor authentication <span class="mk-security-settings-status" data-status="on">On</span></strong><p>Authenticator app · backup codes saved</p></div><div class="switch-item"><input class="switch" type="checkbox" role="switch" id="sec-2fa" checked><label for="sec-2fa" class="sr-only">Two-factor authentication</label></div></div>
    <div class="mk-security-settings-row"><i data-lucide="fingerprint"></i><div><strong>Passkeys <span class="mk-security-settings-status" data-status="off">None yet</span></strong><p>Sign in with your fingerprint or face - no password.</p></div><a class="btn" data-variant="outline" data-size="sm" href="#">Add a passkey</a></div>
  </section>
  <section class="mk-security-settings-section" aria-labelledby="sec-sess">
    <h2 id="sec-sess">Where you're signed in</h2>
    <ul class="mk-security-settings-list">
      <li><span class="mk-security-settings-device"><i data-lucide="laptop"></i></span><div><strong>Chrome on macOS <span class="badge" data-variant="secondary" data-size="sm">This device</span></strong><span>Lisbon · active now</span></div></li>
      <li><span class="mk-security-settings-device"><i data-lucide="smartphone"></i></span><div><strong>Safari on iPhone</strong><span>Lisbon · 2 hours ago</span></div><button class="btn" data-variant="ghost" data-size="sm" type="button" aria-label="Sign out Safari on iPhone">Sign out</button></li>
      <li><span class="mk-security-settings-device"><i data-lucide="monitor"></i></span><div><strong>Firefox on Windows</strong><span>Berlin · 3 days ago</span></div><button class="btn" data-variant="ghost" data-size="sm" type="button" aria-label="Sign out Firefox on Windows">Sign out</button></li>
    </ul>
    <div class="mk-security-settings-foot"><button class="btn" data-variant="outline" data-size="sm" type="button">Sign out of all other sessions</button></div>
  </section>
</div>

§CSS view file

/* -- Security Settings (website · Account & States) -----------------------

   Manages passwords, authentication methods, and active sessions - the password, two-factor methods, passkeys and every signed-in device. */

@layer components {

  /* every box in the block measures border-box - the same on any page */

  :where(.mk-security-settings, .mk-security-settings *, .mk-security-settings ::before, .mk-security-settings ::after) { box-sizing: border-box; }

  .mk-security-settings { container: mk-security-settings / inline-size; display: grid; gap: 1.25rem; width: 100%; max-width: 44rem; }

  .mk-security-settings-section { padding: 0.5rem 1.25rem; border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    background: var(--card);

    color: var(--card-foreground);

    & > h2 { margin: 0; padding-block: 1rem 0.5rem; font-size: 1rem; font-weight: 600; }

  .mk-security-settings-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding-block: 1rem;

    & + & { border-block-start: 1px solid var(--border); }

    & > svg { width: 1.25rem; height: 1.25rem; color: var(--muted-foreground); }

    & strong { display: block; font-weight: 600; }

    & p { margin: 0.125rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }

  .mk-security-settings-status { display: inline-flex; align-items: center; gap: 0.375rem; margin-inline-start: 0.5rem; padding: 0.0625rem 0.5rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; vertical-align: middle;

    &[data-status="on"] { background: color-mix(in oklch, #16a34a 14%, transparent); color: #15803d; }

    &[data-status="off"] { background: color-mix(in oklch, #d97706 16%, transparent); color: #b45309; }

  .mk-security-settings-list { display: grid; margin: 0; padding: 0; list-style: none;

    & li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.875rem; padding-block: 0.875rem; border-block-start: 1px solid var(--border); }

    & li div { display: grid; }

    & li span:not(.badge, .mk-security-settings-device) { color: var(--muted-foreground); font-size: 0.8125rem; }

    & strong { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; font-weight: 600; }

  .mk-security-settings-device { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-md); background: var(--muted);

    & svg { width: 1.125rem; height: 1.125rem; }

  .mk-security-settings-foot { display: flex; justify-content: flex-end; padding-block: 1rem; border-block-start: 1px solid var(--border); }

  /* -- Accessibility ------------------------------------------- */

  @media (forced-colors: active) {

    .mk-security-settings-section { border-color: CanvasText; }

    .mk-security-settings-status { border: 1px solid CanvasText; }

Comments, ideas or improvements? Edit this page's source on GitHub

Security SettingsBLK

§CSS view file