GlassTabs

import {
  GlassTabs,
  GlassTabsList,
  GlassTabsTrigger,
  GlassTabsContent,
} from "koori-ui";
 
<GlassTabs defaultValue="overview">
  <GlassTabsList>
    <GlassTabsTrigger value="overview">Overview</GlassTabsTrigger>
    <GlassTabsTrigger value="analytics">Analytics</GlassTabsTrigger>
    <GlassTabsTrigger value="settings">Settings</GlassTabsTrigger>
  </GlassTabsList>
 
  <GlassTabsContent value="overview">
    <p>Overview content here.</p>
  </GlassTabsContent>
  <GlassTabsContent value="analytics">
    <p>Analytics content here.</p>
  </GlassTabsContent>
  <GlassTabsContent value="settings">
    <p>Settings content here.</p>
  </GlassTabsContent>
</GlassTabs>

import { useState } from "react";
import { GlassTabs, GlassTabsList, GlassTabsTrigger, GlassTabsContent } from "koori-ui";
 
function Example() {
  const [tab, setTab] = useState("overview");
  return (
    <GlassTabs value={tab} onValueChange={setTab}>
      <GlassTabsList>
        <GlassTabsTrigger value="overview">Overview</GlassTabsTrigger>
        <GlassTabsTrigger value="details">Details</GlassTabsTrigger>
      </GlassTabsList>
      <GlassTabsContent value="overview">Overview</GlassTabsContent>
      <GlassTabsContent value="details">Details</GlassTabsContent>
    </GlassTabs>
  );
}