@katok-ui

Unofficial KakaoTalk (카카오톡) chat UI for React: chat bubbles, chat list, message input, and Kakao AlimTalk (알림톡) / Brand Message previews with API-shaped props. Tailwind CSS v4, light and dark.

12 components pro available react shadcn-cli MIT

website ↗ github ↗ registry ↗ agent brief (.md) ↗ pro ↗

Install this registry

shadcn (npm) npx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json

pnpm pnpm dlx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json

bun bunx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json

fetch registry curl -s https://katok-ui.jeongmin.dev/r/registry.json

Components

12 total

Chat Bubble component

KakaoTalk message bubble — yellow outgoing / white incoming, first-bubble tail, unread count "1", timestamp, edited flag.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/chat-bubble.json

Message Group component

Consecutive messages from one sender: squircle avatar + name on the first bubble, tail on the first, time on the last.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/message-group.json

Profile Avatar component

KakaoTalk squircle profile picture with default silhouette and 2–4 member group-chat composites.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/profile-avatar.json

Chat Header component

Chat room header (back + unread total, title, member count, search, menu) and large-title tab header.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/chat-header.json

Message Input component

Compose bar: attach, auto-growing field, emoji, # search that turns into the yellow send button. IME-safe Enter.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/message-input.json

Date Separator component

Translucent date pill between message days, with a KakaoTalk-format date helper.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/date-separator.json

System Message component

Centered notice for joins, leaves, invites and deleted messages, with optional action.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/system-message.json

Chat List Item component

Chats tab row: squircle or group composite avatar, member count, 2-line preview, time, red unread badge, mute and pin.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/chat-list-item.json

Chat Room component

Layout shell: header, scrollable message log on the chat background, input bar.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/chat-room.json

Biz Button component

Kakao Biz Message button using the API button codes (WL, AL, DS, BK, MD, BC, BT, AC, BF, TN, P1–P3).

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/biz-button.json

AlimTalk Bubble component

AlimTalk (알림톡) preview mirroring the API fields — messageType BA/EX/AD/MI, emphasizeType NONE/TEXT/IMAGE/ITEM_LIST, buttons, quick replies, length limits.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/alimtalk-bubble.json

Brand Message Bubble component

Brand Message (브랜드메시지, FriendTalk successor) preview — TEXT, IMAGE, WIDE, CAROUSEL_FEED, coupons, (광고) prefix and opt-out footer.

npx shadcn@latest add https://katok-ui.jeongmin.dev/r/brand-message-bubble.json