# Settings 5

> Profile header with connected accounts, localization selects, and a danger zone.

A shadcn/ui block from the [@efferd](https://efferd.com/?utm_source=shadcn.exchange) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/efferd/settings-5).

- Page, with a live preview: https://shadcn.exchange/r/efferd/settings-5
- Screenshot: https://shadcn.exchange/shot/efferd/settings-5/light.png
- Registry item: https://efferd.com/r/settings-5.json
- Categories: settings
- Listed: 2026-10-29, source last changed 2026-10-29

## Install

```bash
npx shadcn@latest add https://shadcn.exchange/r/efferd/settings-5.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `alert-dialog`, `avatar`, `badge`, `button`, `card`, `label`, `select`, `@efferd/github-icon`, `@efferd/google-icon`, `@efferd/app-shell-5`

## Files

### `registry/blocks/settings/5/danger-zone-settings.tsx`

```tsx
import {
	AlertDialog,
	AlertDialogAction,
	AlertDialogCancel,
	AlertDialogContent,
	AlertDialogDescription,
	AlertDialogFooter,
	AlertDialogHeader,
	AlertDialogTitle,
	AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
	SettingsGroup,
	SettingsGroupTitle,
	SettingsPanel,
} from "@/components/settings-section";

export function DangerZoneSettings() {
	return (
		<SettingsGroup>
			<SettingsGroupTitle>
				<IconPlaceholder
					aria-hidden
					hugeicons="Alert02Icon"
					lucide="TriangleAlertIcon"
					phosphor="WarningIcon"
					remixicon="RiErrorWarningLine"
					tabler="IconAlertTriangle"
				/>
				Danger zone
			</SettingsGroupTitle>
			<SettingsPanel className="flex flex-col gap-6 pb-(--card-spacing)">
				<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
					<div className="flex min-w-0 flex-col gap-1">
						<span className="font-medium text-sm">Sign out everywhere</span>
						<p className="text-pretty text-muted-foreground text-xs">
							End every signed-in session except this one.
						</p>
					</div>
					<Button
						className="shrink-0"
						id="sign-out-sessions"
						size="sm"
						type="button"
						variant="outline"
					>
						Sign out all
					</Button>
				</div>
				<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
					<div className="flex min-w-0 flex-col gap-1">
						<span className="font-medium text-sm">Delete account</span>
						<p className="text-pretty text-muted-foreground text-xs">
							Remove your account and all data. This cannot be undone.
						</p>
					</div>
					<AlertDialog>
						<AlertDialogTrigger asChild>
							<Button
								className="shrink-0"
								id="delete-account"
								size="sm"
								type="button"
								variant="destructive"
							>
								Delete account
							</Button>
						</AlertDialogTrigger>
						<AlertDialogContent size="sm">
							<AlertDialogHeader>
								<AlertDialogTitle>Delete your account?</AlertDialogTitle>
								<AlertDialogDescription>
									This permanently removes your profile, workspace access, and
									saved preferences. This action cannot be undone.
								</AlertDialogDescription>
							</AlertDialogHeader>
							<AlertDialogFooter>
								<AlertDialogCancel>Cancel</AlertDialogCancel>
								<AlertDialogAction variant="destructive">
									Delete account
								</AlertDialogAction>
							</AlertDialogFooter>
						</AlertDialogContent>
					</AlertDialog>
				</div>
			</SettingsPanel>
		</SettingsGroup>
	);
}
```

### `registry/blocks/settings/5/localization-settings.tsx`

```tsx
import {
	Select,
	SelectContent,
	SelectItem,
	SelectTrigger,
	SelectValue,
} from "@/components/ui/select";
import { SettingSelectField } from "@/components/settings-field";
import {
	SettingsGroup,
	SettingsGroupTitle,
	SettingsPanel,
	SettingsPanelTitle,
} from "@/components/settings-section";

export function LocalizationSettings() {
	return (
		<SettingsGroup>
			<SettingsGroupTitle>
				<IconPlaceholder
					aria-hidden
					hugeicons="Location01Icon"
					lucide="MapPinIcon"
					phosphor="MapPinIcon"
					remixicon="RiMapPinLine"
					tabler="IconMapPin"
				/>
				Localization
			</SettingsGroupTitle>
			<SettingsPanel className="flex flex-col gap-10">
				<div className="flex flex-col gap-4">
					<SettingsPanelTitle>Language and Currency</SettingsPanelTitle>
					<div className="grid gap-4 sm:grid-cols-3">
						<SettingSelectField htmlFor="language" label="Language">
							<Select defaultValue="en-us">
								<SelectTrigger className="w-full" id="language">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="en-us">English – US</SelectItem>
									<SelectItem value="en-gb">English – UK</SelectItem>
								</SelectContent>
							</Select>
						</SettingSelectField>
						<SettingSelectField htmlFor="currency" label="Currency">
							<Select defaultValue="usd">
								<SelectTrigger className="w-full" id="currency">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="usd">US Dollar $</SelectItem>
									<SelectItem value="eur">Euro €</SelectItem>
								</SelectContent>
							</Select>
						</SettingSelectField>
					</div>
				</div>
				<div className="flex flex-col gap-4">
					<SettingsPanelTitle>Timezone and Date format</SettingsPanelTitle>
					<div className="grid gap-4 lg:grid-cols-3">
						<SettingSelectField htmlFor="timezone" label="Timezone">
							<Select defaultValue="asia-karachi">
								<SelectTrigger className="w-full" id="timezone">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="asia-karachi">
										Asia/Karachi (Pakistan Standard Time)
									</SelectItem>
									<SelectItem value="america-new-york">
										America/New_York (Eastern Time)
									</SelectItem>
								</SelectContent>
							</Select>
						</SettingSelectField>
						<SettingSelectField htmlFor="date-format" label="Date format">
							<Select defaultValue="mm-dd-yyyy">
								<SelectTrigger className="w-full" id="date-format">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="mm-dd-yyyy">mm/dd/yyyy</SelectItem>
									<SelectItem value="dd-mm-yyyy">dd/mm/yyyy</SelectItem>
								</SelectContent>
							</Select>
						</SettingSelectField>
						<SettingSelectField htmlFor="time-format" label="Time format">
							<Select defaultValue="12h">
								<SelectTrigger className="w-full" id="time-format">
									<SelectValue />
								</SelectTrigger>
								<SelectContent>
									<SelectItem value="12h">12 hours (am-pm)</SelectItem>
									<SelectItem value="24h">24 hours</SelectItem>
								</SelectContent>
							</Select>
						</SettingSelectField>
					</div>
				</div>
			</SettingsPanel>
		</SettingsGroup>
	);
}
```

### `registry/blocks/settings/5/profile-information.tsx`

```tsx
import { Button } from "@/components/ui/button";
import { SettingValue } from "@/components/settings-field";
import {
	SettingsGroup,
	SettingsGroupTitle,
	SettingsPanel,
	SettingsPanelTitle,
} from "@/components/settings-section";

export function ProfileInformation() {
	return (
		<SettingsGroup>
			<SettingsGroupTitle>
				<IconPlaceholder
					aria-hidden
					hugeicons="UserIcon"
					lucide="UserIcon"
					phosphor="UserIcon"
					remixicon="RiUserLine"
					tabler="IconUser"
				/>
				Profile information
			</SettingsGroupTitle>
			<SettingsPanel>
				<div className="flex items-center gap-4">
					<SettingsPanelTitle>Basic information</SettingsPanelTitle>
					<Button
						className="text-muted-foreground"
						size="sm"
						type="button"
						variant="ghost"
					>
						<IconPlaceholder
							aria-hidden="true"
							hugeicons="PencilEdit01Icon"
							lucide="PencilIcon"
							phosphor="PencilSimpleIcon"
							remixicon="RiPencilLine"
							tabler="IconPencil"
						/>
						Edit
					</Button>
				</div>

				<div className="grid gap-6 sm:grid-cols-2">
					<SettingValue label="Full name">
						<span className="truncate text-sm">Shaban Haider</span>
					</SettingValue>
					<SettingValue label="Primary email">
						<span className="truncate text-sm">shaban@efferd.com</span>
					</SettingValue>
				</div>
			</SettingsPanel>
		</SettingsGroup>
	);
}
```

### `registry/blocks/settings/5/security-information.tsx`

```tsx
import { GithubIcon } from "@/components/icons/github-icon";
import { GoogleIcon } from "@/components/icons/google-icon";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import { SettingValue } from "@/components/settings-field";
import {
	SettingsGroup,
	SettingsGroupTitle,
	SettingsPanel,
	SettingsPanelTitle,
} from "@/components/settings-section";

const externalPlatforms = [
	{
		label: "Google",
		icon: GoogleIcon,
	},
	{
		label: "GitHub",
		icon: GithubIcon,
	},
];

export function SecurityInformation() {
	return (
		<SettingsGroup>
			<SettingsGroupTitle>
				<IconPlaceholder
					aria-hidden
					hugeicons="Shield01Icon"
					lucide="ShieldIcon"
					phosphor="ShieldIcon"
					remixicon="RiShieldLine"
					tabler="IconShield"
				/>
				Security information
			</SettingsGroupTitle>
			<SettingsPanel className="grid gap-8 lg:grid-cols-[0.6fr_1fr] lg:gap-0 xl:grid-cols-[0.4fr_1fr]">
				<div className="flex flex-col gap-6 lg:pr-8">
					<div className="flex flex-wrap items-center gap-4">
						<SettingsPanelTitle>Username</SettingsPanelTitle>
						<Button
							className="text-muted-foreground"
							size="sm"
							type="button"
							variant="ghost"
						>
							<IconPlaceholder
								aria-hidden
								hugeicons="PencilEdit01Icon"
								lucide="PencilIcon"
								phosphor="PencilSimpleIcon"
								remixicon="RiPencilLine"
								tabler="IconPencil"
							/>
							Edit
						</Button>
					</div>
					<SettingValue label="Current Username">
						<span className="truncate text-sm">shabanhr</span>
					</SettingValue>
				</div>
				<div className="flex flex-col gap-6 lg:pl-8">
					<div className="flex flex-wrap items-center gap-4">
						<SettingsPanelTitle>Login methods</SettingsPanelTitle>
						<Button
							className="text-muted-foreground"
							size="sm"
							type="button"
							variant="ghost"
						>
							Manage
							<IconPlaceholder
								aria-hidden="true"
								hugeicons="ArrowRight01Icon"
								lucide="ArrowRightIcon"
								phosphor="ArrowRightIcon"
								remixicon="RiArrowRightLine"
								tabler="IconArrowRight"
							/>
						</Button>
					</div>
					<div className="grid gap-6 sm:grid-cols-2">
						<SettingValue label="Password">—</SettingValue>
						<SettingValue label="External platforms">
							<div className="flex items-center gap-2.5">
								{externalPlatforms.map((platform) => (
									<Badge key={platform.label} variant="secondary">
										<platform.icon
											aria-label={platform.label}
											className="size-4 text-foreground"
										/>
										<span className="text-sm">{platform.label}</span>
									</Badge>
								))}
							</div>
						</SettingValue>
					</div>
				</div>
			</SettingsPanel>
		</SettingsGroup>
	);
}
```

### `registry/blocks/settings/5/settings-field.tsx`

```tsx
import type { ReactNode } from "react";
import { Label } from "@/components/ui/label";

export function SettingValue({
	label,
	children,
}: {
	label: string;
	children: ReactNode;
}) {
	return (
		<div className="flex min-w-0 flex-col gap-1">
			<span className="text-muted-foreground text-xs">{label}</span>
			{children}
		</div>
	);
}

export function SettingSelectField({
	label,
	htmlFor,
	children,
}: {
	label: string;
	htmlFor: string;
	children: ReactNode;
}) {
	return (
		<div className="flex min-w-0 flex-col gap-2">
			<Label
				className="font-medium text-muted-foreground text-xs"
				htmlFor={htmlFor}
			>
				{label}
			</Label>
			{children}
		</div>
	);
}
```

### `registry/blocks/settings/5/settings-header.tsx`

```tsx
import {
	Avatar,
	AvatarFallback,
	AvatarImage,
} from "@/components/ui/avatar";

const avatarSrc = "https://github.com/shabanhr.png";

export function SettingsHeader() {
	return (
		<header className="flex items-center gap-4">
			<Avatar className="size-14">
				<AvatarImage alt="Shaban Haider" src={avatarSrc} />
				<AvatarFallback>SH</AvatarFallback>
			</Avatar>
			<div className="min-w-0">
				<h1 className="text-balance font-medium text-xl">Shaban Haider</h1>
				<p className="text-pretty text-muted-foreground text-sm">
					Manage information to make Efferd work better for you.
				</p>
			</div>
		</header>
	);
}
```

### `registry/blocks/settings/5/settings-section.tsx`

```tsx
import { cn } from "@/lib/utils";
import { Card } from "@/components/ui/card";

export function SettingsGroup({
	className,
	...props
}: React.ComponentProps<"section">) {
	return (
		<section className={cn("flex flex-col gap-3", className)} {...props} />
	);
}

export function SettingsGroupTitle({
	className,
	...props
}: React.ComponentProps<"h2">) {
	return (
		<h2
			className={cn(
				"flex items-center gap-2 font-heading font-medium text-muted-foreground text-sm",
				"[&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-foreground",
				className
			)}
			{...props}
		/>
	);
}

export function SettingsPanel({
	children,
	className,
	...props
}: React.ComponentProps<typeof Card>) {
	return (
		<Card
			className={cn(
				"px-(--card-spacing) pb-[calc(var(--card-spacing)*1.5)] dark:bg-transparent",
				className
			)}
			{...props}
		>
			{children}
		</Card>
	);
}

export function SettingsPanelTitle({
	className,
	...props
}: React.ComponentProps<"h3">) {
	return (
		<h3
			className={cn(
				"font-heading font-medium text-sm [&_svg]:size-4 [&_svg]:shrink-0",
				className
			)}
			{...props}
		/>
	);
}
```

### `registry/blocks/settings/5/settings.tsx`

```tsx
import { DangerZoneSettings } from "@/components/danger-zone-settings";
import { LocalizationSettings } from "@/components/localization-settings";
import { ProfileInformation } from "@/components/profile-information";
import { SecurityInformation } from "@/components/security-information";
import { SettingsHeader } from "@/components/settings-header";

export function Settings() {
	return (
		<div className="flex flex-col gap-8">
			<SettingsHeader />
			<ProfileInformation />
			<SecurityInformation />
			<LocalizationSettings />
			<DangerZoneSettings />
		</div>
	);
}
```