# salla-user-settings (https://docs.salla.dev/twilight/react/web-components/salla-user-settings)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

The account settings block for a signed-in customer on the profile page. It has no props; it reads the current user from the store config.
It shows (1) a "hide my name" toggle on reviews, only when the store allows customers to hide their name,
(2) a toggle for receiving promotional messages, and (3) account removal.
Account removal depends on the store's `customer-account-deletion` feature. When enabled, "Delete account" opens a popup with
a confirmation step, then a one-time-code (OTP) step sent by email or mobile (the customer can switch channel or resend the code),
then a success message; while a deletion request is pending, the button changes to withdraw the request.
When the feature is off, a simpler "Deactivate account" popup is used that deactivates the account immediately, with no code.
Toggles save immediately through `salla.profile.updateSettings`. Place it once on the customer profile page.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-user-settings>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaUserSettings } from '@salla.sa/twilight-components-react/user-settings';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaUserSettings } from '@salla.sa/twilight-components-react/user-settings';

export function Example() {
  return (
    <SallaUserSettings />
  );
}
```

```html
<salla-user-settings></salla-user-settings>
```

## Related [#related]

Renders: [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button), [`<salla-list-tile>`](https://docs.salla.dev/twilight/react/web-components/salla-list-tile), [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal).