---
title: "User Profile Popout"
description: "Floating profile card with a banner, overlapping avatar, bio section and role tags."
---

Floating profile card with a banner, overlapping avatar, bio section and role tags. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of User Profile Popout — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add user-profile
``` Registry dependencies, installed with it: avatar, status-indicator, role-tag, button.

Files written — React: components/ui/user-profile.tsx. Vue: components/ui/user-profile/UserProfile.vue, components/ui/user-profile/UserProfileBanner.vue, components/ui/user-profile/UserProfileHead.vue, components/ui/user-profile/UserProfileActions.vue, components/ui/user-profile/UserProfileAvatar.vue, components/ui/user-profile/UserProfileName.vue, components/ui/user-profile/UserProfileHandle.vue, components/ui/user-profile/UserProfileDivider.vue, components/ui/user-profile/UserProfileBody.vue, components/ui/user-profile/UserProfileSectionLabel.vue, components/ui/user-profile/UserProfileBio.vue, components/ui/user-profile/UserProfileRoles.vue, components/ui/user-profile/index.ts.

## Usage

React:

```tsx
import { UserProfile } from "@/components/ui/user-profile"
```

Vue:

```ts
import { UserProfile, UserProfileBanner, UserProfileHead, UserProfileActions, UserProfileAvatar, UserProfileName, UserProfileHandle, UserProfileDivider, UserProfileBody, UserProfileSectionLabel, UserProfileBio, UserProfileRoles } from "@/components/ui/user-profile"
```

## API reference

**`UserProfile`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `children / default slot` | `React.ReactNode / Vue slot` | — | Content rendered inside the component. |
| `className / class` | `string` | — | Additional classes merged with the component defaults. |

The registry exports `UserProfile`, `UserProfileBanner`, `UserProfileHead`, `UserProfileActions`, `UserProfileAvatar`, `UserProfileName`, `UserProfileHandle`, `UserProfileDivider`, `UserProfileBody`, `UserProfileSectionLabel`, `UserProfileBio`, `UserProfileRoles`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Preserve the native semantics of the rendered elements and pass through ARIA attributes when the surrounding context needs a label or description. Any interactive child needs a visible focus indicator, and meaning must not rely on colour alone.

## Tokens

User Profile Popout reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.