1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegacióntabsunderlineanimated

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 componente React:

tsx
import { TabUnderline } from 'react-component-kit-ui/navigation';

<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/TabUnderline.tsx + TabUnderline.css:

TabUnderline.tsx
'use client';

import './TabUnderline.css';

/** TabUnderline — ported from astro-component-kit. */
export interface TabUnderlineProps {
}

export function TabUnderline({}: TabUnderlineProps) {
  return (
    <>
      <nav className="u-tabs" data-rk-f35f3a="">
        <a href="#" className="active" data-rk-f35f3a="">Profile</a>
        <a href="#" data-rk-f35f3a="">Password</a>
        <a href="#" data-rk-f35f3a="">Sessions</a>
        <div className="indicator" data-rk-f35f3a=""></div>
      </nav>
    </>
  );
}

export default TabUnderline;
TabUnderline.css
/* TabUnderline — ported from astro-component-kit (navigation/TabUnderline.astro) */

.u-tabs:where([data-rk-f35f3a]) { display: flex; gap: 2rem; border-bottom: 2px solid rgba(255,255,255,0.05); position: relative; }
.u-tabs:where([data-rk-f35f3a]) a:where([data-rk-f35f3a]) { padding: 1rem 0; color: #64748b; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: 0.3s; }
.u-tabs:where([data-rk-f35f3a]) a.active:where([data-rk-f35f3a]) { color: #fff; }
.indicator:where([data-rk-f35f3a]) { position: absolute; bottom: -2px; left: 0; width: 50px; height: 2px; background: #6366f1; transition: 0.3s; }

Información Rápida

Categoría
Navegación
Nombre de archivo
TabUnderline.tsx
Dependencias
Ninguna — React + CSS puro
Etiquetas
tabsunderlineanimated