• Logo

    Elementra UI

    v0.1.7 - Documentation
  1. Docs
  3. Components/Tabs/

Tabs

A set of layered sections of content that display one panel of content at a time.

Account Settings

Manage your account information and preferences.

1Installation

npm i elementra-ui

2Add Components Using CLI

npx elementra-ui add

Select components using the up/down arrow keys. Press spacebar to select multiple components, then press enter to add them to your src folder.

3Basic Usage

Create a tabs interface with content that's displayed when the corresponding tab is active.

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

export default function TabsDemo() {
  return (
    <Tabs defaultValue="account" className="w-full">
      <TabsList>
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
        <TabsTrigger value="settings">Settings</TabsTrigger>
      </TabsList>
      <TabsContent value="account">
        <h4>Account Settings</h4>
        <p>Manage your account information and preferences.</p>
      </TabsContent>
      <TabsContent value="password">
        <h4>Password Settings</h4>
        <p>Change your password and security preferences.</p>
      </TabsContent>
      <TabsContent value="settings">
        <h4>Application Settings</h4>
        <p>Manage your application settings and preferences.</p>
      </TabsContent>
    </Tabs>
  );
}