chatcn

Beautiful chat, made simple

Ready-to-use, customizable chat components for React. Built on React. Styled with Tailwind. 4 themes.

Try it out

A fully interactive chat demo. Switch themes, send messages, react.

D
Design System TeamAlex, Sara, and you
Yesterday
Alex Chen created this conversation
Alex Chen

Hey! Have you had a chance to look at the new design system?

A

I pushed the updated Figma link to the channel

Yeah, just opened it. The component library looks incredible

Love the new color tokens especially

Today
Alex Chen

Quick update β€” the auth refactor PR is ready for review

Token refresh logic is completely rewritten. Much cleaner now

A

Only concern is backwards compat with existing sessions β€” thoughts?

Sara Kim

I reviewed it this morning. Left a couple of comments on the error handling paths

S

Overall looks solid though πŸ‘

Alex ChenOnly concern is backwards compat with existing sessions β€” thoughts?

For backwards compat β€” we can run both token formats in parallel for 30 days, then cut over.

Let me write up a migration plan doc this afternoon

A
S
A
Alex Chen

Here’s the updated token validation logic:

typescript
async function validateToken(token: string) {
  const decoded = jwt.verify(token, SECRET)
  if (decoded.version === 2) {
    return validateV2(decoded)
  }
  return validateV1(decoded) // legacy
}
A
Alex Chen

And the migration plan doc

token-migration-plan.pdf

239 KB

S
Sara Kim

Here’s the updated component preview:

S
Sara Kim

Left a voice note about the rollout timeline:

0:14
Alex Chen

That’s a great idea. Parallel token validation is the safest approach

A

I’ll update the PR with a feature flag for the new token format in the meantime

S
Sara Kim

Shipping it tomorrow πŸš€

Everything you need for chat

Production-ready components with thoughtful defaults.

4 Themes

Lunar, Aurora, Ember, and Midnight. Light and dark modes built in.

Hey, how's the project?
Almost done!
πŸ‘ 1

Messaging

Reactions, threads, read receipts, typing indicators, and reply-to.

Support Agent
How can I help?

Support Widget

Customer support chat with agent routing, ratings, and quick replies.

design-v2.fig2.4 MB

File Upload

Drag-and-drop file sharing with previews, progress bars, and size limits.

Search messages...ESC

Search

Command-palette search across messages with keyboard navigation.

RESTWSFirebase

Backend Agnostic

Works with any stack. REST, GraphQL, WebSocket, or serverless.

Get started in one command

Install the chat component into your project via the shadcn CLI.

npx shadcn@latest add https://raw.githubusercontent.com/leonickson1/chatcn/main/public/r/chat.json