# Tabs

<figure><img src="/files/2KxIX0C931ElcymrkeNa" alt=""><figcaption><p>Tabs</p></figcaption></figure>

Component: `<Tabs />`

File: `src/components/Tabs/Tabs.tsx`

Usage

```typescript
import { FAQ } from "@/components/FAQ/FAQ";

const tabItems = [
    {
        value: "tab1",
        label: "Account",
        icon: <TbUserCircle />,
        tabContent: <Flex>Account</Flex>
    },
    {
        value: "tab2",
        label: "Payments",
        icon: <TbCreditCard />,
        tabContent: <Flex>Payment settings</Flex>
    }
]

<Tabs
    label="My Menu"
    items={tabItems}
    onChange={(tabValue) => console.log(tabValue)}
/>
```

Code to get the same result as the GIF at the top of the page.

```jsx
<Tabs
  w="400px"
  items={[
    {
      value: "payment",
      label: "Payment",
      icon: <TbCreditCard />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Payment method
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your payment method.
            </Text>
          </VStack>
          <VStack>
            <VStack alignItems="flex-start" spacing="4px">
              <Text fontWeight="semibold" fontSize="14px">
                Credit card
              </Text>
              <Input
                placeholder="4242 4242 4242 4242"
                size="sm"
                borderRadius="6px"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
            </VStack>
            <HStack spacing="9px">
              <Input
                placeholder="MM/YY"
                size="sm"
                borderRadius="6px"
                w="87px"
                textAlign="center"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
              <Input
                placeholder="CVV"
                size="sm"
                borderRadius="6px"
                w="87px"
                textAlign="center"
                _placeholder={{
                  color: "blackAlpha.500",
                }}
              />
            </HStack>
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save credit card
          </Button>
        </VStack>
      ),
    },
    {
      value: "features",
      label: "Account",
      icon: <TbUserCircle />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Account
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your details.
            </Text>
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              Name
            </Text>
            <Input
              placeholder="John Doe"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save account
          </Button>
        </VStack>
      ),
    },
    {
      value: "password",
      icon: <TbLock />,
      tabContent: (
        <VStack
          alignItems="flex-start"
          border="1px solid"
          borderColor="blackAlpha.200"
          borderRadius="8px"
          p="24px"
          w="100%"
          flexGrow={1}
          spacing="16px"
        >
          <VStack alignItems="flex-start" spacing="4px">
            <Heading fontSize="24px" as="h2">
              Password
            </Heading>
            <Text fontSize="14px" color="blackAlpha.700">
              Update your password.
            </Text>
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              Current password
            </Text>
            <Input
              placeholder="******"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <VStack alignItems="flex-start" spacing="4px">
            <Text fontWeight="semibold" fontSize="14px">
              New password
            </Text>
            <Input
              placeholder="******"
              size="sm"
              borderRadius="6px"
              _placeholder={{
                color: "blackAlpha.500",
              }}
            />
          </VStack>
          <Button
            colorScheme="blackAlpha"
            bgColor="gray.900"
            fontSize="14px"
            p="8px 16px"
            borderRadius="6px"
          >
            Save password
          </Button>
        </VStack>
      ),
    },
  ]}
/>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.shipped.club/components/tabs.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
