jelly card

preview

strawberry

sweet and delicious

blueberry

sweet and delicious

lime

sweet and delicious

lemon

sweet and delicious

usage

Compose card title and description helpers inside a tinted container for small feature panels.

import { JellyCard, JellyCardDescription, JellyCardTitle } from "@/components/jelly/jelly-card"

export function FlavorCard() {
  return (
    <JellyCard color="blue" hoverable>
      <JellyCardTitle>blueberry</JellyCardTitle>
      <JellyCardDescription>sweet and delicious</JellyCardDescription>
    </JellyCard>
  )
}

setup notes

Requires React, TypeScript, Tailwind CSS, and the included cn helper. No additional animation setup is required.

props

prop	type	default	purpose
color	"pink" \| "blue" \| "green" \| "yellow" \| "orange" \| "red" \| "clear"	"clear"	Sets the pastel surface tint.
hoverable	boolean	false	Enables a subtle lift on hover.
children	ReactNode	-	Sets the card contents.