Ember UI LogoEmber UI
Components

Tabs

A tabs component

Preview

Loading...
import { Button } from "@/registry/axon/ui/button";import {  Card,  CardContent,  CardDescription,  CardFooter,  CardHeader,  CardTitle,} from "@/registry/axon/ui/card";import { Input } from "@/registry/axon/ui/input";import { Label } from "@/registry/axon/ui/label";import {  Tabs,  TabsContent,  TabsList,  TabsTrigger,} from "@/registry/axon/ui/tabs";export default function TabsDemo() {  return (    <div className="flex w-full max-w-sm flex-col gap-6">      <Tabs defaultValue="account">        <TabsList>          <TabsTrigger value="account">Account</TabsTrigger>          <TabsTrigger value="password">Password</TabsTrigger>        </TabsList>        <TabsContent value="account">          <Card>            <CardHeader>              <CardTitle>Account</CardTitle>              <CardDescription>                Make changes to your account here. Click save when you&apos;re                done.              </CardDescription>            </CardHeader>            <CardContent className="grid gap-6">              <div className="grid gap-3">                <Label htmlFor="tabs-demo-name">Name</Label>                <Input defaultValue="Pedro Duarte" id="tabs-demo-name" />              </div>              <div className="grid gap-3">                <Label htmlFor="tabs-demo-username">Username</Label>                <Input defaultValue="@peduarte" id="tabs-demo-username" />              </div>            </CardContent>            <CardFooter>              <Button>Save changes</Button>            </CardFooter>          </Card>        </TabsContent>        <TabsContent value="password">          <Card>            <CardHeader>              <CardTitle>Password</CardTitle>              <CardDescription>                Change your password here. After saving, you&apos;ll be logged                out.              </CardDescription>            </CardHeader>            <CardContent className="grid gap-6">              <div className="grid gap-3">                <Label htmlFor="tabs-demo-current">Current password</Label>                <Input id="tabs-demo-current" type="password" />              </div>              <div className="grid gap-3">                <Label htmlFor="tabs-demo-new">New password</Label>                <Input id="tabs-demo-new" type="password" />              </div>            </CardContent>            <CardFooter>              <Button>Save password</Button>            </CardFooter>          </Card>        </TabsContent>      </Tabs>    </div>  );}

Installation

CLI

npx shadcn@latest add @emberui/tabs
yarn shadcn@latest add @emberui/tabs
pnpm dlx shadcn@latest add @emberui/tabs
bunx --bun shadcn@latest add @emberui/tabs

Reference

This component is based on the shadcn/ui Tabs component.

On this page