File Upload vs similar

2 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 systemdark only

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
BHalo Inputcult-uilive (upstream)
state — subtledrop-inPlayfulRefinedWarm
motion · medium cost · respects reduced motion
Input with animated focus halo + validation states. Tokens for border/text, Vercel-style rainbow hex for the glow — retint for your brand. @base-ui/react + motion.
$npx shadcn@latest add @cult-ui/halo-input
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 — File Upload vs similar:
(no picks yet)

Compare: https://www.owencoonahan.xyz/design-infra/compare?ids=oc/settings-form,cult-ui/halo-input&theme=linear-dark&label=File+Upload+vs+similar