UseCase

The UseCase component highlights a key product use case by mimicking a short message exchange over a background image. It supports two chat-style message bubbles, each with an optional source label.

Default

This example shows a typical use case with two chat messages representing a conversation between users.

Use case: Marketplace

Buyer

Is this still available? And can we arrange local pickup?

Seller

Yes, I’m in Amsterdam city center most evenings!

<UseCase
  useCase="Marketplace"
  source1="Buyer"
  description1="Is this still available? And can we arrange local pickup?"
  source2="Seller"
  description2="Yes, I’m in Amsterdam city center most evenings!"
  image="/images/img-sample.jpg"
  href="/docs/Use_Cases/Marketplace"
/>

Usage

Import the component and pass in up to two messages and optional source labels to simulate a chat-style UI.

import UseCase from "../../components/UseCase";