Question 1

How do I install the Variable Shadow Text component?

Accepted Answer

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

Question 2

Is the Variable Shadow Text component accessible?

Accepted Answer

Yes, the Variable Shadow 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 Variable Shadow Text component?

Accepted Answer

Absolutely! The Variable Shadow 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 Variable Shadow Text component work with Next.js?

Accepted Answer

Yes, all Nyxhora UI components including Variable Shadow 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.
`shadowColors`	`string[]`	`['#07bccc', ...]`	Array of 5 colors for the shadow layers.
`strokeColor`	`string`	`#d6f4f4`	Color of the text stroke.
`reverse`	`boolean`	`false`	If true, effect expands on hover instead of collapsing.
`className`	`string`	`-`	Class for the text element (mainly font-size).

Variable Shadow Text

Preview

HOVER ME

Reverse Mode

EXPAND

Custom Colors

CYBER

Installation

Props