12 Blocks

shadcn/ui settings blocks & components.

Settings pages built with shadcn/ui: grouped preference rows, tabbed and section-nav layouts, profile editors with live previews, security pages with session management, notification matrices with cascading channel toggles, and plan-and-billing views with usage meters. The least glamorous screens in an app, already done properly.

Profile And Notification Cards

Settings 1Free

Settings page grouping a Profile card (display name, email, visibility select) and a Notifications card of labeled switches, saving with a toast confirmation.

ButtonCardFieldInputSelectSeparatorSonnerSwitch

Compact Profile Card

Settings 2Free

Compact centered settings card with avatar upload, name and email fields, timezone, density radios, notification checkboxes, a two-factor switch, and delete-account confirmation.

Alert DialogAvatarButtonCardCheckboxFieldInputRadio GroupSelectSeparatorSonnerSwitch

Tabbed Account Billing Team

Settings 3Free

Tabbed settings page splitting Account profile fields, a Billing plan and payment method card, and a Team members table with roles.

AvatarBadgeButtonCardFieldInputSeparatorSonnerSwitchTableTabs

Section Nav Settings Layout

Settings 4Free

Settings layout with a left section nav (Profile, Account, Notifications, Billing) that swaps the active section's form cards beside it.

AvatarButtonFieldInputSeparatorSwitch

Sliding Nav With Completion Meter

Settings 5Pro

Settings shell whose vertical section nav tracks a sliding indicator and blur cross-fades panels, plus a dismissible profile-completion callout with a counting meter.

AvatarButtonFieldInputSelectSeparatorSonnerSwitchToggle Group

Appearance Studio Live Preview

Settings 6Pro

Appearance settings where theme, accent color, and interface density controls re-theme a self-contained mock app preview in real time via scoped CSS variables.

ButtonFieldSeparatorSonnerSwitchToggle Group

Profile Editor With Preview

Settings 7Pro

Profile settings form (name, username, role, bio, location, social links) whose edits update a public-profile preview card beside it in real time.

AvatarButtonFieldInputInput GroupSeparatorSonnerTextarea

Security And Active Sessions

Settings 8Pro

Security settings with a session policy card, login methods including SAML SSO, an active-sessions list whose rows animate out on revoke, and a counting security score.

ButtonCardFieldSelectSonnerSwitch

Cover Photo Profile Editor

Settings 9Pro

Profile settings with a grayscale cover photo, overlapping avatar, a drag-and-drop photo upload zone with hover and drop states, an About field, and regional preferences.

AvatarButtonFieldInputSelectSonnerTextarea

Dense Rows With Save Bar

Settings 10Pro

General settings sheet of hairline two-column rows (project name, API endpoint, allowed origins, region, date format) with a sticky unsaved-changes bar counting edits.

ButtonInputInput GroupSelectSonnerSwitchToggle Group

Notification Channel Matrix

Settings 11Pro

Notification settings matrix of events by Email, Push, and SMS switches, with per-column master toggles that cascade a whole channel, plus a quiet-hours range.

ButtonSelectSeparatorSonnerSwitch

Plan Usage And Invoices

Settings 12Pro

Billing settings with a current-plan card, seat, storage, and API usage meters that fill with counting values, a payment method row, and an invoice history table.

ButtonSonnerTable