Halo Card
Composable card for React and shadcn/ui with an animated gradient rim, frosted surface, and header, content, and footer slots.
Updated
Composable card
Header, content, and footer slots share the same gradient rim and frosted surface as the polished search field. Footer actions use HaloCardButton so labels stay high-contrast in dark mode.
Use HaloCardContent for the main body between the header and footer. Tab through the header action or footer buttons to see focus-within on the rim.
- HaloCardHeader — title, description, optional action
- HaloCardFooter — primary actions aligned to the end
Minimal layout
Title and description only — no content slot or footer. Same rim and hover behavior.
Halo Card is a composable React card component for shadcn/ui and part of the Halo kit. Use it to highlight a featured plan, an announcement, or an AI result panel on landing pages and dashboards.
Installation
pnpm dlx shadcn@latest add @cult-ui/halo-card