Shadcn UI / Radix Primitives: Programmatically Switch Tabs

tab.tsx

export function TabsDemo() {
  const [tab, setTab] = useState("tab1");

  const onTabChange = (value) => {
    setTab(value);
  }

  return (
    <Tabs value={tab} onValueChange={onTabChange} className="w-[400px]">
      <TabsList className="grid w-full grid-cols-2">
        <TabsTrigger value="tab1">Tab 1</TabsTrigger>
        <TabsTrigger value="tab2">Tab 2</TabsTrigger>
        <TabsTrigger value="tab3">Tab 3</TabsTrigger>
      </TabsList>
      <TabsContent value="tab1">
        
      </TabsContent>
      <TabsContent value="tab2">
        
      </TabsContent>
      <TabsContent value="tab3">
        
      </TabsContent>
    </Tabs>
  )
}