nuxt-x-marketing

SocialProof

Social proof components — testimonial carousels and grids, trust badge presets, and a live activity toast notification.

SocialProof

Social proof components help build trust at critical conversion points. XMarkSocialProofTestimonials showcases customer quotes with photos and star ratings. XMarkSocialProofBadge surfaces concise trust signals near pricing and CTA sections. XMarkSocialProofToast creates live-activity FOMO by cycling through recent user actions as floating toasts.

Components

`<XMarkSocialProofTestimonials />`

Three layout modes are available: featured (single large quote with previous/next arrows), grid (card masonry), and carousel (horizontally scrolling strip). All modes support star ratings.

<XMarkSocialProofTestimonials
  layout="grid"
  :has-stars="true"
  :testimonials="[
    {
      name: 'Sarah K.',
      title: 'CTO',
      company: 'Acme Corp',
      quote: 'This tool cut our deployment time in half. Absolutely indispensable.',
      rating: 5,
      avatar: '/avatars/sarah.jpg',
    },
    {
      name: 'James T.',
      title: 'Lead Developer',
      company: 'StartupXYZ',
      quote: 'The DX is miles ahead of anything else we tried.',
      rating: 5,
    },
  ]"
/>

Featured carousel with auto-advance:

<XMarkSocialProofTestimonials
  layout="featured"
  :auto-play="true"
  :auto-play-interval="5000"
  :testimonials="testimonials"
/>

Props

Prop	Type	Default	Description
`testimonials`	`Array`	`[]`	Testimonial objects `[{ name, title?, company?, quote, rating?, avatar? }]`
`layout`	`String`	`'featured'`	Display mode: `'featured'`, `'grid'`, `'carousel'`
`hasStars`	`Boolean`	`true`	Show star rating icons
`autoPlay`	`Boolean`	`false`	Auto-advance featured/carousel layout
`autoPlayInterval`	`Number`	`5000`	Milliseconds between auto-advances

`<XMarkSocialProofBadge />`

A compact inline trust signal. Use preset for one of eight built-in badges, or provide a custom icon and label. Designed to be used in groups near pricing cards, CTA buttons, or form fields.

<!-- Using presets -->
<div class="flex gap-4">
  <XMarkSocialProofBadge preset="no-credit-card" />
  <XMarkSocialProofBadge preset="cancel-anytime" />
  <XMarkSocialProofBadge preset="secure" />
</div>

<!-- Custom badge -->
<XMarkSocialProofBadge
  icon="i-lucide-award"
  label="G2 Leader 2025"
  variant="subtle"
/>

Props

Prop	Type	Default	Description
`preset`	`String`	`''`	Built-in preset: `'no-credit-card'`, `'cancel-anytime'`, `'free-trial'`, `'secure'`, `'support'`, `'setup'`, `'gdpr'`, `'money-back'`
`icon`	`String`	`''`	Custom Lucide icon name (when not using a preset)
`label`	`String`	`''`	Custom label text (when not using a preset)
`variant`	`String`	`'default'`	Style variant: `'default'`, `'subtle'`, `'outline'`, `'text'`, `'text-muted'`

`<XMarkSocialProofToast />`

A fixed-position floating notification that cycles through a list of recent activity items (signups, upgrades, trials). Each notification shows for displayDuration ms before fading out, then the next one appears after interval ms. The first notification is delayed by initialDelay ms to avoid competing with page load animations.

<XMarkSocialProofToast
  :notifications="[
    { name: 'Alex M.', action: 'just signed up', time: '2 minutes ago' },
    { name: 'Sarah K.', action: 'upgraded to Pro', time: '5 minutes ago', avatar: '/avatars/sarah.jpg' },
    { name: 'James T.', action: 'started a free trial', time: '8 minutes ago' },
  ]"
  placement="bottomLeft"
  type="success"
  :interval="4000"
  :initial-delay="5000"
  :display-duration="3000"
  :show-icon="true"
/>

Props

Prop	Type	Default	Description
`notifications`	`Array`	3 example notifications	Notification objects `[{ name, action, time, avatar? }]`
`interval`	`Number`	`4000`	Milliseconds between notifications
`initialDelay`	`Number`	`5000`	Delay before first notification appears (ms)
`displayDuration`	`Number`	`3000`	How long each notification is visible (ms)
`placement`	`String`	`'topRight'`	Screen corner: `'topLeft'`, `'topRight'`, `'bottomLeft'`, `'bottomRight'`
`type`	`String`	`'success'`	Icon theme: `'success'`, `'error'`, `'warning'`, `'info'`
`showIcon`	`Boolean`	`true`	Show status icon in the toast

AI Context

category: SocialProof
package: "@xenterprises/nuxt-x-marketing"
components:
  - XMarkSocialProofTestimonials
  - XMarkSocialProofBadge
  - XMarkSocialProofToast
use-when: >
  Building trust and reducing conversion friction. Use Testimonials near
  pricing or after the features section, Badges directly adjacent to CTA
  buttons and pricing cards, and Toast to add live-activity urgency.
typical-page-section: >
  Testimonials: between features and pricing. Badges: near pricing and CTA.
  Toast: persistent overlay, visible site-wide on key pages.

Edit this pageorReport an issue

Blog

A complete blog component suite — post cards, filterable list grid, full-article detail layout, author bio, post navigation, sidebar, and in-blog newsletter CTA.

Newsletter

Newsletter signup components — a multi-variant form widget and a full-width page section, both with success state, privacy note, and submission events.