Tabs

A set of layered sections of content—known as tab panels—that are displayed one at a time.

$ npx ruma-ui add tabs

Installation

npx ruma-ui add tabs

Usage

import { Tabs, TabList, Tab, TabPanel } from "@/components/ui/tabs";

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-[400px]">
      <TabList>
        <Tab value="account">Account</Tab>
        <Tab value="password">Password</Tab>
      </TabList>
      <TabPanel value="account" className="p-4 bg-zinc-900 border border-zinc-800 rounded-md mt-2">
        <h3 className="font-semibold text-white">Account Details</h3>
        <p className="text-sm text-zinc-400">Manage your profile and account settings.</p>
      </TabPanel>
      <TabPanel value="password" className="p-4 bg-zinc-900 border border-zinc-800 rounded-md mt-2">
        <h3 className="font-semibold text-white">Password Settings</h3>
        <p className="text-sm text-zinc-400">Update your security credentials here.</p>
      </TabPanel>
    </Tabs>
  );
}

API Reference

Prop	Type	Default	Description
defaultValue	string	undefined	Initial active tab.
value	string	undefined	Controlled active tab value.
onValueChange	(value: string) => void	undefined	Event listener when active tab changes.