Lamphome

A stylish, animated header component with dark/light mode toggle functionality.

Pull to toggle theme!

SCROLLX UI

An open-source collection of animated, interactive & fully customizable components for building stunning, memorable user interfaces.

View Components

Installation

npx shadcn@latest add https://scrollxui.dev/registry/lamphome.json

Usage Examples

Basic Usage

import { Lamphome } from "@/components/ui/Lamphome";
 
export default function MyPage() {
  return <Lamphome />;
}

With Custom Title and Description

import { Lamphome } from "@/components/ui/Lamphome";
 
export default function MyPage() {
  return (
    <Lamphome
      title={title}
      description={description}
      logoSrc={logo.src}
      logoAlt={logo.alt}
      navItems={navItems}
      className="bg-gray-50 dark:bg-neutral-900"
    >
      {content}
    </Lamphome>
  );
}

With Child Components

import { Lamphome } from "@/components/ui/Lamphome";
import { MyComponent } from "@/components/MyComponent";
 
export default function MyPage() {
  return (
    <Lamphome>
      <MyComponent />
      <div className="my-custom-content">
        Additional content here
      </div>
    </Lamphome>
  );
}

API Reference

Lamphome

The root container for the Lamphome component. A stylish, animated header component with dark/light mode toggle functionality.

Props

Property	Type	Default	Description
`title`	string	`"SCROLLX UI"`	Main heading displayed in the component.
`description`	string	`"An open-source collection."`	Descriptive text displayed below the title.
`logoSrc`	string	`optional`	URL or path for the logo image displayed on the navbar.
`logoAlt`	string	`"Logo"`	Alt text for the logo image.
`navItems`	Array<{ href: string; label: string }>	`[]`	Navigation links rendered in the navbar.
`children`	ReactNode	`optional`	Custom content rendered below the description.
`className`	string	`""`	Additional custom CSS classes for the root container.

Integration with next-themes

This component is designed to work with the ThemeProvider from next-themes. Ensure you have this provider set up in your layout file:

// In your layout.tsx
import { ThemeProvider } from "next-themes";
 
export default function RootLayout({ children }) {
  return (
    <ThemeProvider
      attribute="class"
      defaultTheme="system"
      enableSystem
      disableTransitionOnChange
    >
      {children}
    </ThemeProvider>
  );
}

Styling

The component uses Tailwind CSS for styling with automatic dark mode support via the dark: variant. It leverages CSS transitions and Framer Motion animations for smooth visual effects.