Telegram-Style Channel List UI in SwiftUI (Learn the Pattern)

Want that clean Telegram-style channel and chat list in SwiftUI? The short answer: a scrolling list of dense, scannable rows, each with an avatar, the name, a one-line last-message preview, a timestamp, and an unread badge, plus pinned and muted states. It is one of the most-copied screens in mobile for a good reason: it says a lot at a glance. Build it from a free VP0 design, the free iOS design library for AI builders, and learn the pattern rather than copying the brand.

Who this is for

This is for builders making a messaging app, a community client, or any inbox-style list who want the proven channel-list layout, and who know the pattern is fair game while a specific app’s brand is not.

What makes the row work

The whole screen is really one well-designed row repeated. Each row packs five pieces of information without feeling crowded: an avatar for quick recognition, the chat or channel name, a single truncated line of the most recent message, a right-aligned timestamp, and an unread count badge. Layer on pinned chats at the top, a muted indicator, and swipe actions for mute, pin, and delete. SwiftUI’s List gives you the scrolling, swipe actions, and separators for free, and the Human Interface Guidelines cover the row and list conventions users expect.

Row element	Job	Get it right
Avatar	Quick recognition	Image or initials fallback
Name and preview	Who and what	One truncated preview line
Timestamp	Recency	Relative, right-aligned
Unread badge	Attention	Clear count, accent color
Swipe actions	Mute, pin, delete	Standard List swipe actions

Build it free with a VP0 design

Pick a chat-list or messaging design from VP0, copy its link, and prompt your AI builder:

Rebuild this VP0 chat-list design in SwiftUI: [paste VP0 link]. Use a List of rows with an avatar, name, one-line last-message preview, relative timestamp, and unread badge, plus pinned and muted states and swipe actions for mute, pin, and delete. Use semantic colors for dark mode, and use my own brand, not any real app’s name or assets.

Messaging is massive: Telegram has reported more than 900,000,000 monthly active users, which is why its list design is so widely referenced, often as a Telegram Mini App built on the Telegram Mini Apps platform. For neighboring patterns, see a Notcoin-style tap-to-earn game UI, a Hamster Kombat-style tap-to-earn UI, an AI chat streaming UI in SwiftUI, and the gesture craft in dating-app swipe UI components. To round out a game suite, see a chess board UI kit in React Native.

Learn the pattern, keep it original

The line is the same as for any recognizable app. The messaging channel-list layout is a genre, like a settings screen or a feed, and you are free to build in it. Telegram’s name, logo, color identity, and assets are not yours to take. Use your own brand, your own icon, your own colors, and an original name. Build the pattern well, make it adapt to dark mode, and ship something that is recognizably good without being a copy.

Common mistakes

The first mistake is copying Telegram’s name, logo, or exact look instead of learning the pattern. The second is an overcrowded row that sacrifices the at-a-glance scannability. The third is hardcoded colors that break in dark mode. The fourth is missing the unread, pinned, and muted states that make the list useful. The fifth is paying for a chat-list kit when a free VP0 design plus a SwiftUI List does it.

Key takeaways

• A channel list is one dense, scannable row repeated.
• Pack avatar, name, preview, time, and unread badge without crowding.
• Use a SwiftUI List for scrolling, swipe actions, and separators.
• Adapt to dark mode with semantic colors.
• Learn the pattern, use your own brand, and build it free from a VP0 design.

Frequently asked questions

How do I build a Telegram-style channel list in SwiftUI? Use a List of rows with an avatar, name, one-line preview, timestamp, and unread badge, plus pinned and muted states and swipe actions, adapting to dark mode.

What is the safest way to build a chat list with Claude Code or Cursor? Learn the pattern from a free VP0 design with your own brand, build the row with avatar, preview, time, and badge, and never copy Telegram’s name or assets.

Can VP0 provide a free SwiftUI or React Native template for a chat list? Yes. VP0 is a free iOS design library; pick a chat-list design and your AI tool rebuilds the rows, badges, and swipe actions at no cost.

Is it legal to clone Telegram’s UI? You can build a messaging channel-list UI, since the pattern is a genre, but Telegram’s name, logo, and assets are protected, so use your own brand and original assets.