1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación tabsnavigationfloating

Floating Tab Bar

Barra flotante de pestañas elevada con sombra difuminada y bordes redondeados.

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { FloatingTabBar } from 'astro-component-kit';
---

<FloatingTabBar>Content</FloatingTabBar>
--- import { FloatingTabBar } from 'astro-component-kit'; --- <FloatingTabBar>Content</FloatingTabBar>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FloatingTabBar.astro:

astro 
---
---
<div class="float-tabs">
  <button class="active">Discover</button>
  <button>Trending</button>
  <button>Following</button>
</div>
<style>
  .float-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 100px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); width: fit-content; margin: 2rem auto; }
  .float-tabs button { background: none; border: none; padding: 0.6rem 1.4rem; color: #94a3b8; font-weight: 600; font-size: 0.85rem; border-radius: 100px; cursor: pointer; transition: 0.3s; }
  .float-tabs button.active { background: #fff; color: #000; }
</style>
--- --- <div class="float-tabs"> <button class="active">Discover</button> <button>Trending</button> <button>Following</button> </div> <style> .float-tabs { display: flex; gap: 4px; background: rgba(0,0,0,0.4); padding: 5px; border-radius: 100px; backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,0.1); width: fit-content; margin: 2rem auto; } .float-tabs button { background: none; border: none; padding: 0.6rem 1.4rem; color: #94a3b8; font-weight: 600; font-size: 0.85rem; border-radius: 100px; cursor: pointer; transition: 0.3s; } .float-tabs button.active { background: #fff; color: #000; } </style>

Información Rápida

Categoría
Navegación
Nombre de archivo
FloatingTabBar.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
tabsnavigationfloating