Premium & Brand

Spotlight Card

Cursor-following spotlight.

Import

tsx

import { SpotlightCard } from "@cronus-ui/ui";

bash

npx cronus-ui add spotlight-card

Examples

Hover spotlight

A radial spotlight tracks your cursor across the card — hover anywhere over it to bring the surface to life.

Accessible core

Radix primitives and focus-visible rings ship on by default.

tsx

<SpotlightCard className="flex flex-col gap-3 p-5">
  <span className="grid size-9 place-items-center rounded-lg bg-surface-overlay text-primary">
    <Gauge className="size-4" aria-hidden="true" />
  </span>
  <h3 className="font-display text-base font-semibold text-fg">Accessible core</h3>
  <p className="text-sm text-fg-secondary">
    Radix primitives and focus-visible rings ship on by default.
  </p>
</SpotlightCard>