I'll create a reusable liquid glass tabs component with smooth animations and a modern glassmorphism effect.
The LiquidGlassTabs component is designed to be highly reusable and customizable. Here's how to use it:
import { LiquidGlassTabs } from "@/components/liquid-glass-tabs"
import { Home, Settings } from 'lucide-react'
// Define your tabs
const tabs = [
{
label: "Home",
icon: <Home className="w-4 h-4" />,
content: <div>Home content goes here</div>
},
{
label: "Settings",
icon: <Settings className="w-4 h-4" />,
content: <div>Settings content goes here</div>
}
]
// Use the component
<LiquidGlassTabs
tabs={tabs}
variant="primary"
defaultActiveTab={0}
className="my-custom-class"
/>The component uses Framer Motion for animations and Tailwind CSS for styling, creating a modern UI element that can be easily integrated into any React project.
I'll enhance the liquid glass tabs component to change the background color or gradient when switching between tabs. This will help you test if the tab changes are affecting the background properly.
I've enhanced the liquid glass tabs component to change the background color when switching between tabs. Here's what I've added:
Background Changing Feature:
background property that defines its gradientNew Props:
onChange: A callback function that fires when a tab is selectedDemo Implementation:
AnimatePresence for a fade effect// Define tabs with background properties
const tabs = [
{
label: "Home",
icon: <Home className="w-4 h-4" />,
content: <div>Home content</div>,
background: "bg-gradient-to-br from-violet-600 to-indigo-800"
},
{
label: "Profile",
icon: <User className="w-4 h-4" />,
content: <div>Profile content</div>,
background: "bg-gradient-to-br from-rose-500 to-purple-700"
}
]
// Track the active tab in your component
const [activeTab, setActiveTab] = useState(0)
// Use the component with onChange handler
<LiquidGlassTabs
tabs={tabs}
variant="primary"
onChange={(index) => setActiveTab(index)}
/>
// Apply the background based on active tab
<div className={tabs[activeTab].background}>
{/* Your content */}
</div>This implementation allows you to easily test if the tab changes are properly affecting the background. The transitions are smooth and visually appealing, enhancing the liquid glass effect of the component.