Trial Button

A reusable, animated button component with a shiny gradient effect. It integrates Tailwind CSS for base styling and custom CSS for advanced gradient animations, pseudo-elements for shimmer effects, and hover/focus interactions. Supports light and dark themes automatically.

...

How to Import

Add this import to your component file

app/page.tsx

1import { TrialButton } from '@/components/lightswind/trial-button';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

children	React.ReactNode	-	The text or elements to display inside the button.	Required
onClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	-	Callback function that runs when the button is clicked.	Optional
className	string	-	Additional Tailwind or custom CSS classes to apply to the button.	Optional
disabled	boolean	false	Disables the button and prevents interactions.	Optional

Basic Usage

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

app/page.tsx

1import { TrialButton } from '@/components/lightswind/trial-button';
2
3<TrialButton onClick={() => console.log("Trial started!")}>
4  Start Free Trial
5</TrialButton>

Previousstardust-button

Nextcanvas-confetti-cursor

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

Trial Button

A reusable, animated button component with a shiny gradient effect. It integrates Tailwind CSS for base styling and custom CSS for advanced gradient animations, pseudo-elements for shimmer effects, and hover/focus interactions. Supports light and dark themes automatically.

...

How to Import

Add this import to your component file

app/page.tsx

1import { TrialButton } from '@/components/lightswind/trial-button';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

children	React.ReactNode	-	The text or elements to display inside the button.	Required
onClick	(event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void	-	Callback function that runs when the button is clicked.	Optional
className	string	-	Additional Tailwind or custom CSS classes to apply to the button.	Optional
disabled	boolean	false	Disables the button and prevents interactions.	Optional

Basic Usage

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

app/page.tsx

1import { TrialButton } from '@/components/lightswind/trial-button';
2
3<TrialButton onClick={() => console.log("Trial started!")}>
4  Start Free Trial
5</TrialButton>

Previousstardust-button

Nextcanvas-confetti-cursor

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

Trial Button

How to Import

Props

Basic Usage

On This Page

Contribute

Trial Button

How to Import

Props

Basic Usage

On This Page

Contribute

React Trial Button Component - Lightswind UI

Key Details of React Trial Button

Trial Button

How to Import

Props

Basic Usage

On This Page

Contribute

Trial Button

How to Import

Props

Basic Usage

On This Page

Contribute