Skip to content

Persona

DisplayMIT
View in Storybook

User identity card combining avatar, name, role, and status.

bun add @otfdashkit/ui

Preview

Persona
Loading Storybook preview…

Code

import { 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.

PropTypeDefaultDescription
namerequiredstring
badgeReactNode
classNamestring
size'sm' | 'md' | 'lg''md'
srcstring
subtitlestring