TabBar

tabbar-1779393693095.tsx

'use client'
import { useState, useRef, useEffect } from 'react'

const TABS = [
  { id: 'overview', label: 'Overview', icon: '📊' },
  { id: 'analytics', label: 'Analytics', icon: '📈' },
  { id: 'settings', label: 'Settings', icon: '⚙️' },
  { id: 'team', label: 'Team', icon: '👥' },
]

export default function TabBar({ tabs = TABS }) {
  const [active, setActive] = useState(tabs[0]?.id)
  return (
    <div>
      <div style={{
        display: 'flex', background: '#f8fafc', borderRadius: '12px',
        padding: '4px', gap: '2px',
      }}>
        {tabs.map(tab => (
          <button
            key={tab.id}
            onClick={() => setActive(tab.id)}
            style={{
              flex: 1, display: 'flex', alignItems: 'center', justifyContent: 'center',
              gap: '6px', padding: '9px 14px', borderRadius: '9px', border: 'none',
              background: active === tab.id ? '#fff' : 'transparent',
              color: active === tab.id ? '#6d28d9' : '#64748b',
              fontWeight: active === tab.id ? 700 : 500, fontSize: '13px',
              cursor: 'pointer', transition: 'all 0.2s',
              boxShadow: active === tab.id ? '0 1px 6px rgba(0,0,0,0.1)' : 'none',
            }}
          >{tab.icon} {tab.label}</button>
        ))}
      </div>
      <div style={{ marginTop: '16px', padding: '16px', background: '#f8fafc', borderRadius: '12px', fontSize: '14px', color: '#64748b' }}>
        Content for: <strong style={{ color: '#1e293b' }}>{tabs.find(t => t.id === active)?.label}</strong>
      </div>
    </div>
  )
}

Component info

CategoryNavigation

Frameworkreact

TierFREE

Copies0

About

Sliding tab bar with animated indicator and icon support

More from Navigation

import * as React from 'react';
import * as ReactDOM from 'react-dom';

interface FloatingDockProps {
  icons: { id: number; src: string; }[];
}

class FloatingDock extends React.Component<FloatingDockProps, {}> {
  constructor(props: FloatingDockPro

FloatingDock

Navigation

'use client'
import { useState } from 'react'

const NAV = [
  { id: 'home', icon: '◉', label: 'Overview', shortcut: 'G H' },
  { id: 'components', icon: '⬡', label: 'Components', shortcut: 'G C', badge: 120, children: [
    { id: 'buttons', label: '

SidebarNav

Navigation

'use client';

import React from 'react';

interface PaginationNavProps {
  currentPage: number;
  totalPages: number;
  onPageChange: (page: number) => void;
}

const PaginationNav: React.FC<PaginationNavProps> = ({ currentPage, totalPages, onPageCh

PaginationNav

Navigation

'use client';

import React, { useState } from 'react';

interface Tab {
  id: number;
  label: string;
}

const tabs: Tab[] = [
  { id: 1, label: 'Tab 1' },
  { id: 2, label: 'Tab 2' },
  { id: 3, label: 'Tab 3' },
  { id: 4, label: 'Tab 4' },
];

c

TabsNav

Navigation