H
UI by hampton.io
Back to Components
Settings

Account Settings Form

Form with avatar upload, display name, email, and timezone fields for account management.

PropsUsage ExampleVariations

Account settings

Update your profile information and preferences.

Profile photo

JPG, PNG, or GIF. Max 2MB.

Dependencies

  • clsx
  • tailwind-merge

Files

  • components/ui/account-settings-form.tsx

Installation

Using shadcn CLI

npx shadcn add account-settings-form --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

Related Settings Components

Language Selector

Dropdown for selecting a language with search filter and flag icons.

Notification Toggle

Grouped notification settings with toggle switches, labels, and descriptions.

Privacy Settings

Card with toggles for various privacy options like profile visibility and data sharing.

Theme Switcher

Toggle group for light, dark, and system theme preferences with inline SVG icons.

Theme Toggle

Dark and light mode toggle with smooth icon transitions.