TabGroup

import { useState } from 'react';
import { TabGroup } from '@vrum/ui';
import { TabList, TabTrigger, TabContent } from '@vrum/ui';

export default function Demo() {
  const [value, setValue] = useState("overview");

  return (
    <TabGroup
      value={value}
      variant={"pills"}
      fill={false}
      onValueChange={setValue}
    >
      <TabList aria-label="Project sections"><TabTrigger value="overview">Overview</TabTrigger><TabTrigger value="activity">Activity</TabTrigger></TabList><TabContent value="overview">Your project at a glance.</TabContent><TabContent value="activity">Recent team activity.</TabContent>
    </TabGroup>
  );
}