81 Pro components and page blocks

Get Pro
uibrik

Chat Card

Pro

Preview

Customize

One-to-one
Tall tile
Speed1.0×
Accent

Installation

Pro

Chat Card is a Pro component

Sign in to see the source, or install it with a license key. The live preview and props above are free to explore.

Sign inGet Pro

Install with a key

  1. Add the Pro registry to components.json:
    components.json
    {
  "registries": {
    "@uibrik-pro": {
      "url": "https://uibrik.com/r/pro/{name}.json",
      "headers": { "Authorization": "Bearer ${UIBRIK_LICENSE}" }
    }
  }
}
  2. Put your key in .env.local and add that file to .gitignore:
    .env.local
    UIBRIK_LICENSE=your-license-key
  3. Install it:
    Terminal
    npx shadcn@latest add @uibrik-pro/chat-card

Usage

import { ChatCard } from "@/components/uibrik/chat-card/chat-card";​<ChatCard  script={[{ from: "me", text: … }]}  speed={1}  accent="#3b82f6"  header  readReceipts  pauseOnHover={false}  status=""  prefill={3}  surface  // contact={{ name: … }}  // members={[{ id: …, name: … }]}  // title="…"  // me={{ name: … }}/>

Props

ChatCard
speed
Type number
1
Playback speed.
accent
Type string
"#3b82f6"
Your bubbles' colour.
header
Type boolean
true
Name and status above the thread, rolling to Typing… while they type.
readReceipts
Type boolean
true
"Seen" with their face(s) slides under your latest message once it's read.
pauseOnHover
Type boolean
false
Hold the conversation while the pointer is over it.
status
Type string
""
Under the name. Empty uses the mode's default.
scriptrequired
Type { from: "me" | "them" | memberId; text; reaction?; pause? }[]
–
The conversation, played in order and looped without a seam.
contact
Type { name; avatar? }
–
One-to-one: the other person. Shown in the header and beside their bubbles.
members / title
Type { id; name; avatar? }[] / string
–
Group mode: everyone else (script lines name them by id) and the group's name.
me
Type { name; avatar? }
–
You. With an avatar, it sits beside your bubbles.
prefill
Type number
3
Lines already on screen at the start.
surface
Type boolean
true
Its own softly tinted, rounded background. Off, it's transparent and fills its parent.
className
Type string
–
Classes for the wrapper. It fills its parent's height.