Shine Button

A reusable, customizable button component with a professional animated gradient shine effect. Supports solid hex or gradient backgrounds, responsive sizing, and full Tailwind CSS compatibility. Ideal for call-to-action or donation prompts.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ShineButton } from '@/components/lightswind/shine-button';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

label	string	`"Shine Button"`	Text to display inside the button.	Optional
onClick	() => void	`undefined`	Click handler function triggered on button press.	Optional
className	string	`''`	Optional Tailwind CSS classes for button customization.	Optional
size	"sm" \| "md" \| "lg"	`"md"`	Controls padding and font size of the button.	Optional
bgColor	string	`linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)`	Sets background. Accepts solid hex (e.g. `#10b981`) or full CSS gradient string.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ShineButton } from '@/components/lightswind/shine-button';
2
3<ShineButton 
4  label="Donate Now" 
5  size="lg" 
6  bgColor="linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)" 
7  onClick={() => alert('Thanks for your support!')} 
8/>

Previousripple-button

Nextstardust-button

A product byＭＵＨＩＬＡＮ and Team❤️.

Shine Button

A reusable, customizable button component with a professional animated gradient shine effect. Supports solid hex or gradient backgrounds, responsive sizing, and full Tailwind CSS compatibility. Ideal for call-to-action or donation prompts.

...

How to Import

Add this import to your component file

app/page.tsx

1import { ShineButton } from '@/components/lightswind/shine-button';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

label	string	`"Shine Button"`	Text to display inside the button.	Optional
onClick	() => void	`undefined`	Click handler function triggered on button press.	Optional
className	string	`''`	Optional Tailwind CSS classes for button customization.	Optional
size	"sm" \| "md" \| "lg"	`"md"`	Controls padding and font size of the button.	Optional
bgColor	string	`linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)`	Sets background. Accepts solid hex (e.g. `#10b981`) or full CSS gradient string.	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import { ShineButton } from '@/components/lightswind/shine-button';
2
3<ShineButton 
4  label="Donate Now" 
5  size="lg" 
6  bgColor="linear-gradient(325deg, hsl(217 100% 56%) 0%, hsl(194 100% 69%) 55%, hsl(217 100% 56%) 90%)" 
7  onClick={() => alert('Thanks for your support!')} 
8/>

Previousripple-button

Nextstardust-button

A product byＭＵＨＩＬＡＮ and Team❤️.

Shine Button

How to Import

Props

Basic Usage

On This Page

Contribute

Shine Button

How to Import

Props

Basic Usage

On This Page

Contribute

React Shine Button Component - Lightswind UI

Key Details of React Shine Button

Shine Button

How to Import

Props

Basic Usage

On This Page

Contribute

Shine Button

How to Import

Props

Basic Usage

On This Page

Contribute