Design system
Bring attention to the work, not the container
A soft, cursor-led glow gives this card presence while its content remains readable and its actions stay easy to reach.
Spotlight Card
A free card component with a soft cursor-led spotlight.
- Automated axe check
- Reduced-motion tested
- SSR build verified
- CSS and React
- No runtime packages
Spotlight Card is a free card component for Next.js and React, styled with Tailwind, that adds a soft glow and lit border beneath a fine-pointer cursor. It keeps every child fully readable without hover, JavaScript or motion, so the decoration never carries meaning or blocks interaction.
The card is CSS driven: a small client enhancement writes CSS custom properties for the cursor position without React re-renders. On touch devices no pointer listener is attached, and reduced-motion users receive the same complete, static card content.
Explore the system
Install
Add the @te registry to your components.json once:
{
"registries": {
"@te": "https://templateempire.io/r/{name}.json"
}
}Then install the component:
npx shadcn@latest add @te/card-spotlightUsage
import { CardSpotlight } from "@/components/ui/card-spotlight";
export default function Page() {
return (
<CardSpotlight className="max-w-md">
<article className="space-y-3 p-6">
<h2 className="text-xl font-semibold">A card with focus</h2>
<p className="text-muted">Your content stays clear without hover.</p>
</article>
</CardSpotlight>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | required | Card content. It owns its own spacing and semantics. |
| className | string | undefined | Additional classes merged onto the card root. |
Customisation
Use the card’s Tier 3 CSS custom properties to retheme the decorative glow or change its diameter. The card keeps its semantic background and border tokens, while these values affect only the non-interactive spotlight layers.
:root {
--card-spot-color: var(--color-accent-400);
--card-spot-size: 400px;
}Frequently asked questions
- Is Spotlight Card free for commercial use?
- Yes. Spotlight Card is MIT licensed, so you can use it in personal and commercial projects without attribution.
- Is Spotlight Card accessible and performant?
- Yes. The spotlight is decorative, cannot intercept pointer events and never affects content contrast or keyboard focus. Fine-pointer movement writes CSS custom properties directly rather than causing React renders, while touch and reduced-motion users keep a complete static card.
- How do I customise the Spotlight Card glow?
- Set --card-spot-color to a design-token colour and --card-spot-size to the desired diameter in your CSS. These variables control only the glow and border highlight, leaving the card content and semantic tokens intact.