Premium glass morphic tabs component with live indicators and magnetic cursor effects. Features frosted glass design, animated status dots, notification badges, and smooth spring physics animations. Perfect for dashboards, admin panels, and modern web applications.
import React, { useState } from 'react';
import GlassMorphicTabs from '../components/ui/glass-morphic-tabs';
export default function Demo() {
const [activeTab, setActiveTab] = useState(0);
const tabs = [
{ label: 'Dashboard', status: 'online', badge: '3' },
{ label: 'Analytics', status: 'busy', badge: '12' },
{ label: 'Users', status: 'away', badge: '247' },
{ label: 'Settings', status: 'offline' },
{ label: 'Reports', status: 'online', badge: '5' },
{ label: 'Messages', status: 'busy', badge: '99+' }
];
const handleTabChange = (index: number) => {
setActiveTab(index);
};
return (
<div style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
minHeight: '100vh',
padding: '40px 20px',
background: '#0a0a0a'
}}>
<GlassMorphicTabs
tabs={tabs}
activeTab={activeTab}
onTabChange={handleTabChange}
showStatusDots={true}
variant="premium"
size="medium"
showGlow={false}
magneticStrength={0.6}
/>
</div>
);
}