Spotlight Card

New

A glow and a lit border that follow the pointer

$ npx @hritik-sharmaa/repeat-ui add card-spotlight-card

Category: Card
Added: Nov 1, 2026
Version: 1.0.0
Packages: None
Flavors: TS · JS · Tailwind · CSS

Live preview

Copy

Find a component you like and copy it straight from the page.

Paste

Drop it into your app. It is your code now, so change anything.

Repeat

Come back for the next one. Every piece fits with the last.

Customize

Title

Description

Glow

Background

Text

Light size320px

Radius24px

Border glow

import CardSpotlightCard from "@/components/repeat-ui/card-spotlight-card/preview";

<CardSpotlightCard title="Copy" description="Find a component you like and copy it straight from the page." />

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add card-spotlight-card --variant ts-tailwind

Use it

The files are in components/repeat-ui/card-spotlight-card/.

import CardSpotlightCard from "@/components/repeat-ui/card-spotlight-card/preview";

export default function Page() {
  return <CardSpotlightCard />;
}

Props

Prop	Type	Default	Description
`title`	`string`	"Copy"	Card heading.
`description`	`string`	"Find a component you like and copy it straight from the page."	Card text.
`icon`	`ReactNode`	-	Shown in a tinted tile above the title.
`children`	`ReactNode`	-	Extra content under the text.
`glowColor`	`string`	"#fa5f1b"	Colour of the light and the lit border.
`background`	`string`	"#0a0a0a"	Card background.
`textColor`	`string`	"#fafafa"	Text colour.
`spotlightSize`	`number`	320	Diameter of the light, in pixels.
`radius`	`number`	24	Corner radius in pixels.
`borderGlow`	`boolean`	true	Light up the border near the pointer.
`className`	`string`	""	Extra classes for the root element.

More card

See all

3d CardInteractive 3D card with hover tilt effects

Pricing CardElegant pricing plan showcase card

Profile CardBeautiful user profile display card