TabBar

A glass capsule with icon and label per destination. On a phone it sits above the home indicator; anywhere else it is a compact switcher.

import { useState } from 'react';
import { TabBar } from '@andrewbehma/glass-ui';
import { CircleUser, House, Library, Search } from 'lucide-react';

Playground

TabBar.tsx

import { useState } from 'react';
import { TabBar } from '@andrewbehma/glass-ui';
import { CircleUser, House, Library, Search } from 'lucide-react';

function Example() {
  const [active, setActive] = useState("home");
  const items = [
    { id: 'home', label: 'Home', icon: House },
    { id: 'search', label: 'Search', icon: Search },
    { id: 'library', label: 'Library', icon: Library },
    { id: 'profile', label: 'Profile', icon: CircleUser },
  ].map((item) => ({ ...item, active: item.id === active, onSelect: () => setActive(item.id) }));
  return (
    <div className="relative flex w-full max-w-[24rem] justify-center">
      <TabBar aria-label="Primary" items={items} layoutId="demo-tab-bar" />
    </div>
  );
}