Installation

Add the items

1. Add the Tendkit registry

   Optional: it lets you write @tendkit/support instead of full URLs. Add it to components.json:

   components.jsonCopy

   {
     "registries": {
       "@tendkit": "https://tendkit.softwaresavants.dev/r/{name}.json"
     }
   }

2. Add the engine, a store, the screens and a channel

   TerminalCopy

   npx shadcn@latest add @tendkit/support @tendkit/support-postgres @tendkit/support-ui @tendkit/channel-resend

   Without the registry entry, use the URLs: https://tendkit.softwaresavants.dev/r/support.json, and so on. Use support-d1 instead of support-postgres for SQLite or Cloudflare D1.

3. Create the tables

   Export the support schema from your Drizzle schema, then generate a migration.

   db/schema.tsCopy

   export * from "@/lib/support/postgres/schema";

   TerminalCopy

   npx drizzle-kit generate
   npx drizzle-kit migrate

   The tables are support_tickets, support_messages, support_contacts, support_contact_identities, support_attachments, support_events, support_reads and support_channel_state. The copied 0000_init.sql shows the exact SQL.

4. Wire it up

   Create the service, write your directory, add the webhook route, and mount the screens.

Monorepos

Install server items where your API lives and the screens where your web app lives, then fix the few imports that cross packages (the screens only import types from the engine):

npx shadcn@latest add @tendkit/support @tendkit/support-d1 @tendkit/channel-resend --cwd packages/api
npx shadcn@latest add @tendkit/support-ui --cwd apps/web

What lands where

• lib/support/: service.ts, store.ts, channel.ts, types.ts, text.ts, address.ts, plus postgres/ or d1/ and channels/.
• components/support/: support-inbox.tsx, support-ticket.tsx, support-composer.tsx, support-requests.tsx, link-customer-dialog.tsx, provider.tsx, client.ts and messages/en.json.

Next steps

Continue with the service. To see the end result first, open the live demo.