Bubble Card

A soft, rounded card component with pastel color variants and optional animations.

Preview

Hello Bubble

This is a soft, rounded card.

Usage

import { BubbleCard } from "@/components/profile"

<BubbleCard variant="pink" hover press>
  <h3>Card Title</h3>
  <p>Card content goes here</p>
</BubbleCard>

Variants

pink

sky

mint

peach

lavender

white

<BubbleCard variant="pink">Pink card</BubbleCard>
<BubbleCard variant="sky">Sky card</BubbleCard>
<BubbleCard variant="mint">Mint card</BubbleCard>
<BubbleCard variant="peach">Peach card</BubbleCard>
<BubbleCard variant="lavender">Lavender card</BubbleCard>
<BubbleCard variant="white">White card</BubbleCard>

Interactive States

Add hover and press animations for interactive cards.

Hover Effect

hover={true}

Press Effect

press={true}

Both Effects

hover + press

<BubbleCard hover>Hover only</BubbleCard>
<BubbleCard press>Press only</BubbleCard>
<BubbleCard hover press>Both effects</BubbleCard>

Props

Prop	Type	Default	Description
variant	"pink" \| "sky" \| "mint" \| "peach" \| "lavender" \| "white"	"white"	Background color variant
hover	boolean	false	Enable hover scale animation
press	boolean	false	Enable press/tap scale animation
className	string	-	Additional CSS classes
children	React.ReactNode	-	Card content

Examples

Profile Card

Sarah Creative

@sarahcreative

Feature Card

Premium Feature

Unlock advanced customization options

Stats Card

12.5K

Monthly visitors