Social Proof

Showcase statistics to build trust and credibility

npm create webcore@latest add SocialProof

Use the SocialProof component to showcase milestones or testimonials to build trust and credibility and increase engagement and conversion.

<SocialProof items={[
    { text: '1M+', subText: 'monthly readers' },
    { text: '500+', subText: 'tutorials' },
    { text: '1000+', subText: 'happy customers' }
]} />

The component expects and array of items. Each item must have a text property and an optional subText property that is displayed under the main text. The subText is optional, and also supports the use of HTML tags:

<SocialProof items={[
    { text: '1M+ readers' },
    { text: '•' },
    { text: '500+ tuts' }
]} />

<SocialProof items={[
    {
        text: '1000+',
        subText: 'happy customers. <a href="#">Read our reviews.</a>'
    }
]} />

If you need to increase the spacing between items, you can modify the classes of your component, or use the className prop to pass additional CSS classes with additional styles.

<section class:list={['flex center wrap', className]}>
<section class:list={['flex center wrap xl5', className]}>

API

type SocialProofProps = {
    items: {
        text: string
        subText?: string
    }[]
    className?: string
}