Conversation UI Component

A lightweight chat bubble component with dark mode support and multiple color variants.

Features

  • check_circle Three color variants: blue, green, and purple
  • check_circle Dark mode support out of the box
  • check_circle Tailwind CSS styling
  • check_circle Responsive design

Installation

1. Clone the repository:

Terminal window
git clone https://github.com/aqz-saito/astro.aqz.jp.git

2. Copy the component to your project:

components/

└── Conversation.astro

3. Import and use:

import Conversation from '@/components/Conversation.astro';
code View source on GitHub

Examples

Basic Usage

<Conversation>
  This is a basic conversation bubble.
</Conversation>

PREVIEW

This is a basic conversation bubble.

Color Variants

<Conversation variant="blue">Blue theme</Conversation>
<Conversation variant="green">Green theme</Conversation>
<Conversation variant="purple">Purple theme</Conversation>

PREVIEW

Blue theme
Green theme
Purple theme

Use Cases

Chat Messages

<Conversation variant="blue">
  Hey there! How can I help you today?
</Conversation>
<Conversation variant="purple">
  I'd like to learn more about your services.
</Conversation>

PREVIEW

Hey there! How can I help you today?
I'd like to learn more about your services.

Tips & Notifications

<Conversation variant="green">
  Pro Tip: You can use keyboard shortcuts to navigate faster!
</Conversation>

PREVIEW

Pro Tip: You can use keyboard shortcuts to navigate faster!