CRM Contact Page React block for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

CRM Contact Page is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import CrmContactPage from @/components/blocks/crm-contact-page.

// app/(admin)/clients/[id]/page.tsx (the shell lives in app/(admin)/layout.tsx: <AdminShell>{children}</AdminShell>)
"use client"

import { CrmContactPage, type CrmNote } from "@/components/blocks/crm-contact-page"

export default function ClientPage() {
  return (
    <CrmContactPage
      previousShortcut="alt+arrowleft"
      nextShortcut="alt+arrowright"
      onNoteSave={async (note: CrmNote) => {
        await fetch(`/api/clients/c01/notes/${note.id}`, { method: "PUT", body: JSON.stringify(note) })
      }}
      onTagsChange={async (tags) => {
        await fetch("/api/clients/c01", { method: "PATCH", body: JSON.stringify({ tags }) })
      }}
    />
  )
}

Props

• company
  CrmCompany

  The record ({ id, name, cui, regCom, status, industry, city, address, website, email, phone, iban, bank, owner, tags, createdAt, balance, revenueYtd, lastInvoice, lastPayment, overdueInvoices, paymentTermDays, followers, archived }); defaults to CRM_CONTACT_SAMPLE.company (Tech Solutions Inc.).

• contacts
  ContactData[]

  The people at the company; defaults to CRM_CONTACT_SAMPLE.contacts (Daniel Brooks, Laura Price, Sam Porter).

• primaryContactIddefault "daniel-brooks"
  string

  The contact in the side panel card, listed first with the Primary badge; defaults to the first contact.

• deals
  CrmContactDeal[]

  The client's deals ({ id, title, stageId, amount, currency, probability, owner, expectedCloseDate, href }); defaults to CRM_CONTACT_SAMPLE.deals (3).

• stages
  CrmDealStage[]

  The pipeline stages the deals point to ({ id, name, probability, kind }); defaults to CRM_CONTACT_STAGES (B2B sales).

• activity
  CrmActivity[]

  Timeline items with a kind (email, call, meeting, invoice, payment, stage, comment, note, file) for the icon and the filters; defaults to CRM_CONTACT_SAMPLE.activity (14).

• files
  FileItem[]

  The record's files; defaults to CRM_CONTACT_SAMPLE.files (6).

• notes
  CrmNote[]

  Notes ({ id, author, createdAt, content (HTML), pinned, editedAt }); defaults to CRM_CONTACT_SAMPLE.notes (3).

• people
  CommentAuthor[]

  Who can be @mentioned in comments and notes; defaults to CRM_CONTACT_TEAM.

• currentUser
  CommentAuthor

  The signed-in user: the composer avatar, the author of new notes and comments; defaults to Ana Pop.

• tab
  "overview" | "activity" | "deals" | "files" | "notes"

  The open tab, controlled; pair it with onTabChange.

• defaultTabdefault "overview"
  "overview" | "activity" | "deals" | "files" | "notes"

  The tab open first while uncontrolled.

• onTabChange
  (tab: CrmContactTab) => void

  Called when a tab is picked (also by View all and Add a note).

• pagerdefault "3 of 128"
  EntityPager | null

  Previous / next client ({ index, total, onPrevious, onNext, previousHref, nextHref }); null hides it.

• previousShortcutdefault ""
  string

  Key for the previous client, e.g. alt+arrowleft; empty binds nothing (the demo binds Alt + arrows).

• nextShortcutdefault ""
  string

  Key for the next client, e.g. alt+arrowright; empty binds nothing.

• noteShortcutdefault "mod+enter"
  string

  Saves the note from inside the editor (shown as ⌘ Enter or Ctrl + Enter); empty binds nothing.

• showAsidedefault true
  boolean

  The side panel with the primary contact, billing, tags and team (the Detalii tab on phones).

• factsLayoutdefault "strip"
  "strip" | "grid" | "tiles"

  The header facts: one scrolling strip, a grid, or gray tiles (grid and tiles fold after 4 on phones).

