Glass Morphic Tabs

Dashboards

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Glass Morphic Tabs to your project and fits it to your theme.

Code

How Glass Morphic Tabs is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

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>
  );
}