Header Pro Toggle
A promotional header component with random or rotating item selection.
The HeaderPro component renders a dynamic right-aligned header section with:
- A randomized promotional link (like FingUI Boilerplate or FingUI UI Pro).
- Action buttons (e.g., GitHub, LinkedIn).
- Responsive layouts for mobile vs. desktop.
- Full customization via props.
gsap
Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
items | string[] | [] | Array of promotional messages or items to display. |
randomize | boolean | false | If true, picks a random item on mount. |
defaultIndex | number | 0 | The starting index to display when randomize is false. |
interval | number | undefined | Optional. If provided, cycles through items every interval ms. |
className | string | "" | Custom CSS classes for styling the container. |
Example Usage
1. Randomized Once
<HeaderProToggle
items={[
"π Welcome to FingUI!",
"π Supercharge your workflow.",
"β¨ Elegant components for devs."
]}
randomize={true}
/>Footer 3d
The Footer is a reusable and dynamic component built with React, Tailwind CSS, and React Three Fiber. It includes a customizable 3D background model (default animated Cube) and flexible content areas for links, socials, and credits.
Navbar v1
A dynamic and reusable Navbar component with customizable links, logos, and actions.