Tabs

Tabs wraps links or buttons you provide, so it works with any router. The indicator is a shared layout animation that follows the current item.

import { useState } from 'react';
import { Tabs, TabsItem } from '@andrewbehma/glass-ui';
import { Activity, Settings } from 'lucide-react';

Playground

Tabs.tsx

import { useState } from 'react';
import { Tabs, TabsItem } from '@andrewbehma/glass-ui';
import { Activity, Settings } from 'lucide-react';

function Example() {
  const [tab, setTab] = useState("Overview");
  return (
    <div className="grid w-full max-w-[26rem] gap-4">
      <Tabs aria-label="Project">
        {['Overview', 'Activity', 'Settings'].map((name) => (
          <TabsItem key={name} current={tab === name} layoutId="project-tabs">
            <button
              type="button"
              aria-current={tab === name ? 'page' : undefined}
              onClick={() => setTab(name)}
              className="relative w-full px-3 py-1.5 text-body"
            >
              {name}
            </button>
          </TabsItem>
        ))}
      </Tabs>
      <p className="text-body text-ink-2">Showing {tab.toLowerCase()}.</p>
    </div>
  );
}