KR Social Proof
Instantly add customer avatars, star ratings, and reviews to your Framer site—no code needed.
Made with Workshop
Build your own component with AI
Instantly add customer avatars, star ratings, and reviews to your Framer site—no code needed.
Made with Workshop
Build your own component with AI
KR Social Proof is a powerful, customizable social proof component for Framer, designed to showcase customer testimonials, star ratings, and reviews in a visually appealing way.
Whether you're building an e-commerce store, SaaS landing page, portfolio, or agency website, this component helps build trust and credibility with your audience.
✅ 50+ customizable options
✅ Responsive optimized
✅ Accessibility optimized
✅ Increases trust & conversions
✅ Reduces cart abandonment
✅ Builds credibility with user testimonials
✅ Uses Framer native components
✅ Well commented code
This component is highly customizable, allowing you to tailor the appearance, animations, and interactivity of customer testimonials to fit your design needs.
Layout: Choose how avatars and text are arranged (horizontal, vertical, or compact).
Customers: Add customer data (name and avatar images).
Rating Score: Set the star rating value (0–5).
Number of Reviews: Total count of reviews to display (0–1,000,000).
Review Text: Custom text displayed below the rating.
Star Color: Color of the rating stars.
Star Size: Size of individual star icons (8–32px).
Star Spacing: Space between stars (0–10px).
Rating Min Width: Minimum width for the rating number display (50–200px).
Max Avatars: Maximum number of avatars to show (1–20).
Min Avatars: Minimum avatars to display (fills with defaults if needed).
Avatar Size: Width and height of avatars (20–80px).
Avatar Overlap: Negative values create an overlapping effect (-20–20px).
Avatar Roundness: How rounded the avatar corners are (0–50%, where 50% = circle).
Avatar Border Width: Thickness of the border around avatars (0–10px).
Avatar Border Color: Color of the avatar border.
Avatar Shadow: Drop shadow effect for avatars.
Text Font: Font styling for the review text.
Rating Font: Font styling for the rating number.
Reviews Count Font: Font styling for the number of reviews.
Background: Background color of the component.
Text Color: Color of the review text.
Rating Color: Color of the rating number text.
Padding: Internal spacing around the component (0–50px).
Corner Radius: Roundness of the component corners (0–50px).
Border Style: Style of the component border (none, solid, dashed, dotted).
Border Width: Thickness of the component border (0–10px, hidden if border is none).
Border Color: Color of the component border (hidden if border is none).
Drop Shadow: Shadow effect for the entire component.
Container Animation: Animation when the component first appears (none, fade, slide, scale, bounce).
Animation Duration: How long animations take to complete (0.1–3s, hidden if animation is none).
Animation Delay: Delay before animations start (0–2s, hidden if animation is none).
Avatar Animation: Animation style for avatars (none, fade, slide, scale, bounce).
Stagger Avatars: Animate avatars one after another (hidden if avatar animation is none).
Stagger Timing: Time delay between each avatar animation (0–1s, hidden if stagger is off or avatar animation is none).
Rating Animation: Animation style for the rating section.
Text Animation: Animation style for the text content.
Loading Style: Type of loading indicator (skeleton or spinner).
Skeleton Color: Color of skeleton loading placeholders (hidden if loader is spinner).
Spinner Color: Color of the loading spinner (hidden if loader is skeleton).
Spinner Size: Size of the loading spinner (16–48px, hidden if loader is skeleton).
Enable Reviews Link: Make the review count clickable with a custom URL.
Reviews Link URL: URL to navigate to when the review count is clicked (hidden if link is disabled).
Link Color: Color of the review count link text (hidden if link is disabled).
Link Hover Color: Color when hovering over the review count link (hidden if link is disabled).
Show Underline: Display underline on the review count link (hidden if link is disabled).
Link Target: Where to open the review link (New Tab or Same Tab, hidden if link is disabled).
Review Icon Size: Size of the speech bubble icon (12–256px).
Review Icon Color: Color of the speech bubble icon.
Reviews Padding: Padding around the review count section.
