Social Icons Demo

Demonstration of the social media icon components and avatar component with different sizes, variants, and hover states.

Avatar Component Examples

Examples of the ut-avatar component with different sizes and types.

Icon Avatars (No Verification)

2xl

Initials Avatars (No Verification)

2xl

Photo Avatars (Verified)

2xl

Team Member Card Examples

Examples of the team member card component with different configurations.

Alisa Hester

PM, Hourglass

Ac dignissim nunc quam turpis varius nulla. Id etiam consectetur tellus ac.

Alessandro Morelli

Founder & CEO

Former co-founder of Opendoor. Early staff at Spotify and Clearbit.

Sarah Johnson

Lead Designer

Creative director with 8+ years experience in product design and user experience.

Size Variants

Extra Small (xs)

Small (sm)

Medium (md) - Default

Large (lg)

Extra Large (xl)

Color Variants

Default (follows theme)

White

Interactive Examples

These icons have hover effects and can be clicked. Try hovering over them!

Usage Examples

// Import individual components
import { UtFacebook, UtX, UtLinkedIn, UtGithub } from '@/components/ut/socials'
import { UtAvatar } from '@/components/ut/ut-avatar'

// Basic usage (components are buttons by default)
<UtFacebook href="https://facebook.com" />
<UtX href="https://x.com" size="lg" />
<UtLinkedIn href="https://linkedin.com" variant="white" />
<UtGithub href="https://github.com" size="xl" />

// Avatar usage
<UtAvatar />                                    // Icon avatar
<UtAvatar name="John Doe" />                    // Initials avatar
<UtAvatar src="/path/to/image.jpg" name="John" /> // Photo avatar
<UtAvatar name="John Doe" status="verified" />  // With verification

// The components have built-in hover effects
// Don't add conflicting background or color classes

// Available variants: "default" | "white"
// Available sizes: "xs" | "sm" | "md" | "lg" | "xl" | "2xl"

// Color behavior:
// - default: black-400 (light) / black-600 (dark) → black-500 on hover
// - white: white → black-500 on hover

// All links open in new tabs automatically