Catalog Guide Connect

Report a problem or share feedback ← Catalog

Settings form

curatedtheme-awarefree

oc/settings-form

Account settings page (profile, preferences, notifications, danger zone) plus the SettingsSection / SettingsRow primitives to compose your own.

drop-inTrustworthy Minimal

Open live demo Compare with similar

$npx shadcn@latest add @design-infra/settings-form

npm deps: lucide-react

Live demo — under each design system

brutalist-mono

Profile

How you appear to teammates across the workspace.

Avatar

Square image, at least 256×256.

M

Display name

Email

Username

Lowercase letters, numbers and dashes.

acme.com/

Bio

A sentence or two. Shown on your profile.

56/280

Preferences

Language and region used for dates and numbers.

Language

Timezone

Weekly digest

A Monday summary of activity in your projects.

Mentions

Email me when someone @mentions me.

Product updates

Occasional news about new features.

Danger zone

Irreversible actions. Take a breath first.

Delete account

Permanently remove your account and all of its data.

editorial

Profile

How you appear to teammates across the workspace.

Avatar

Square image, at least 256×256.

M

Display name

Email

Username

Lowercase letters, numbers and dashes.

acme.com/

Bio

A sentence or two. Shown on your profile.

56/280

Preferences

Language and region used for dates and numbers.

Language

Timezone

Weekly digest

A Monday summary of activity in your projects.

Mentions

Email me when someone @mentions me.

Product updates

Occasional news about new features.

Danger zone

Irreversible actions. Take a breath first.

Delete account

Permanently remove your account and all of its data.

linear-dark

Profile

How you appear to teammates across the workspace.

Avatar

Square image, at least 256×256.

M

Display name

Email

Username

Lowercase letters, numbers and dashes.

acme.com/

Bio

A sentence or two. Shown on your profile.

56/280

Preferences

Language and region used for dates and numbers.

Language

Timezone

Weekly digest

A Monday summary of activity in your projects.

Mentions

Email me when someone @mentions me.

Product updates

Occasional news about new features.

Danger zone

Irreversible actions. Take a breath first.

Delete account

Permanently remove your account and all of its data.

soft-glass

Profile

How you appear to teammates across the workspace.

Avatar

Square image, at least 256×256.

M

Display name

Email

Username

Lowercase letters, numbers and dashes.

acme.com/

Bio

A sentence or two. Shown on your profile.

56/280

Preferences

Language and region used for dates and numbers.

Language

Timezone

Weekly digest

A Monday summary of activity in your projects.

Mentions

Email me when someone @mentions me.

Product updates

Occasional news about new features.

Danger zone

Irreversible actions. Take a breath first.

Delete account

Permanently remove your account and all of its data.

Source: oc
Kind: block
Categories: form, input
Use as: drop-in — replaces your component
Applies to: form input
Motion: not tagged (static or unknown)
Tags: oc
Live demo: www.owencoonahan.xyz

Similar

Compare all 4 →

File Uploadaceternity/file-uploadDrag-and-drop upload with grid background and micro-interactions.
Gooey Inputaceternity/gooey-inputA search-style input that expands with a gooey SVG filter and shared layout animation
Clerk: Conditional Fieldmotion/clerk-conditional-fieldA password field that animates into a sign-in form only when it's needed. The container animates its measured height with Motion's resize() util while the field fades in.