Persona

A composite component built on top of the Profile primitives, combining an avatar, name, and title into a unified person representation.

Justice Chimobi

Frontend Engineer, Creator Fidely UI

import { Persona } from '@fidely-ui/react/persona'

export const PersonaBasics = () => {
  return (
    <Persona
      name="Justice Chimobi"
      title="Frontend Engineer, Creator Fidely  UI"
      img={'/justice-chimobi.jpeg'}
      size="xl"
    />
  )
}

Usage

import { Persona } from '@fidely-ui/react'

<Persona
  name="Justice Chimobi"
  title="Frontend Engineer"
  img="justice-chimobi.png"
  size="md"
/>

Overview

The Persona component is a high-level UI abstraction built on top of the Profile components:

Profile.Root
Profile.AvatarWrapper
Profile.Name
Profile.Title
Profile.Details

It provides a convenient way to display a person's identity, combining an avatar, name, and title into a single, flexible component.

Persona Structure

Avatar: Renders the user’s image or an automatically generated fallback based on their name.

Name: The primary text label, typically the user’s full name.

Title: A supporting text label, such as a role, position, or short description.

The size prop synchronizes the Avatar and typography scale for consistent visual hierarchy.

Full Control

If you need more granular control such as adding extra elements, rearranging the layout, injecting custom styles, or extending the anatomy use the Profile component directly.

import { Profile, Avatar, Text } from '@fidely-ui/react'

<Profile.Root gap="3" orientation="vertical">
  <Profile.AvatarWrapper>
    <Avatar.Root size="lg">
      <Avatar.Fallback name="Justice Chimobi" />
      <Avatar.Image src="justice-chimobi.png" />
    </Avatar.Root>
  </Profile.AvatarWrapper>

  <Profile.Details>
    <Profile.Name fontSize="lg">Justice Chimobi</Profile.Name>
    <Profile.Title fontSize="sm" color="fg.muted">
      Frontend Engineer
    </Profile.Title>
    <Text fontSize="xs">Creator, Fidely UI</Text>
  </Profile.Details>
</Profile.Root>

Examples

Horizontal Layout

Use the default layout to display the avatar beside the text.

Leanne Graham

harness real-time e-markets

import { Persona } from '@fidely-ui/react/persona'

export const PersonaHorizontal = () => {
  return (
    <Persona
      name="Leanne Graham"
      title="harness real-time e-markets"
      img={'http://bit.ly/47jPX1D'}
      size="xl"
    />
  )
}

Vertical Layout

Use the orientation="vertical" prop to stack the avatar above the text.

Ervin Howell

synergize scalable supply-chains

import { Persona } from '@fidely-ui/react/persona'

export const PersonaVertical = () => {
  return (
    <Persona
      name="Ervin Howell"
      title="synergize scalable supply-chains"
      img={'http://bit.ly/43kBcJt'}
      size="xl"
      orientation="vertical"
    />
  )
}

Custom Sizes

Adjust the avatar, name and title size using the size prop.

Kurtis Weissna

generate enterprise e-tailers

import { Persona, Tabs } from '@fidely-ui/react'

export const PersonaSizes = () => {
  const sizes = ['xs', 'sm', 'md', 'lg', 'xl'] as const

  return (
    <Tabs.Root defaultValue="md" variant="outline">
      <Tabs.List>
        {sizes.map((size) => (
          <Tabs.Trigger
            key={size}
            value={size}
            _selected={{ color: 'orange.9' }}
          >
            {size}
          </Tabs.Trigger>
        ))}
      </Tabs.List>

      {sizes.map((size) => (
        <Tabs.Content key={size} value={size}>
          <Persona
            name="Kurtis Weissna"
            title="generate enterprise e-tailers"
            img="http://bit.ly/47jPX1D"
            size={size}
          />
        </Tabs.Content>
      ))}
    </Tabs.Root>
  )
}

Props

Prop	Type	Default	Description
`name`	`string`	—	The main text displayed as the person’s name.
`title`	`string`	—	Secondary text that represents the person’s role or description.
`img`	`string`	—	The source URL or path of the person’s avatar image.
`size`	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "2xl"`	`"md"`	Controls the size of the avatar image.
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	Defines the layout direction of the Persona component.