BricksLab Catalog

@brickslab/ui-web

Data-driven social media post card component. Supports X, LinkedIn, and custom platforms with optional media, metrics, and glassmorphism variant. Perfect for testimonials, posts, and social feeds.

Aperçu

X/Twitter Style

Alex Rivera@alexrivera

Mar 5, 2024

𝕏

Just shipped a new design system component library! It's been months in the making and I'm really proud of what we've built. 🚀

789 replies456 reposts1234 likes

LinkedIn Style with Custom Platform

Sofia Martinez@sofiamartinez

Mar 4, 2024

Thrilled to share that our team just completed Phase 2 of our component library refactoring. The improvements in performance and DX are significant!

234 replies89 reposts567 likes

Glassmorphism Variant

Creative Dev

Mar 6, 2026

◆

The glassmorphism effect looks stunning over colorful backgrounds. Perfect for hero sections!

123 replies67 reposts345 likes

Compact (No Metrics)

Minimal UI@minimalui

◆

Simple post without engagement metrics. Great for portfolios and testimonials.

Props Table

Prop	Type	Défaut	Requis	Description
`author`	`object: { name, handle?, avatarUrl?, url? }`	—	✓	Author information including name, optional handle, avatar, and profile URL.
`content`	`string`	—	✓	Post content/text.
`platform`	`"x" \| "linkedin" \| "custom"`	`"custom"`	—	Social platform indicator. Determines icon display.
`date`	`string \| Date`	—	—	Post date (auto-formatted if Date object).
`media`	`array: { type, src, alt? }[]`	—	—	Array of images or videos attached to post.
`metrics`	`object: { likes?, reposts?, replies? }`	—	—	Engagement metrics displayed at bottom.
`href`	`string`	—	—	Link to original post. Renders as anchor if provided.
`variant`	`"glass" \| "solid"`	`"solid"`	—	Styling variant: glassmorphism or solid background.

Usage

tsx

import { SocialPostCard } from "@brickslab/ui-web";

// X/Twitter style post
<SocialPostCard
  platform="x"
  author={{ name: "John Doe", handle: "johndoe" }}
  content="Building amazing products with React!"
  date={new Date()}
  metrics={{ likes: 234, reposts: 45, replies: 12 }}
  href="https://twitter.com/..."
/>

// LinkedIn style
<SocialPostCard
  platform="linkedin"
  author={{ name: "Jane Smith", avatarUrl: "/avatar.jpg" }}
  content="Excited to announce..."
  variant="solid"
/>

// With media
<SocialPostCard
  author={{ name: "Designer" }}
  content="Check out the new design:"
  media={[{ type: "image", src: "/design.jpg", alt: "Design" }]}
  variant="glass"
/>