KR Social Proof: Premium UI Component by KRAFTY UX

KR Social Proof – Powerful, Customizable Social Proof Component

Enhance your credibility with KR Social Proof, a powerful, customizable social proof component for Framer. Designed to showcase customer testimonials, star ratings, and reviews in a visually appealing way, this component is perfect for e-commerce stores, SaaS landing pages, portfolios, and agency websites. Build trust and credibility with your audience effortlessly.

💡 How to use?

1. Drag & Drop -> 2. Customize -> 3. Ship

-----------------------

💡Why KR Social Proof?

Optimized for performance and usability.
Follows Framer's best practices for component design and functionality.
Includes comprehensive documentation and comments for easy understanding and modification by other developers.

Ideal for e-commerce stores, SaaS landing pages, portfolios, and agency websites. Get started quickly with a ready-to-use Framer component. Drag & drop into Framer, customize via the Properties Panel—no code required! Add your customer data and publish.

Experience the ease of use and quality of KR Social Proof, designed to require minimal iterations and provide maximum functionality.

-----------------------

💡Key Features

50+ Customizable Options: Tailor the appearance, animations, and interactivity to fit your design needs.
Responsive Optimized: Ensures flawless performance on all devices.
Accessibility Optimized: Designed with accessibility in mind.
Increases Trust & Conversions: Boosts credibility and reduces cart abandonment.
Uses Framer Native Components: Seamless integration with Framer's native features.
Well Commented Code: Easy to understand and modify for developers.

-----------------------

🎨 Design and Customization

Layout & Structure

Layout: Choose how avatars and text are arranged (horizontal, vertical, or compact).

Content Data

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 Styling

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).

Avatar Styling

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.

Typography

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.

Colors

Background: Background color of the component.
Text Color: Color of the review text.
Rating Color: Color of the rating number text.

Container Styling

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.

Animations

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 States

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).

Number of Reviews Link

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.

-----------------------

🔧 Technical Details

Minimal, high-quality code adhering to best industry practices and standards.
Verbose comments in the code for easy re-usability by other developers.
Error checking and correction mechanisms for robustness.
Logical code organization to avoid overcomplexity and potential future issues.
Utilizes Framer's native features and capabilities for compatibility and ease of use.

-----------------------