Comet Card

New

An image card with hover zoom, optional rotating gradient border, and 3D tilt effect that responds to cursor position.

Default Variant

Simple image card with smooth hover zoom. No border effects.

Featured

Mountain Vista

Serene alpine landscape bathed in golden hour light.

Popular

Starlit Peaks

A breathtaking view of snow-capped mountains under the night sky.

Forest Mist

Fog rolling through a dense old-growth forest at dawn.

Comet Variant

Interactive

Hover over the cards to reveal the rotating rainbow border and 3D tilt effect. Click any card to test the click handler.

Featured

Mountain Vista

Serene alpine landscape bathed in golden hour light.

Popular

Starlit Peaks

A breathtaking view of snow-capped mountains under the night sky.

Forest Mist

Fog rolling through a dense old-growth forest at dawn.

New

Ocean Horizon

Where the sea meets the sky in an infinite gradient of blue.

Installation

Install the comet-card component via the shadcn CLI:

bash

npx shadcn@latest add "https://dexterityui.vercel.app/r/comet-card.json"

No additional dependencies required beyond clsx and tailwind-merge.

Props

Prop	Type	Description
`imageUrl`required	`string`	URL of the card image.
`title`required	`string`	Card title displayed below the image.
`description`required	`string`	Short description text.
`badge`	`string`	Optional badge text overlaid on the image.
`variant`	`"default" \| "comet"`	Card style variant. Defaults to "default".
`onClick`	`MouseEventHandler`	Click handler — makes the card interactive & keyboard-navigable.
`imageAlt`	`string`	Custom alt text for the image. Defaults to title.
`className`	`string`	Additional classes merged via cn().

Accessibility

When onClick is provided the card renders role="button" and tabIndex={0}.

Focus ring appears on keyboard focus via focus-visible.

Enter and Space keys trigger the click handler.

Images always have descriptive alt text.

Decorative gradient border is marked aria-hidden.

Source

tsx

"use client";
import * as React from "react";
import { cn } from "@/lib/utils";

export interface CometCardProps extends React.HTMLAttributes<HTMLDivElement> {
  imageUrl: string;
  title: string;
  description: string;
  badge?: string;
  variant?: "default" | "comet";
  onClick?: React.MouseEventHandler<HTMLDivElement>;
  imageAlt?: string;
}

const CometCard = React.forwardRef<HTMLDivElement, CometCardProps>(
  ({ imageUrl, title, description, badge, variant = "default",
     onClick, imageAlt, className, ...props }, ref) => {
    // ... full source at registry/default/comet-card/comet-card.tsx
  }
);