Halo Card

Renders a card with animated gradient rim, frosted effects, and layered shadows. It updates visuals based on user interaction. Use for visually engaging card components with dynamic highlights.

byjordan from Cult UI

Installation

terminal

pnpm dlx layro-cli add @nolly-studio/halo-card

npx layro-cli add @nolly-studio/halo-card

npx layro-cli add @nolly-studio/halo-card

bunx layro-cli add @nolly-studio/halo-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client"

/**
 * Composable card matching `HaloSearchInput` / `HaloButtonPolished`:
 * animated gradient rim, frosted fill, layered shadow, fine-hover polish.
 *
 * @example
 * <HaloCard aria-label="Example">
 *   <HaloCardHeader>
 *     <HaloCardTitle>Title</HaloCardTitle>
 *     <HaloCardDescription>Body copy.</HaloCardDescription>
 *   </HaloCardHeader>
 *   <HaloCardContent>Optional main area.</HaloCardContent>
 *   <HaloCardFooter>