• headerStickydefault "condensed"
  "none" | "condensed"

  condensed pins a glass bar with the name and the primary action once the header scrolls away.

• defaultUploads
  UploadFile[]

  Uploads already running when the page opens; entries without a picked file finish on a timer (the files example).

• autoFocusNotedefault false
  boolean

  The note editor takes focus when the notes tab mounts.

• defaultFavoritedefault true
  boolean

  The header star starts on.

• defaultFollowingdefault true
  boolean

  The follow toggle starts on (you appear in the team list).

• listHrefdefault "/clients"
  string

  Where Clients in the breadcrumb goes.

• invoiceHrefdefault "/invoices/new?client=<id>"
  string

  Where New invoice goes (header menu and billing).

• contactHrefdefault "/contacts/new?client=<id>"
  string

  Where Add contact goes.

• onTitleChange
  (title: string) => (void | Promise<unknown>)

  Renaming from the header; a rejection restores the name and shows the error. Simulated by default.

• onAction
  (action: CrmContactAction, company: CrmCompany) => (void | Promise<unknown>)

  Every header action. Archive and restore are optimistic (a rejection rolls back with a toast); export shows a loading toast.

• onNoteSave
  (note: CrmNote) => (void | Promise<unknown>)

  A new note (new id) or a changed one (edit, pin); a rejection keeps the draft or rolls back with a toast.

• onNoteDelete
  (note: CrmNote) => (void | Promise<unknown>)

  Deleting a note: removed at once, with an undo toast; a rejection brings it back.

• onComment
  (body: string, context: { mentions: string[]; }) => (void | Promise<unknown>)

  A comment from the activity composer; the composer keeps the text until it resolves.

• onUpload
  (file: File, context: { signal, onProgress }) => Promise<unknown>

  Uploads a picked file; done files join the list. Default: a pretend upload of about 1.6 s.

• onFileDelete
  (file: FileItem) => (void | Promise<unknown>)

  Deleting a file after the confirmation; the row fades while it runs.

• onFileOpen
  (file: FileItem) => void

  Clicking a file; default opens its preview url in a new tab.

• onDealCreate
  (values: CrmNewDealValues) => (void | Promise<unknown>)

  The new deal dialog's submit; a rejection shows its message in the dialog.

• onTagsChange
  (tags: string[]) => (void | Promise<unknown>)

  Tags added or removed in the side panel; optimistic, rolled back on rejection.

• onFavoriteChange
  (favorite: boolean) => (void | Promise<unknown>)

  The header star.

• onFollowingChange
  (following: boolean) => (void | Promise<unknown>)

  The follow toggle.

• labelsdefault "DEFAULT_CRM_CONTACT_PAGE_LABELS"
  Partial<CrmContactPageLabels>

  Every visible string (English by default); CRM_CONTACT_PAGE_LABELS_RO is the ready Romanian set. Nested keys translate the composed items.

• localedefault "en-US"
  string

  Intl locale for money, numbers and dates.

• currencydefault "USD"
  string

  The currency of the balance, revenue and deals.

• nowdefault "useNow()"
  Date | number

  The reference time for relative times and the day headings; the demo pins Sep 24, 2026 16:40.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The accent of the primary actions, the tab indicator, the chips, the editor and the upload progress.

• radiusdefault "md"
  "sm" | "md" | "lg"

  The panels (12, 16 or 24px), the contact card, the dropzone, the editor and the dialog.

• loadingdefault false
  boolean

  The header, the sections and the side panel as skeletons.

• animateIndefault true
  boolean

  The header, the panel and the side sections rise in once on mount; off in thumbnails and under reduced motion.

• linkComponentdefault "<a>"
  (props: LinkComponentProps) => ReactNode

  The router link for the breadcrumb, the pager, the deal and invoice links; defaults to the LinkProvider's.

• className
  string

  Merged onto the root.

• classNames
  Partial<Record<CrmContactPageSlot, string>>

  Classes for the parts: header, tabs, panel, section, aside, archived, dealDialog.

Parts

FAQ

More React blocks