Shiny Card

A card component with a shimmering shiny border effect.

Preview

Shiny Card

A subtle shimmer effect.

The border of this card has a passing shine animation, perfect for highlighting elements without being too distracting.

Installation

Use the CLI to add this component to your project.

npx shadcn@latest add https://ui.nyxhora.com/r/shiny-card.json

Usage

tsx
9 lines
1
2
3
4
5
6
7
8
9
import { ShinyCard } from "@/components/ui/shiny-card";

export default function Example() {
  return (
    <ShinyCard>
      Content goes here
    </ShinyCard>
  );
}

Props

PropTypeDefaultDescription
shimmerWidthnumber100The width of the shimmer effect in pixels
classNamestring—Additional CSS classes