Dev Design Libraryshadcn/ui Social Components
Dev Design Library indexes 24 shadcn/ui social components from 9 open-source UI libraries, with the most coming from Notra, FLX UI, Shadcn Space, Cojeev UI and HextaUI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project.
Poll WidgetCult UI · ReactPoll widget with inline, popover, and dialog modes, optional results, and animations
Social ButtonKokonut UI · ReactShare button that expands into a row of social icon buttons with staggered Motion animations on hover, built with…
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…
MessageAI Elements (Svelte) · SvelteA full chat message system with branching, attachments, actions, and markdown streaming responses.
AI OverviewNotra · ReactThe AI Overview root, built on shadcn Collapsible and Button, with a collapsible Show more.
MessageHextaUI · ReactA chat message row with an avatar, name, bubbles and status, where new messages rise in from the sender's side.
BubbleCojeev UI · ReactGroups conversational content and timestamps into visually distinct message bubbles.
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.
Button 07 - SocialShadcn Space · ReactSocial button component
ChatGPT MessageNotra · ReactUser bubbles and bubble-less assistant turns with reasoning and hover actions.
Message scrollerHextaUI · ReactA chat scroll area that follows new messages, keeps your place while you read back, and counts what you missed on the…
MessageCojeev UI · ReactStructures a conversational or activity entry with a main content area and supporting description.
Side PanelFLX UI · ReactSide Panel for Comment Thread.
Scroll Area 02 - Horizontal Profile StoriesShadcn Space · ReactA horizontally scrollable avatar stories bar with active status indicators, built with ScrollArea and ScrollBar.
Claude Code MessageNotra · ReactUser turns on a full-width bar and assistant turns behind a white bullet, with inline code and bold.
Activity FeedFLX UI · ReactActivity Feed for Comment Thread.
Claude MessageNotra · ReactUser bubbles and serif assistant replies with slots for search, sources and actions.
Avatar StackFLX UI · ReactAvatar Stack for Live Presence.
Codex MessageNotra · ReactUser turns on a full-width band and assistant turns behind a dim bullet.
Activity StatusFLX UI · ReactActivity Status for Live Presence.
Gemini MessageNotra · ReactGemini's user pill and bubble-less assistant turn.
OpenCode MessageNotra · ReactUser prompts on a blue-ruled panel and indented assistant replies with OpenCode's markdown colors.
Perplexity MessageNotra · ReactUser pill and assistant answer turn with search and action slots.