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.

Live Preview
Open in
gsap

Props

Prop NameTypeDefaultDescription
itemsstring[][]Array of promotional messages or items to display.
randomizebooleanfalseIf true, picks a random item on mount.
defaultIndexnumber0The starting index to display when randomize is false.
intervalnumberundefinedOptional. If provided, cycles through items every interval ms.
classNamestring""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}
/>