Account Settings

Dashboard13: Account Settings

A full-height account settings page for an app or SaaS dashboard: a vertical settings nav that live-switches panels covering an editable profile, security, notifications, billing, and team management. Use it as a drop-in settings dashboard UI, a Next.js / React account settings template built on shadcn/ui, with forms, toggles, and per-member role selects already wired up.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/dashboard13?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/dashboard13?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/dashboard13.tsx, the Beste user-menu component it composes to components/beste/component/user-menu.tsx, and the shadcn/ui dependencies they need (button, badge, avatar, input, label, textarea, switch, select, separator).

Quick start

The installed file exports dashboard13Demo alongside the block: the exact props behind the preview above. Spread it to get the settings page in one line. It fills its parent, so drop it into a full-height layout (or a h-screen wrapper).

import { Dashboard13, dashboard13Demo } from "@/components/beste/block/dashboard13";

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

Props

Every prop is optional. Omit any and the block falls back to its built-in demo data, so <Dashboard13 /> renders a complete, populated settings page out of the box. Pass just the props you want to override.

The block-local data types:

type DashboardUser = {
  name: string;
  email: string;
  avatar: string; // image URL, rendered with the shadcn Avatar's <img>
};

type NotifRow = {
  key: string; // maps to an entry in the notification switch state
  label: string;
  desc: string;
};

type Session = {
  device: string;
  meta: string;
  icon: LucideIcon;
  current: boolean; // true renders a "Current" badge instead of "Revoke"
};

type TeamMember = {
  name: string;
  email: string;
  avatar: string;
  role: string; // one of the Select options: "owner" | "admin" | "member"
};

type Invoice = { id: string; date: string; amount: string };

type BillingInfo = {
  plan?: string; // "Scale plan"
  priceCaption?: string; // "$49 monthly · renews Apr 1, 2026"
  card?: string; // "Visa ending 4242"
  cardExpires?: string; // "Expires 08 · 2028"
};

The account menu reuses the interface exported by the composed Beste component:

// from user-menu
type UserMenuItem = {
  id: string;
  label: string;
  icon?: LucideIcon;
  destructive?: boolean; // red row with a separator above it
};

Still internal

A few structural and inline bits stay as constants in the installed file — edit them in place:

• sections — the vertical settings-nav structure and Lucide icons (Profile, Security, Notifications, Billing, Team). The union of their ids types the active-section state, so it drives panel switching rather than being swappable content; keep ids and panels in sync.
• The two-factor Switch default and the notification switch state's initial booleans are set inline in component state.

Components

• user-menu — the avatar dropdown in the top-right of the header, driven by the user and userItems constants.

Behavior notes

• The vertical nav live-switches panels via local state: clicking Profile, Security, Notifications, Billing, or Team swaps the panel on the right, with the active item highlighted. On screens below md the nav collapses to a horizontal, scrollable row above the panel.
• The Security panel has a controlled two-factor authentication Switch (on by default) and lists active sessions, tagging the current device with a "Current" badge and offering "Revoke" on the others.
• The Notifications panel renders a switch per row from notifRows, backed by a single record of booleans; toggling a row updates only its key.
• The Billing panel shows the current plan, payment method, and a downloadable invoice list.
• The Team panel shows each member with a per-member role Select (Owner / Admin / Member) and an "Invite" action.
• The Profile, Security, and Team panels use uncontrolled inputs (defaultValue) and non-submitting buttons; wire the Save / Cancel / form actions to your own handlers.

Requirements

• Next.js App Router. Rendered as a client component ("use client"), since the panel switching, toggles, and selects are stateful.
• Fills its parent height (h-screen on the root <section>), so place it in a full-height layout.
• Avatars render with a plain <img> (via the shadcn Avatar), so no next.config images.remotePatterns setup is needed for the remote avatar hosts.