1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegación tabsunderlineanimated

Underline Tabs

Pestañas con línea de subrayado deslizante animada que resalta la sección activa.

Uso

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

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

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

Instalación Manual

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

astro 
---
---
<nav class="u-tabs">
  <a href="#" class="active">Profile</a>
  <a href="#">Password</a>
  <a href="#">Sessions</a>
  <div class="indicator"></div>
</nav>
<style>
  .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; }
  .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
  .u-tabs a.active { color: #fff; }
  .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; }
</style>
--- --- <nav class="u-tabs"> <a href="#" class="active">Profile</a> <a href="#">Password</a> <a href="#">Sessions</a> <div class="indicator"></div> </nav> <style> .u-tabs { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; } .u-tabs a { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; } .u-tabs a.active { color: #fff; } .indicator { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; } </style>

Información Rápida

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