Team inbox workspace

1. 1.

   Open your existing React project

   Use React 19+, TypeScript/TSX, and a working Tailwind CSS 4 build. Keep the project's existing router, dependencies, and global stylesheet.

2. 2.

   Check components.json before installing

   Reuse an existing components.json. Its aliases.components must resolve in TypeScript and the bundler, and tailwind.css must point to the stylesheet your app loads. Do not reinitialize an already configured project.

   Only if components.json is missing; run inside the existing app and follow its framework setup.

   npx shadcn@latest init

   Copy first-time setup command
3. 3.

   Include the installed sources in Tailwind

   Keep the host's standard shadcn theme variables, Tailwind @theme mappings, and base border styles loaded (background, foreground, border, sidebar, and chart tokens). Ensure Tailwind scans the actual installed components directory. Restricted source(none), ignored paths, and monorepos may need an @source path relative to the stylesheet. For theme='dark', use a class-based dark variant in the host CSS.

4. 4.

   Import through your configured components alias

   The @components/ entry is a registry target placeholder, not a JavaScript import. Replace the example's @/components prefix with components.json aliases.components, verify the file printed by the CLI, and mount it in an existing host route.

/* Example: src/styles.css */
/* Add only if this directory is outside your existing scan scope. */
@source "./components/uiblocks";

/* Required for the recipe theme="dark" class switch. */
@custom-variant dark (&:where(.dark, .dark *));

Setup references: shadcn configuration · Tailwind source scanning · Dark mode

mode, conversations, messages

Default controlled mode contains no people or message history. Supply conversations={id,name,subtitle?,preview,updatedAt,unread?,online?,label?} and messages={id,conversationId,body,time,direction:'incoming'|'outgoing',author?}. Times/presence remain exactly host-reported. Explicit demo mode seeds fictional records only if both arrays are omitted; explicit empty arrays remain empty.

selectedConversationId, onConversationChange, searchQuery, onSearchChange

Supply selection and search together with their callbacks, or allow local view state over the supplied records. Read-only controlled values do not change internally. Search and unread filtering only affect navigation, never message delivery. Mobile thread back restores keyboard focus to its conversation button.

onSendMessage, onArchive

Send receives {conversationId,body}; archive receives the conversation ID. Both await the host handler, prevent duplicate requests and show actual rejection text. Controlled send never appends messages or removes conversations; update authoritative props when your service accepts them. Drafts survive rejection and are stored separately per conversation. Actions without a handler are disabled. Fictional local demo records never invoke host business callbacks.

loading, error, onRetry

Supply actual loading/errors from your service. Retry delegates to the host and exposes rejection without inventing a successful reload. This template includes no messaging server, websocket client, authentication or automatic response.

brand, title, description, navigation, headerSlot, footer, theme, className

Provide your real identity, copy, normal host navigation URLs and account controls. The layout uses supplied message text without HTML injection; long text wraps within bubbles. Inherit the host theme or enable its class-based dark variant with theme='dark'.