Tabs

Example

A basic implementation of the Tabs component with default styling.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@yummacss/ui";

export default function Page() {
  return (
    <Tabs defaultValue="account">
      <TabsList>
        <TabsTab value="account">Home</TabsTab>
        <TabsTab value="password">About</TabsTab>
        <TabsTab value="contact">Contact</TabsTab>
      </TabsList>

      <TabsContent value="account">Home</TabsContent>
      <TabsContent value="password">About</TabsContent>
      <TabsContent value="contact">Contact</TabsContent>
    </Tabs>
  );
};

API reference

The Tabs component can be adapted to suit specific requirements by utilizing the internal API of Yumma UI, thereby enabling the modification of its visual appearance and operational characteristics.

defaultValue

Optional

Learn more about the defaultValue API in the Base UI documentation

(property) defaultValue?: any

value

Required

Learn more about the value API in the Base UI documentation

(property) value?: any

Custom styling

Apply custom styles to the <Tabs> component.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@yummacss/ui";

<Tabs className="...">
  ...
</Tabs>

Extend properties

Extend the <Tabs> component with the Base UI API.

import { Tabs, TabsList, TabsTrigger, TabsContent } from "@yummacss/ui";

<Tabs {...props}>
  ...
</Tabs>