Account Settings

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its button, badge, avatar, avatar-initials dependencies and any missing npm packages, and installs them straight into your project.

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/dashboard/dashboard13.tsx instead.

Usage

The file also exports dashboard13Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Dashboard13, dashboard13Demo } from "@/components/blocks/dashboard/dashboard13";

export default function Page() {
  return <Dashboard13 {...dashboard13Demo} />;
}

Props

Types

type SectionId = "profile" | "security" | "notifications" | "billing" | "team";

type Role = "Admin" | "Editor" | "Viewer";

type InvoiceStatus = "Paid" | "Due" | "Failed";

type Session = { device: string; location: string; lastActive: string };

type NotificationType = { label: string; email: boolean; push: boolean; sms: boolean };

type Invoice = { date: string; amount: string; status: InvoiceStatus };

type TeamMember = { name: string; email: string; role: Role };

Behavior notes

• The section nav genuinely swaps which panel renders via real `useState`; there is no route change. On large screens it's a vertical rail on the left, below `lg` it collapses to a horizontal scrollable chip row at the top since the vertical rail is `hidden lg:flex`.
• The Profile panel's name, email, and bio fields are real controlled inputs seeded from props; typing updates local state immediately, there is no Save button because there's nothing to submit to.
• The two-factor toggle and every per-channel notification toggle are real local booleans built on a hand-written `role="switch"` button (no dedicated switch primitive exists in this repo's UI kit), not a native checkbox.
• The Team panel's role `<select>` per member is a real controlled element with its own local state; changing it immediately updates that member's role shown in the row.
• The Revoke button in Security and the Download link per invoice row in Billing are decorative, they render but do nothing when clicked; the Update button next to the payment method is decorative for the same reason.
• Notification, session, and member data are seeded into local state once from props on mount; toggling switches or changing a role does not write back to the arrays the parent passed in.