Persona
DisplayMITUser identity card combining avatar, name, role, and status.
bun add @otfdashkit/ui
Preview
PersonaDisplay
Loading Storybook preview…
Code
@otfdashkit/uiimport { Persona } from '@otfdashkit/ui'
export function Example() {
return (
<div className="space-y-4">
<Persona name="Alice Johnson" subtitle="alice@example.com" size="sm" />
<Persona name="Bob Smith" subtitle="Engineering Lead" size="md" />
<Persona name="Carol White" subtitle="carol@company.com" size="lg" src="https://github.com/shadcn.png" />
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Props
Props declared in the Persona source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| namerequired | string | ||
| badge | ReactNode | ||
| className | string | ||
| size | 'sm' | 'md' | 'lg' | 'md' | |
| src | string | ||
| subtitle | string |