1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Navegacióntabsnavigationfloating

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

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

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

FloatingTabBar.tsx
'use client';

import './FloatingTabBar.css';

/** FloatingTabBar — ported from astro-component-kit. */
export interface FloatingTabBarProps {
}

export function FloatingTabBar({}: FloatingTabBarProps) {
  return (
    <>
      <div className="float-tabs" data-rk-437683="">
        <button className="active" data-rk-437683="">Discover</button>
        <button data-rk-437683="">Trending</button>
        <button data-rk-437683="">Following</button>
      </div>
    </>
  );
}

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

.float-tabs:where([data-rk-437683]) { 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:where([data-rk-437683]) button:where([data-rk-437683]) { 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:where([data-rk-437683]) button.active:where([data-rk-437683]) { background: #fff; color: #000; }

Información Rápida

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