Staaarter

Chat Conversation

FAQ items presented as a vertical stack of chat bubbles: a right-aligned question bubble followed by a left-aligned answer bubble, each with a small timestamp underneath, mimicking a messaging app for a friendlier tone.

By Staaarter Team
FAQ
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/chat-conversation.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/faq/faq19.tsx instead.

Usage

The file also exports faq19Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Faq19, faq19Demo } from "@/components/blocks/faq/faq19";

export default function Page() {
  return <Faq19 {...faq19Demo} />;
}

Props

PropTypeDefaultDescription
headingstring"Frequently asked questions"Section heading.
descriptionstring"Straight answers, in plain conversation."Supporting copy under the heading.
itemsChatFaqItem[]noneQuestion/answer pairs with their own timestamps.
classNamestringnoneExtra classes for the outer section element.

Types

interface ChatFaqItem {
  question: string;
  answer: string;
  questionTime: string;
  answerTime: string;
}

Behavior notes

  • Fully static and always visible, there's no input box, typing indicator, or send button, just a rendered conversation.
  • Timestamps are plain strings passed in via props, never generated with `new Date()` at render time.
  • Question bubbles use the primary color to read as the user's messages, answer bubbles use a neutral muted background to read as the other side of the conversation.