Orbit Card

A visually enhanced card component with a pulsing orbit-style glowing background animation. Built using React, Tailwind CSS, and CSS-in-JSX keyframes. Ideal for showcasing premium features, callouts, or spotlight sections.

...

How to Import

Add this import to your component file

app/page.tsx

1import OrbitCard from '@/components/lightswind/orbit-card';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

children	React.ReactNode	-	The content to render inside the orbit card. Typically includes icons, text, and interactive elements like buttons.	Required
className	string	-	Optional additional Tailwind CSS class names to customize the outer card container.	Optional

Basic Usage

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

app/page.tsx

1import OrbitCard from '@/components/lightswind/orbit-card';
2import { Crown } from 'lucide-react';
3
4<OrbitCard>
5  <div className="flex flex-col items-center text-center">
6    <Crown className="w-8 h-8 text-yellow-500 mb-3" />
7    <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
8      Unlock Premium Access
9    </h2>
10    <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
11      Gain priority access to new features, exclusive tools, and member-only resources.
12    </p>
13    <button className="px-4 py-2 rounded-lg bg-primarylw text-white hover:bg-primarylw-2 transition duration-300 text-sm font-medium">
14      Upgrade Now
15    </button>
16  </div>
17</OrbitCard>;

Previousmorphing-navigation

Nextpassword-strength-indicator

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

Orbit Card

A visually enhanced card component with a pulsing orbit-style glowing background animation. Built using React, Tailwind CSS, and CSS-in-JSX keyframes. Ideal for showcasing premium features, callouts, or spotlight sections.

...

How to Import

Add this import to your component file

app/page.tsx

1import OrbitCard from '@/components/lightswind/orbit-card';

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

children	React.ReactNode	-	The content to render inside the orbit card. Typically includes icons, text, and interactive elements like buttons.	Required
className	string	-	Optional additional Tailwind CSS class names to customize the outer card container.	Optional

Basic Usage

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

app/page.tsx

1import OrbitCard from '@/components/lightswind/orbit-card';
2import { Crown } from 'lucide-react';
3
4<OrbitCard>
5  <div className="flex flex-col items-center text-center">
6    <Crown className="w-8 h-8 text-yellow-500 mb-3" />
7    <h2 className="text-xl font-bold text-gray-900 dark:text-white mb-1">
8      Unlock Premium Access
9    </h2>
10    <p className="text-sm text-gray-600 dark:text-gray-300 mb-4">
11      Gain priority access to new features, exclusive tools, and member-only resources.
12    </p>
13    <button className="px-4 py-2 rounded-lg bg-primarylw text-white hover:bg-primarylw-2 transition duration-300 text-sm font-medium">
14      Upgrade Now
15    </button>
16  </div>
17</OrbitCard>;

Previousmorphing-navigation

Nextpassword-strength-indicator

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

Orbit Card

How to Import

Props

Basic Usage

On This Page

Contribute

Orbit Card

How to Import

Props

Basic Usage

On This Page

Contribute

React Orbit Card Component - Lightswind UI

Key Details of React Orbit Card

Orbit Card

How to Import

Props

Basic Usage

On This Page

Contribute

Orbit Card

How to Import

Props

Basic Usage

On This Page

Contribute