# User Profile

## Example

```svelte
<script lang="ts">
	import { UserProfile } from '@foxui/all';
</script>

<UserProfile
	class="not-prose"
	profile={{
		handle: '@flo-bit',
		displayName: 'Florian',
		avatar: 'https://github.com/flo-bit.png',
		banner: 'https://cdn.bsky.app/img/banner/plain/did:plc:257wekqxg4hyapkq6k47igmp/bafkreidekzsdfuwjphnfbyobzfniy4mijpfwshtagdqp2jibea7ojwoc2e@jpeg'
	}}
/>
```

## Documentation

## Usage

```svelte
<UserProfile
	profile={{
		handle: '@flo-bit',
		displayName: 'Florian',
		avatar: 'https://github.com/flo-bit.png',
		banner: 'https://cdn.bsky.app/img/banner/plain/did:plc:257wekqxg4hyapkq6k47igmp/bafkreidekzsdfuwjphnfbyobzfniy4mijpfwshtagdqp2jibea7ojwoc2e@jpeg'
	}}
/>
```

## API Reference

### UserProfile
A user profile card with banner, avatar, display name, handle, and bio.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| profile | `{ banner?: string; avatar?: string; displayName?: string; handle?: string; description?: string }` | `-` | The user profile data to display. (required) |
| class | `string` | `-` | Additional CSS classes to apply. (required) |