// title: Settings navigation with vertical underline tabs and profile form import { BellIcon, GlobeIcon, LockIcon, UserIcon } from "lucide-react"; import { Separator } from "@/registry/default/ui/separator"; import { Tabs, TabsList, TabsPanel, TabsTab } from "@/registry/default/ui/tabs"; export function Pattern() { return (

Profile Security Notifications Integrations

Profile Settings

Manage your public profile and personal details.

First name

Olivia

Last name

Martin

olivia@example.com

Bio

Software engineer & open source contributor.

Security

Manage your password and two-factor authentication.

Current password

••••••••

Two-factor auth

Authenticator app Enabled

Notification Preferences

Choose how and when you receive notifications.

{[ "New comments on my posts", "Mentions and replies", "Weekly digest email", "Security alerts", ].map((item) => (

{item}

))}

Integrations

Connect third-party tools and services to your account.

{[ { connected: true, name: "GitHub" }, { connected: true, name: "Slack" }, { connected: false, name: "Jira" }, { connected: false, name: "Figma" }, ].map((i) => (

{i.name} {i.connected ? "Connected" : "Not connected"}

))}

); }