Messaging

The complete two-pane texting surface: inbox on the left, active thread on the right. Collapses to a single pane with a back button on mobile. Most products start here.

Select a conversation

Live preview on mock data — send a message and the demo texts back.

Installation

npx shadcn@latest add @handset/messaging

Installs inbox, thread, and composer as dependencies. Add @handset/next-routes too if you haven't set up the proxy yet.

Usage

import { HandsetProvider } from "@handset/react";
import { Messaging } from "@/components/handset/messaging";

<HandsetProvider>
  <div className="h-[600px]">
    <Messaging />
  </div>
</HandsetProvider>

The component fills its container — give the wrapper a height. Everything inside (list, thread, composer) is the copy in your repo, so restructure freely.

Props

Props
Prop	Type	Default	Description
tenantId	string	—	Scope to one tenant. Usually unnecessary — your proxy routes scope server-side.
className	string	—	Merged onto the root grid.