Production-grade chat bubbles, social posts, user cards, and interactive community feeds. Re-architected with composable compound primitives (inspired by Radix UI & Shadcn) with both named and dot-notation exports.
npx nexoreui add social
Interactive Live Playground
Select a flagship component tab and customize live properties with dynamic code generation.
A
Alice10:42 AM
Hey! The new compound architecture in NexoreUI looks incredible.
Chat Props
component.tsx
1
ChatMessage API Reference
Compound components can be imported individually (e.g. ChatMessageAvatar) or accessed via dot-notation (ChatMessage.Avatar).
API Reference (Props)
Prop
Type
Default
Description
variant
"sent" | "received"
"received"
Sets the visual layout, alignment, and accent styling of the chat bubble.
isOwn
boolean
false
Convenience shortcut equivalent to variant='sent'.
ChatMessageAvatar
Component
-
Displays user profile picture with optional fallback initials and isOnline indicator dot.
ChatMessageBody
Component
-
Flex container wrapping the header, text content bubble, and status indicators.
ChatMessageContent
Component
-
The themed bubble element displaying the message text with responsive rounded corners.
ChatMessageStatus
status: "sent" | "delivered" | "read"
"read"
Renders animated checkmark delivery state indicators.
UserProfileCard API Reference
Composable building blocks for profile headers, stat meters, and following states.
API Reference (Props)
Prop
Type
Default
Description
UserProfileCover
gradient?: string, imageSrc?: string
violet gradient
Header banner element supporting CSS gradient classes or custom banner images.
UserProfileAvatar
src?: string, fallback?: string
-
Prominent avatar overlapping the cover banner with thick card border ring.
UserProfileInfo
Component
-
Container for author name, username handle, and verification badges.
UserProfileStats
Component
-
Metrics row displaying followers, following, and projects count.
UserProfileFollowButton
following?: boolean, onClick?: () => void
false
Interactive button with animated state transitions for follow / unfollow actions.
Usage Examples & Compound Patterns
Explore real-world social feed, messaging, and presence implementations.
Page 1 of 3
1. Two-Way Interactive Chat Dialogue with Input
A
Alice10:42 AM
Hey! Did you see the new compound architecture in NexoreUI?
Y
You10:43 AM
Yes! It feels exactly like Radix and Shadcn. Super flexible!
component.tsx
1
2. Creator Profile Card with Compound Structure
J
Jane Doe
@janedoe
Full-stack developer & open-source enthusiast. Building polished React design systems.
Social & Community Suite
Production-grade chat bubbles, social posts, user cards, and interactive community feeds. Re-architected with composable compound primitives (inspired by Radix UI & Shadcn) with both named and dot-notation exports.
Interactive Live Playground
Select a flagship component tab and customize live properties with dynamic code generation.
Chat Props
ChatMessage API Reference
Compound components can be imported individually (e.g. ChatMessageAvatar) or accessed via dot-notation (ChatMessage.Avatar).
API Reference (Props)
"received"false---"read"UserProfileCard API Reference
Composable building blocks for profile headers, stat meters, and following states.
API Reference (Props)
violet gradient---falseUsage Examples & Compound Patterns
Explore real-world social feed, messaging, and presence implementations.
1. Two-Way Interactive Chat Dialogue with Input
2. Creator Profile Card with Compound Structure
Jane Doe
@janedoe
Full-stack developer & open-source enthusiast. Building polished React design systems.
1.2K
Followers
340
Following
48
Repos