User with Rating

Display user avatars with roles and rating

Use the User component to display users with optional roles and ratings to help visitors visualize feedback about your users. The User component combines the Avatar and Rating components:

Preview

Marcus Top rated seller

---

★★★★★ 4.8 out of 5

<User
    avatar="avatar.png"
    name="Marcus"
    role="Top rated seller"
    roleTooltip="In Art & Collectibles"
    rating={4.8}
    showText={true}
/>

The User component can have optional roles and ratings. The rating can be specified using the rating prop, and can be configured using the props of the Rating component.

Rating Configurations

User with custom rating text

George Astro dev

---

★★★★ ★ 4.2/5

User with no rating

Emily React dev

<User
    avatar="avatar.png"
    name="George"
    role="Astro dev"
    rating={4.2}
    showText={true}
    text="{0}/{1}"
/>

<User
    avatar="avatar.png"
    name="Emily"
    role="React dev"
/>

You can use the {0} and {1} placeholders for the current and total scores to create custom score texts, or to translate your components. To remove ratings, simply omit the rating prop. To learn more about how to customize ratings, consult the documentation of the Rating component.

API

type UserProps = {
    avatar: string
    avatarSize?: number
    name: string
    role?: string
    roleTooltip?: string | null
    rating?: number
} & Omit<RatingProps, 'score'>