Glowing white butterflies on a dark background

Striped Card

An image card surrounded by four diagonal striped bands. The bands extend past the corners, cross each other, and fade softly at their ends.

Installation

bunx shadcn@latest add https://ui.razeev.com/r/striped-card.json

Usage

tsx

import { StripedCard } from "@/components/hangry-ui/components/striped-card";

<div className="overflow-hidden px-12 py-24">
  <StripedCard src="/1.png" alt="Glowing white butterflies" />
</div>

Props

src: Image URL. Defaults to /1.png from the public directory.
alt: Image description. Supply alt text matching your own artwork.
children: Optional React content instead of the image.
className: Additional classes on the wrapper. Defaults to 288px wide with a 9:10 image ratio.
Native div attributes are forwarded to the wrapper.

Setup notes

Uses the existing Card and AspectRatio components. Stripes follow the border token and work in light and dark themes. The decorative bands do not intercept pointer events and are hidden from assistive technology.

Leave space around the card for the extended stripes and clip overflow on the surrounding section when needed. This static component is memoized and server-compatible, with no animation dependency.