Katok UI

Overview

Katok UI is an unofficial set of KakaoTalk (카카오톡) mobile UI components for React, distributed as a shadcn/ui registry of 12 components. It is modeled on KakaoTalk for iOS and covers chat bubbles, the chat list and the message input, plus what the project describes as the first open-source previews for Kakao AlimTalk (알림톡) and Brand Message (브랜드메시지).

The Biz Message components take props that mirror the Kakao API fields (messageType, emphasizeType, button codes), so existing template JSON can be passed straight in for previews. Every component installs independently, supports light and dark mode and uses Tailwind CSS v4. The source, a Storybook and a design doc are on GitHub.

Features

• Chat bubble: Yellow outgoing and white incoming bubbles with first-bubble tail, unread count, timestamp and edited flag.
• Message grouping: Consecutive messages with squircle avatar and name on the first bubble and time on the last.
• Chat list item: Avatar or group composite, member count, two-line preview, unread badge, mute and pin.
• Message input: Auto-growing compose bar with attach, emoji and an IME-safe Enter key.
• Room layout: Chat header, date separator, system messages and a chat room shell.
• AlimTalk preview: Supports BA, EX, AD and MI message types, emphasis types, buttons, quick replies and length limits.
• Brand Message preview: TEXT, IMAGE, WIDE and CAROUSEL_FEED formats, coupons, ad prefix and opt-out footer.
• Biz buttons: Buttons using the Kakao API button codes.

Tech stack

• React
• Tailwind CSS v4
• shadcn/ui

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add @katok-ui/component-name