Settings

Account Settings

A self-contained user profile settings card with avatar display, display name, email, and bio fields. Handles async save state internally.

Account settings

JPG, PNG or GIF. Max 2 MB.

import { AccountSettings } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add account-settings

Import

import.tsx

import { AccountSettings } from "@aetherstack/blocks"

Usage

account-settings.tsx

import { AccountSettings } from "@aetherstack/blocks"

export default function SettingsPage() {
  return (
    <AccountSettings
      defaultValues={{
        name: "Alice Martin",
        email: "alice@example.com",
        bio: "Product designer & developer.",
      }}
      onSave={async (data) => {
        await fetch("/api/account", {
          method: "PATCH",
          body: JSON.stringify(data),
        })
      }}
    />
  )
}

Props

Prop	Type	Default	Description
defaultValues	AccountSettingsData	—	Initial form values: name, email, bio, avatarUrl.
onSave	(data: AccountSettingsData) => void \| Promise<void>	—	Called with the form data on submit. May be async — the button shows a saving state while pending.
className	string	—	Additional classes on the wrapper card.

* Required

Accessibility

→All inputs are associated with their labels via htmlFor/id pairs.
→The submit button is disabled while saving to prevent double-submission.
→Avatar upload button is marked disabled in demo mode to avoid misleading interaction.