Dev Design LibrarySocial Components
Dev Design Library indexes 144 social components from 45 open-source UI libraries, with the most coming from ReUI, Cult UI, Notra, OpenSourceUI and Lobe UI. Each one links to its page with the source code, a live preview where available, the library license and the install command.
Showing 120 of 144, a mix from every library. Open a library to see all of its components.
Bubbleshadcn/ui · ReactDisplays conversational content in a message bubble. Supports variants, alignment, grouping, reactions, and…
Client Tweet CardMagic UI · ReactA client-side version of the tweet card that displays a tweet with the author's name, handle, and profile picture.
Ai User MessageReact Spectrum · React
Chatcoss ui · ReactComposable chat components with messages, reactions, replies, and delivery states.
Choice PollCult UI · ReactPoll component with single or multiple selection, optional results, and keyboard navigation
Support thread with sender alignmentReUI · ReactA two sided billing thread where align and variant carry the sender.
Typing IndicatorAmicro Micro Transitions · ReactTyping Indicator loading animation.
MessageAI Elements · ReactA comprehensive suite of components for displaying chat messages, including message rendering, branching, actions, and…
Chat Chat ItemLobe UI · React
AI HandoffKokonut UI · ReactThe assistant hands the chat to a person, with what they will see so you don't repeat yourself. The queue counts down…
Bubble CursorCursify · React
Social IconsUntitled UI React · React
MessagebeUI · ReactAdds sender alignment, metadata, and avatar placement.
Emoji ReactionRare UI · ReactA tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.
Reaction BarSpectrum UI · ReactA Slack-style emoji reaction row with popping chips, direction-aware rolling counts, and a staggered emoji-picker…
TweetSpell UI · ReactEmbed Twitter/X posts with custom styling.
Chat MessageFluid Functionalism · ReactA single chat transcript entry with baked-in entrance and layout motion. Right-aligned accent bubble for the user…
MessagePanel UI · React NativeChat turn with avatar, bubble, header and footer.
Avatar 12 - Instagram Story RingsShadcn Space · ReactInstagram style story row with gradient rings for new stories, gray rings once viewed, an add story button, and a new…
Linked In Post CardOpenSourceUI · ReactCard that reproduces a LinkedIn post: author, text, image and reaction bar.
Presence StackKinetics · HTML/CSSAvatars fan out with a live online pulse
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
Story StripSwiftPieces · SwiftUIA Stories-style segment strip with its own clock, hold to pause, and tap zones for back and forward.
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
Facebook CardGreatUI · React
Message ActionsAI CSS · React
X PostWatermelon UI · React
Chat threadArc Library · ReactA chat thread with grouped messages, reactions, read receipts, typing, and a composer with attachments.
Call WidgetUI Lab · ReactAccept turns into hang-up as the call controls unfold out of it, one by one.
BubbleHextaUI · ReactChat message bubbles with variants, grouped corners, reactions and room for interactive content.
BranchLocalMode · ReactA message-versioning navigator that pages between regenerated/edited assistant variants for one turn, with prev/next…
BubbleCojeev UI · ReactGroups conversational content and timestamps into visually distinct message bubbles.
Social Highlight CardsMicroKit · ReactSocial cards with a luminous top rail, a soft brand-colored wash, and matching icons on hover.
Inline AnchoredFLX UI · ReactInline Anchored for Comment Thread.
Testimonial gridVelora UI · ReactMasonry wall of social posts and quote cards, led by a wide case-study quote with a headline metric.
Agent Chat PatternHalaska UI · React
BubbleSpaceUI · ReactRenders floating animated bubbles across the background that smoothly move and drift away when users move their mouse.
Aria BubbleReScript shadcn · ReScript
Liquid Glass SocialSkecher UI · ReactA responsive social-link cluster with focused liquid-glass motion and clear interaction feedback.
Cursor BubbleSora UI · ReactA floating label that follows the cursor and elastic-pops into view over interactive targets, powered by GSAP.
BubbleD2Studio UI · ReactA chat message bubble that aligns and colours itself by sender.
Message BubbleEaseUI · ReactA focused conversational surface with visual tones, independent alignment, and a speech-bubble tail that pops in on…
Glass MessageOpaline · ReactChat bubbles on glass: tinted for you, clear for them, with avatars, meta and a typing indicator.
Message ListFibo · ReactA conversation that groups each person's messages under one heading, with a single tab stop.
AI Answer 03ReactFrame · ReactAn agent-style AI answer card, a researching/reading/writing step tracker with a progress rail, markdown-style bold…
Messageshadcn/ui · ReactDisplays a message in a conversation, with optional avatar, header, footer, and alignment.
Tweet CardMagic UI · ReactA card that displays a tweet with the author's name, handle, and profile picture.
Feature PollCult UI · ReactFeature poll component with single or multiple selection, optional results, and keyboard navigation
Bubble variants in a release threadReUI · ReactAll seven variants doing the job each one is for, in one deploy thread.
Chat Editable MessageLobe UI · React
AI SendKokonut UI · ReactAn email the assistant drafted, editable in place. Send starts a short countdown you can undo before anything goes out.
Message BubblebeUI · ReactSupplies the visual surface inside the row.
Voice NoteRare UI · ReactA voice message bar with a scrubbable waveform and a play control.
Message ScrollerPanel UI · React NativeScroll behaviour a chat transcript needs.
Button 07 - SocialShadcn Space · ReactSocial button component
Discord Chat CardOpenSourceUI · React
ResponseAI Elements (Svelte) · SvelteA markdown response renderer for streamed AI content.
ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
Instagram CardGreatUI · React
Text ResponseAI CSS · React
Comment threadArc Library · ReactThreaded comments with replies, reactions, mentions, inline edit, and resolve.
Chat ThreadUI Lab · ReactReplies arrive after a beat of typing, and the thread follows only if you are.
MarkerHextaUI · ReactQuiet notes between content, like date dividers and system events, with sticky dates and times that read as Today or…
In-Message ErrorLocalMode · ReactAn accessible per-message error/retry block rendered inline on a failed assistant message (not a global toast), with…
MessageCojeev UI · ReactStructures a conversational or activity entry with a main content area and supporting description.
Social Icon ButtonsMicroKit · ReactCircular social links that trade their icon for a brand-colored arrow and glow on hover.
Side PanelFLX UI · ReactSide Panel for Comment Thread.
Tweet CardVelora UI · ReactStatic social-proof card — props, not an API call.
Handoff PatternHalaska UI · React
Aria MessageReScript shadcn · ReScript
MessageD2Studio UI · ReactA chat message row: avatar, author, timestamp and content.
Streaming ResponseEaseUI · ReactWraps a response with the actions people expect once it settles: copy, replay, share, a thumbs up or down, and a list…
Glass Tweet CardOpaline · ReactA post from X on glass, loaded live with react-tweet by id, with a fallback when it can't be fetched.
ReactionsFibo · ReactLets people respond to content with an emoji in one tap.
Instagram Post MockupReactFrame · ReactA realistic Instagram post, avatar ring, swipeable multi-photo carousel, double-tap-to-like heart burst…
Feature VotingCult UI · ReactList of features with up-vote support, optional sorting by vote count, and controlled or uncontrolled state
Grouped consecutive messagesReUI · ReactConsecutive turns from one sender collapse into a single BubbleGroup.
Chat Editable Message ListLobe UI · React
Social ButtonKokonut UI · ReactShare button that expands into a row of social icon buttons with staggered Motion animations on hover, built with…
Streaming ResponsebeUI · ReactProvides the active and completed response lifecycle.
PostPanel UI · React NativeA social card — author, body, media and the counts underneath, with the votes animated.
Context Menu-02 - Radial BubbleShadcn Space · ReactSpring-animated radial bubble menu that fans colored icon buttons in a circle from a central trigger
Facebook Post CardOpenSourceUI · React
Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
Mobile MockupGreatUI · React
ReactionsArc Library · ReactAcknowledge a post in one tap, with counts that roll.
ReactionsUI Lab · ReactTap a reaction to add yours, or pick one and watch it fly into its pill as the count rolls.
MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
MessageLocalMode · ReactRole-aware chat message (data-role) rendering string or ContentPart[] — markdown text, image thumbnails with a…
Activity FeedFLX UI · ReactActivity Feed for Comment Thread.
Message Thread PatternHalaska UI · React
Base BubbleReScript shadcn · ReScript
Message ScrollerD2Studio UI · ReactA chat transcript scroller that sticks to the newest message and offers a jump-to-latest button.
LinkedIn Post MockupReactFrame · ReactA realistic LinkedIn post with a headline, media image, a reaction summary, and interactive like/repost actions with…
Illustration Comment BubbleCult UI · ReactComment bubble illustration for code or chat UI
Message reactions and a reaction buttonReUI · ReactA static emoji row, a pressable reaction with a count, and a top anchored row.
Chat Message ModalLobe UI · React
X CardKokonut UI · ReactX (Twitter) style post card with author details, verified badge, reply thread and hover gradient, built with React and…
Message ContextbeUI · React
Web MessagePanel UI · React Native
Scroll Area 02 - Horizontal Profile StoriesShadcn Space · ReactA horizontally scrollable avatar stories bar with active status indicators, built with ScrollArea and ScrollBar.
Instagram Post CardOpenSourceUI · React
Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
Twitter CardGreatUI · React
Story ProgressUI Lab · ReactTap through stories, hold to pause.
Message scrollerHextaUI · ReactA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the…
ResponseLocalMode · ReactStreaming markdown renderer for assistant output: shows a cursor while streaming, tolerates partial/unterminated…
Avatar StackFLX UI · ReactAvatar Stack for Live Presence.
Streaming Answer PatternHalaska UI · React
Base MessageReScript shadcn · ReScript
TikTok Post MockupReactFrame · ReactA full-bleed 9:16 TikTok feed mockup with a Following/For You tab bar, a side action rail (like/comment/save/share)…
Merging BubblesCult UI · ReactMerging bubbles visualization
Long reply with show moreReUI · ReactA long assistant answer folds to its first paragraph behind a Collapsible.- Awesome GiscusLobe UI · React
Presence DockOpenSourceUI · React
Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
Structured Output ViewerLocalMode · ReactA result panel for useGenerateObject extending Response: pretty-printed JSON, an independently-usable inference-stats…
Activity StatusFLX UI · ReactActivity Status for Live Presence.
X Post MockupReactFrame · ReactA realistic X (Twitter) post with a verified badge, media image, and interactive like/retweet/bookmark actions with…
Poll WidgetCult UI · ReactPoll widget with inline, popover, and dialog modes, optional results, and animations