Skip to main content
dotHello Social Addon

Social UI Catalog

23+ interactive components for social media interfaces — post feed (8 variants), action bar, compose & modal, DM inbox & thread, reaction picker, profile header & tabs, story circles, notification bell, context menu, audience selector, premium gate, and more. All components use the dh-sm-* class prefix. Call DH.initSocial().

v1.2.0 23+ components dh-sm-* prefix Token-driven
⬇ Download Social Addon
Stories

Story Circles

Horizontal scroll strip of user story rings. Unseen = primary border, seen = muted. Add-story button included.

Feed

Feed Header, Tabs & Compose

Sticky feed header with title and notification bell. Tab bar for feed filtering. Inline compose box with tool row, character counter, and post button.

Home
3
DJ
280
Posts

Post Card Variants

Eight post variants: text, image, image-grid, link preview, poll, quote, video, and pinned/staff modifiers. Action bar with like, reply, repost, share, and view counts.

DT
David Turk ✓ @davidturk · 2m

Just shipped dotHello v2.5.0 — Social addon is live with 23+ components for feeds, DMs, profiles, and more. Zero dependencies. Three files. 🚀

👁 4.2K
MG
Morgan Grey @morgangrey · 18m

The new workspace setup is finally done. So clean. 🖥

🖥
🌿
JA
Jamie A. @jamie_a · 20m

Replying to @morgangrey — nice setup! What monitor is that?

SA
Sam K. @sam_k · 3h

Favourite CSS framework approach?

1,204 votes · 18h left
PQ
Petra Q. ★ @petra_q · 5h 📌 Pinned

This is exactly what microsite development needed. Strongly agree.

DT
David Turk @davidturk

Just shipped dotHello v2.5.0 — Social addon is live with 23+ components…

Profile

Profile Header & Tabs

Full profile header with banner, avatar, name, handle, bio, follow stats, and action buttons. Tabbed content switcher below.

DT
David Turk ✓
@davidturk
Building hellodjt.com & dotHello framework · Zero-dependency CSS/JS · Creator · MIT license
📍 London, UK 🔗 hellodjt.com 📅 Joined March 2026
412 Following
14.2K Followers
AL
MG
JA
Followed by Alex, Morgan and 3 others you follow
Direct Messages

DM Inbox & Thread

Two-panel DM layout — conversation list on the left, active thread on the right. Includes message bubbles, timestamps, read receipts, and compose row.

Messages
AL
Alex L.
Sounds great! Looking forward to it 🙌
2m 2
MG
Morgan Grey
Did you see the new components?
1h
JA
Jamie A.
You: I'll send the file over
3h
AL
Alex L.
● Online
Hey! Have you checked out the new dotHello Social addon?
Yes! Just finished reading the catalog. The DM thread component looks exactly like this 😄
Alex L. · 2 min ago · ✓✓
Sounds great! Looking forward to it 🙌
Interactions

Reaction Picker & Action Sheets

Long-press reaction emoji picker with 6 reactions. Repost sheet and share sheet with standard actions. Audience selector for compose privacy.

Reaction Picker — long-press to open

❤️ 142 🔥 38 😂 21

Repost Sheet

Repost

Audience Selector

🌍
Everyone
Anyone on the platform
👥
Followers only
Only people who follow you
🏷
Mentioned only
Only people you @mention
Threads

Thread Depth View

Nested reply threads with depth-indent levels (d1, d2, d3), thread connector lines, and expand/collapse toggle for deep threads.

DT
David Turk @davidturk 6h

Thread depth components let you nest replies up to three levels deep, with connector lines and expand/collapse for long threads. 🧵

AL
Alex L. @alex_l 5h

Really useful! Does it handle RTL text direction too?

DT
David Turk @davidturk 5h

Yes! dotHello core supports [dir="rtl"] and the Social addon inherits it — all flex layouts reverse automatically.

Compose Extras

Attachment Preview & Draft / Scheduled Posts

Horizontal attachment strip for images, video, and file attachments with remove buttons. Draft and scheduled post modifiers with status labels.

Attachment Preview Strip

🖼
🎬
📎 report.pdf

Draft & Scheduled Modifiers

DT
David Turk Draft

Thinking about the next release features…

DT
David Turk ⏰ Tomorrow 9am

🚀 Big announcement dropping tomorrow…

Monetisation

Premium Gate

Overlay gate and card gate variants for paywalled content. The overlay blurs/dims the content underneath. The card gate presents an upgrade CTA inline.

Overlay Gate — content blurred until upgrade

Premium exclusive content lives here — advanced analytics, deeper thread insights, and extended history are all behind the gate.

⭐
Premium only
Upgrade to access exclusive content, extended analytics, and more.

Card Gate — inline upgrade prompt

👑
Go Premium
Ad-free experience, priority support, and early access to new features.
Identity

Avatars & Badges

Three avatar sizes with online dot, story ring (unseen + seen), and five badge variants: verified, gold, premium, staff, and free tier.

Avatar sizes + states

DT
Default
AL
Online
MG
Story (unseen)
SA
Story (seen)
JA
Small
RI
XS

Badge variants

✓ Verified
★ Gold
⭐ Premium
🛡 Staff
FREE Free tier