Tabs

npm install @volta/tabs

import { Tabs, TabsContent, TabsList, TabsTrigger } from '@volta/tabs';
import { Button } from '@volta/button';
import { Input } from '@volta/input';
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@volta/select';
import { Textarea } from '@volta/textarea';

<div className="p-4 pt-3 bg-sand-100 dark:bg-darkgrey-800  flex rounded-md">
  <Tabs defaultValue="account" className="w-[300px]">
    <TabsList className="w-full">
      <TabsTrigger value="account">Account</TabsTrigger>
      <TabsTrigger value="settings">Settings</TabsTrigger>
    </TabsList>
    <TabsContent value="account" className="space-y-4 pt-4">
      <Input placeholder="Name" />
      <Input placeholder="Password" type="password" />
      <Button className="w-full">Save</Button>
    </TabsContent>
    <TabsContent value="settings" className="space-y-4 pt-4">
      <Select>
        <SelectTrigger className="w-full">
          <SelectValue placeholder="Select a status" />
        </SelectTrigger>
        <SelectContent>
          <SelectGroup>
            <SelectItem value="online">Online</SelectItem>
            <SelectItem value="offline">Offline</SelectItem>
          </SelectGroup>
        </SelectContent>
        <Textarea placeholder="Message (optional)" />
        <Button className="w-full">Save</Button>
      </Select>
    </TabsContent>
  </Tabs>
</div>