# Parley — Team Chat App for React, shadcn/ui & Tailwind (Messenger UI)

> A complete team chat for React and shadcn/ui: conversation list with tabs, threads with replies, reactions and Markdown, image lightbox, file uploads, voice notes, internal notes, @mentions, calls, contact and group details, profile and invites. Light and dark, phone to desktop.

- Kind: Component (Dialogs / Modals)
- Price: comes with the Pro plan
- License: UpFork Standard License. Use it in unlimited personal and commercial projects. Don't resell or redistribute it on its own.
- Developer: UpFork
- Tags: dialog, profile, list, dashboard, chat, messenger, inbox, messaging, shadcn, base-ui, nextjs, tailwind
- npm packages: @base-ui/react, class-variance-authority, cmdk, frimousse, lucide-react, motion, sonner, zustand
- Published: 2026-10-15
- Updated: 2026-10-15
- Page: https://upfork.dev/products/shadcn-chat-app-messenger-react

## How to get it

Install it into a React + Tailwind project with the shadcn CLI:

```bash
npx shadcn@latest add @upfork/shadcn-chat-app-messenger-react
```

It installs with the member's personal CLI token (UPFORK_TOKEN), made on their UpFork account page. It comes with UpFork's Pro plan and the plans after it.

## About

A complete chat app (the dashboard's `/apps/chat`) built on shadcn/ui with **Base UI** primitives, Tailwind CSS 4,
`motion`, `sonner`, `zustand` and the `frimousse` emoji picker. Light and dark, phone to wide desktop.

```bash
npm install
npm run dev      # http://localhost:5201
npm run build && npm run start   # review build on http://localhost:5200
```

## What is in it

- **List:** my avatar (opens My profile), New chat, Invite; search (`/`); All / Unread / Groups / Favourites with
  live counts; collapsible Pinned, Recent and Archived sections; rows with presence ring, smart dates, `You:` and
  receipts, typing and draft previews, Markdown in previews, pin / mute / `99+` badges; hover quick actions,
  right-click menu (mute 1 h / 8 h / 1 week / Always), skeletons, ↑/↓ + Enter, reorder animation.
- **Conversation:** header button that opens details, presence or "last seen", member stack, search with match
  count, call / video call overlay, More menu (search, mute, pin, favourite, export, clear, block / leave);
  grouped bubbles with sender-side corners, sticky date chips, "New messages" divider, scroll-to-bottom with a
  count, typing bubble, reply quotes that jump to the original, reactions, hover action bar (react, reply, copy,
  forward, pin, more → edit / delete / copy link), long-press sheet on phones, images with lightbox, file cards
  with upload progress, link previews, voice notes, code blocks with copy, system lines, internal notes.
- **Composer:** Reply / Internal note (dashed, lock, "Add note"), auto-growing input, Enter / Shift+Enter, bold,
  italic, strikethrough, code, link popover, list, emoji (20 quick + recents, search, categories, skin tones),
  attachments by button, drag-and-drop or paste, @mentions in groups, reply and edit bars (↑ edits my last
  message), per-chat drafts, quick replies (Tab takes the first).
- **Panels and dialogs:** details panel on `xl` (sheet below), contact and group info with Media / Files / Links,
  My profile (avatar upload with circle crop, sections, status, custom status), Invite (chips, invalid e-mails,
  role, message, copy link), New chat / New group, confirmations for every destructive action, toasts with Undo,
  keyboard shortcut sheet (`?`).

## Where things live

| Path | |
| --- | --- |
| `components/chat/chat-layout.tsx` | `ChatLayout`: panes, URL state (`?c=`, `?m=`), shortcuts, overlays |
| `components/chat/actions.ts` | pure actions (`sendMessage`, `react`, `muteChat`, `clearChat`, …) |
| `components/chat/store.ts` | the zustand store (data + UI state) |
| `components/chat/commands.ts` | user commands: confirm dialogs and toasts with Undo |
| `components/chat/data.ts` | the demo conversations (dates move to "today" on load) |
| `components/chat/demo.ts` | demo realism: receipts, typing, canned replies, uploads (remove for a real backend) |
| `lib/contacts.ts` | the people, shared by every app of the dashboard |
| `public/images/avatars/` | profile photos (`npm run avatars`, credits in `CREDITS.md`) |
| `public/images/chat/` | image attachments (`npm run media`, credits in `CREDITS.md`) |
| `public/emojibase/en/` | emoji data for the picker, self-hosted (`npm run emoji`) |

`npm run shots` takes review screenshots (light and dark, 1440 → 390 px) into `screenshots/`.

The app needs a `<Toaster />` (sonner) mounted once, as `app/layout.tsx` does.