Tabs · Animate UI

import {
  Tabs,
  TabsContent,
  TabsContents,
  TabsHighlight,
  TabsHighlightItem,
  TabsList,
  TabsTrigger,
} from '@animate-ui/react/primitives/tabs';

export function Settings() {
  return (
    <Tabs defaultValue="account">
      <TabsHighlight className="absolute inset-0 rounded-md bg-background">
        <TabsList className="flex rounded-lg bg-muted p-1">
          <TabsHighlightItem value="account" className="flex-1">
            <TabsTrigger value="account">Account</TabsTrigger>
          </TabsHighlightItem>
          <TabsHighlightItem value="password" className="flex-1">
            <TabsTrigger value="password">Password</TabsTrigger>
          </TabsHighlightItem>
        </TabsList>
      </TabsHighlight>
      <TabsContents>
        <TabsContent value="account">
          Make changes to your account here.
        </TabsContent>
        <TabsContent value="password">Change your password here.</TabsContent>
      </TabsContents>
    </Tabs>
  );
}