Seasonal Hover Cards

A set of cards that change their appearance based on the current season.

How to Import

Add this import to your component file

app/page.tsx

1import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

cards	object[]	-	An array of card objects to display in the gallery.	Optional
className	string	-	Additional CSS classes to apply to the gallery.	Optional

Basic Usage

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

app/page.tsx

1import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards";
2
3export function SeasonalHoverCardsDemo() {
4  return <SeasonalHoverCards />;
5}

Variants

Different visual and behavioral variants of the component

Default Variant

The standard seasonal hover cards with default styling.

Preview not available for this example.

Previousscroll-timeline

Nextslide-to-confirm

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

Seasonal Hover Cards

A set of cards that change their appearance based on the current season.

...

How to Import

Add this import to your component file

app/page.tsx

1import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

cards	object[]	-	An array of card objects to display in the gallery.	Optional
className	string	-	Additional CSS classes to apply to the gallery.	Optional

Basic Usage

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

app/page.tsx

1import { SeasonalHoverCards } from "@/components/lightswind/seasonal-hover-cards";
2
3export function SeasonalHoverCardsDemo() {
4  return <SeasonalHoverCards />;
5}

Variants

Different visual and behavioral variants of the component

Default Variant

The standard seasonal hover cards with default styling.

Preview not available for this example.

Previousscroll-timeline

Nextslide-to-confirm

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

Seasonal Hover Cards

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Seasonal Hover Cards

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

React Seasonal Hover Cards Component - Lightswind UI

Key Details of React Seasonal Hover Cards

Seasonal Hover Cards

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute

Seasonal Hover Cards

How to Import

Props

Basic Usage

Variants

Default Variant

On This Page

Contribute