Settings form vs similar

3 options side by side. Our @design-infra pieces render live under the design system you choose; upstream pieces show their live demo where the host allows embedding, otherwise a screenshot with a link to the real thing. Pick or pass, then copy the feedback for your agent.

Design system

ASettings formoclive
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.
Head of Product at Acme. Previously design at Northwind.
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.
drop-inTrustworthyMinimal
Account settings page (profile, preferences, notifications, danger zone) plus the SettingsSection / SettingsRow primitives to compose your own.
$npx shadcn@latest add @design-infra/settings-form
Gallery page Open live demo
BFile Uploadaceternitylive (upstream)
drag · hover · state — subtledrop-inRefinedTrustworthyPremium
motion · medium cost · ignores reduced motion
Drag-and-drop upload with grid background and micro-interactions.
$npx shadcn@latest add @aceternity/file-upload
Gallery page Open live demo
CClerk: Conditional Fieldmotionimage
enter — mediumrecipeRefinedTrustworthyPlayful
motion · medium cost
A 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.
$pnpm add motion # then adapt the free source from https://motion.dev/examples/react-clerk-conditional-field
Gallery page Open live demo

Feedback for your agent

Pick or pass on each option (add a reason if you like), then paste this back into your agent's chat.

From design-infra compare — Settings form vs similar:
(no picks yet)

Compare: https://www.owencoonahan.xyz/design-infra/compare?ids=oc/settings-form,aceternity/file-upload,motion/clerk-conditional-field&theme=editorial&label=Settings+form+vs+similar