---
title: Profile
description: An account profile screen composed from touchcn components.
---
import Source from './_generated/profile.mdx';

A presentational account screen: a large avatar header with a Pro badge, a
three-up stats row, primary and secondary actions, an About card, grouped
personal-info rows with icons, and a destructive delete row confirmed through a
dialog. All data arrives as props; the screen emits `editProfile`, `share` and
`deleteAccount`.

<DemoFrame component="blocks-profile" height={700} />

## Installation

```bash
npx touchcn add profile
```

This also adds the components the block composes:

`avatar` · `badge` · `button` · `card` · `dialog` · `list` · `navbar` · `page`

## Usage

<CodeGroup>

```html Angular
<tcn-profile-block
  [name]="user().name"
  [handle]="user().handle"
  (editProfile)="editProfile()"
  (share)="share()"
  (deleteAccount)="deleteAccount()"
/>
```

```tsx React
import { TcnProfileBlock } from '@/components/blocks/profile';

<TcnProfileBlock
  name={user.name}
  handle={user.handle}
  onEditProfile={editProfile}
  onShare={share}
  onDeleteAccount={deleteAccount}
/>
```

```vue Vue
<script setup lang="ts">
import { TcnProfileBlock } from '@/components/blocks/profile';
</script>

<template>
  <TcnProfileBlock
    :name="user.name"
    :handle="user.handle"
    @edit-profile="editProfile"
    @share="share"
    @delete-account="deleteAccount"
  />
</template>
```

</CodeGroup>

Pass the profile fields (`name`, `handle`, `avatarSrc`, `bio`, `email`, `phone`,
`location`) and the counters (`posts`, `followers`, `following`) as props.
`deleteAccount` fires only after the user confirms the dialog.

Set `showBack` to render a back control in the navbar's leading slot; it emits
`back` (Angular) / `onBack` (React) when tapped — wire it to your router.

<Source />