Glass Floating
Glassmorphism tabs with floating effect.
Main Features of Glass Floating
How to Use Glass Floating in Next.js
Installation Guide for Glass Floating
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
tabs | TabItem[] | [{id: '1', label: 'Option 1'}, ...] | Array of tab items with id and label. |
backgroundImage | string | url | Background image URL for the container. |
defaultActive | number | 0 | Index of the initially active tab. |
backgroundColor | string | transparent | Background color of the component (hex, rgb, or hsl). |
containerHeight | string | 16rem | Height of the container (CSS value). |
containerWidth | string | 100% | Width of the container (CSS value). |
containerMaxWidth | string | 28rem | Maximum width of the container (CSS value). |
borderRadius | string | 1rem | Border radius of the container (CSS value). |
buttonBgColor | string | transparent | Background color of tab buttons (hex, rgb, or hsl). |
buttonHoverBgColor | string | rgba(255,255,255,0.2) | Background color of buttons on hover (hex, rgb, or hsl). |
buttonTextColor | string | #ffffff | Text color of tab buttons (hex, rgb, or hsl). |
activeIndicatorBgColor | string | rgba(255,255,255,0.3) | Background color of the active indicator (hex, rgb, or hsl). |
buttonBorderRadius | string | 9999px | Border radius of buttons (CSS value). |
buttonPadding | string | 0.5rem 1rem | Padding of tab buttons (CSS value). |
fontSize | string | 0.75rem | Font size of tab labels (CSS value). |
fontWeight | string | bold | Font weight of tab labels (CSS value). |
Related Components
When to Use
Ideal for high-end digital agencies, creative portfolios, and Next.js applications that want a premium 'Floating Glass' aesthetic. Use these tabs for an immersive experience with blur effects and light refraction cues.
Best Practices
Maintain consistent spacing within your design system by keeping the tab items organized. Follow React best practices by pairing this with soft, neutral colors. Optimize for performance by managed the amount of blur renders.
Why This Component Matters in Modern UI Development
Glass-based aesthetics communicate digital excellence, sophistication, and high-end craft. This production-ready UI template helpsคุณ build an interface that feels curated and premium, leaving a lasting visual impression on high-value clients.
Frequently Asked Questions
QIs the 'Glass' effect real?
The component uses localized backdrop-filter blur and subtle inner glows (glass-shadows) to simulate light refraction through high-fidelity translucent surfaces.
QCan I change the backdrop?
Absolutely, both the primary 'backgroundColor' (gradient or solid) and the persistent blur intensity are fully configurable to match your digital brand.
QIs it mobile responsive?
The floating tabs adapt their spans and layouts for mobile, ensuring the refractive narrative remains impactful and legible on small screens.