---
name: "@katok-ui"
slug: "katok-ui"
description: "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."
category: "AI/chat UI"
tags: ["ai", "buttons", "cards", "forms", "media", "pro-available"]
framework: "react"
license: "MIT"
author: "froggy1014"
website: "https://katok-ui.jeongmin.dev"
github: "https://github.com/froggy1014/katok-ui"
registry: "https://katok-ui.jeongmin.dev/r/registry.json"
pro: true
pro_url: "https://katok-ui.jeongmin.dev/pricing"
github_stars: 1
component_count: 12
generated_at: "2026-10-20T06:35:22.791Z"
---

# @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.

## Links

- Website: https://katok-ui.jeongmin.dev
- GitHub: https://github.com/froggy1014/katok-ui
- Registry JSON: https://katok-ui.jeongmin.dev/r/registry.json
- Directory page: https://sh4dcn.vercel.app/registry/katok-ui
- This file: https://sh4dcn.vercel.app/md/katok-ui.md
- Pro / pricing: https://katok-ui.jeongmin.dev/pricing

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json
pnpm dlx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json
bunx shadcn@latest add https://katok-ui.jeongmin.dev/r/registry.json
# clone the source repo
git clone https://github.com/froggy1014/katok-ui.git
# fetch the raw registry index
curl -s https://katok-ui.jeongmin.dev/r/registry.json
```

## Components (12)

| name | type | description | install |
| --- | --- | --- | --- |
| chat-bubble | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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 | registry: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` |

## For AI agents

```text
You are adding components from @katok-ui to a shadcn-compatible project.
1. Read this file (https://sh4dcn.vercel.app/md/katok-ui.md) for the component list.
2. Fetch the machine-readable index: https://katok-ui.jeongmin.dev/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.vercel.app/json (library slug: katok-ui).
```