Question 1

How do I install the Spotlight Text component?

Accepted Answer

You can install the Spotlight Text component using the shadcn CLI: npx shadcn@latest add "https://ui.nyxhora.com/r/spotlight-text.json". Alternatively, copy the component code directly from the documentation.

Question 2

Is the Spotlight Text component accessible?

Accepted Answer

Yes, the Spotlight Text component is built with accessibility in mind using Radix UI primitives. It supports keyboard navigation, screen readers, and follows WCAG guidelines.

Question 3

Can I customize the Spotlight Text component?

Accepted Answer

Absolutely! The Spotlight Text component is fully customizable using Tailwind CSS classes. You can modify colors, sizes, animations, and more by editing the component code or passing custom className props.

Question 4

Does the Spotlight Text component work with Next.js?

Accepted Answer

Yes, all Nyxhora UI components including Spotlight Text are fully compatible with Next.js 14+ (including Next.js 15), supporting both the App Router and Pages Router.

Prop	Type	Default	Description
`text`	`string`	`-`	The text to display.
`spotlightColors`	`string[]`	`['#3b82f6', '#ef4444', '#22c55e']`	Array of 3 colors for the spotlight shapes.
`containerClassName`	`string`	`-`	Class for the outer container.
`className`	`string`	`-`	Class for the text element.

Spotlight Text

Preview

Spotlight

Custom Colors

Neon

Custom Container

Explore

Installation

Props