1 GitHub star = 1 new component.

Star the repo
Navigationtabsunderlineanimated

Underline Tabs

Tabs with animated sliding underline highlight.

Usage

Copy and paste this code into your React component:

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

<TabUnderline>Content</TabUnderline>

Manual Installation

If you are not using the npm package, create a new file and paste the following code: 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; }

Quick Info

Category
Navigation
Filename
TabUnderline.tsx
Dependencies
None โ€” pure React + CSS
Tags
tabsunderlineanimated