Bubble

A customizable, pixel-art styled speech bubble component.

Basic Usage

import { Bubble } from 'pixel-retroui';

function App() {
  return (
    <Bubble direction="left">
      Hello, I'm a speech bubble!
    </Bubble>
  );
}

Props

Prop	Type	Default	Description
direction	"left" \| "right"	-	Direction of the bubble tail
bg	string	'#ffffff'	Background color of the bubble
textColor	string	'#000000'	Text color of the bubble
borderColor	string	'#000000'	Border color of the bubble
onClick	function	undefined	Function to call when the bubble is clicked
className	string	''	Additional CSS classes to apply to the bubble

Custom Bubble

Customize your bubble's appearance by selecting a preset theme or creating your own color scheme.

Theme: pop

pop

Hello, I'm a speech bubble!

<Bubble
  direction="left"
  bg="#fefcd0"
  textColor="black"
  borderColor="black"
>
  Hello, I'm a speech bubble!
</Bubble>

Additional Examples

With Custom Styling

<Bubble
  direction="left"
  bg="#d1edda"
  textColor="#44573c"
  borderColor="#44573c"
  className="p-1"
>
  I'm a custom styled bubble!
</Bubble>

Preview:

I'm a custom styled bubble!

With onClick Event

<Bubble
  direction="left"
  onClick={() => alert('Bubble clicked!')}
>
  Click me!
</Bubble>

Preview:

Click me!

Usage Tips

Use the direction prop to control which side the bubble's tail appears on.
Adjust the bg, textColor, and borderColor props to match your app's theme.
Utilize the onClick prop to make your bubbles interactive.
The className prop allows for additional custom styling if needed.