Social Proof Components
Show testimonials, user counts, purchase activity, and reviews.
Social Proof Components
Social proof components show what other people think of your app and how many of them are using it. Place them ahead of a paywall, a signup step, or a permission request, where a user is deciding whether to commit.
These components make claims about real people and real purchases. Use genuine testimonials you have permission to quote, real names and avatars, and numbers you can back with your own data. Never invent social proof: fabricated reviews, made-up user counts, and fake purchase activity mislead users and put your App Store and Play Store listings at risk.
Testimonial
A single quote with an author, an optional avatar, and an optional star rating. Use it when one strong customer voice carries more weight than a wall of reviews.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Quote | textarea | sample quote | The testimonial text. |
| Author Name | text | Jane Doe | Who said it. |
| Author Title | text | CEO, Acme Inc. | Role or company shown under the name. |
| Author Avatar | image | -- | Photo of the author. |
| Show Avatar | boolean | true | Whether the avatar is displayed. |
| Show Rating | boolean | true | Whether the star rating is displayed. |
| Rating | number | 5 | Number of stars shown when Show Rating is on. |
| Variant | select | card | card, minimal, or bubble. |
| Background Color | color | #FFFFFF | Fill behind the quote. |
| Quote Color | color | #1F2937 | Quote text color. |
| Author Color | color | #6B7280 | Color of the author name and title. |
| Border Radius | number | 12 | Corner rounding. |
| Shadow | shadow | soft drop | Offset, blur, spread, and color. |
| Padding | spacing | 24 | Inner spacing on all sides. |
| Margin | spacing | 0 | External spacing. |
| Animation | animation | none | Entrance animation preset, duration, delay, easing, and trigger. |
Use cases
- Back a paywall with a quote from a paying customer
- Reassure users before a signup or permission step
- Close an onboarding flow with a result someone actually achieved
- Pair with a
bubblevariant inside a chat-style or conversational screen
User Avatars
An overlapping row of profile pictures with a running count. It communicates scale in a single glance without a paragraph of copy.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Avatar Images | array | -- | The avatar images to display, in order. |
| Max Display | number | 5 | How many avatars are shown before the row is truncated. |
| Show Count | boolean | true | Whether the count text is displayed next to the avatars. |
| Total Count | number | 1234 | The number shown in the count text. |
| Count Label | text | users | Word after the number, for example "members" or "subscribers". |
| Size | select | medium | small, medium, or large. |
| Overlap | number | 8 | How many pixels each avatar overlaps the one before it. |
| Border Color | color | #FFFFFF | Ring drawn around each avatar to separate it from its neighbor. |
| Count Text Color | color | #1F2937 | Color of the count text. |
| Margin | spacing | 0 | External spacing. |
| Animation | animation | none | Entrance animation preset, duration, delay, easing, and trigger. |
Use cases
- Show community size on a welcome or signup screen
- Sit above a primary CTA as a quiet trust signal
- Represent a specific cohort, using Count Label to name it
Purchase Count
A compact badge showing how many people bought or subscribed, with an optional icon and an optional count-up animation. Use it to add urgency where a user is deciding.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Count | number | 847 | The number displayed. |
| Label | text | people purchased this today | Text shown after the count. |
| Show Icon | boolean | true | Whether the leading icon is displayed. |
| Icon | select | flame | flame, cart, users, trending, star, or heart. |
| Animate Count | boolean | true | Counts up to the value instead of appearing at it. |
| Background Color | color | #FEF3C7 | Badge fill. |
| Text Color | color | #92400E | Color of the label text. |
| Count Color | color | #B45309 | Color of the number. |
| Count Font Weight | fontWeight | 700 | Weight of the number. |
| Border Radius | number | 8 | Corner rounding. |
| Padding | spacing | 12 / 16 | Inner spacing. |
| Margin | spacing | 0 | External spacing. |
| Animation | animation | none | Entrance animation preset, duration, delay, easing, trigger. |
Use cases
- Sit directly above a paywall CTA
- Highlight a specific plan on a pricing screen
- Show demand for a limited offer, when the number is real and current
Review Carousel
A rotating set of reviews in a single fixed-height block. Use it when several short reviews together are more convincing than one long quote.
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| Reviews | array | -- | The reviews to cycle through. |
| Auto Play | boolean | true | Advance to the next review automatically. |
| Interval (ms) | number | 5000 | How long each review stays on screen when Auto Play is on. |
| Show Dots | boolean | true | Display page dots under the carousel. |
| Show Arrows | boolean | false | Display previous and next arrows. |
| Background Color | color | #F9FAFB | Carousel fill. |
| Text Color | color | #1F2937 | Review text color. |
| Dot Color | color | #9CA3AF | Color of inactive dots. |
| Active Dot Color | color | #3B82F6 | Color of the dot for the review currently shown. |
| Border Radius | number | 12 | Corner rounding. |
| Padding | spacing | 24 | Inner spacing on all sides. |
| Margin | spacing | 0 | External spacing. |
| Animation | animation | none | Entrance animation preset, duration, delay, easing, and trigger. |
Use cases
- Show a range of reviews on a paywall without a long scroll
- Cover several use cases at once, one review per audience
- Keep a fixed layout height where a variable-length quote would shift the CTA
With Auto Play on, a user may only ever see the first review. Lead with your strongest one, and turn on Show Arrows if you want users to browse the rest deliberately.