A set of layered sections of content—known as tab panels—that are displayed one at a time.
import { Tabs } from "@smartacteam/ambient-web/tabs";<Tabs.Root defaultValue="account" className="w-100">
<Tabs.List>
<Tabs.Tab value="account">Account</Tabs.Tab>
<Tabs.Tab value="password">Password</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="account">Make changes to your account here.</Tabs.Panel>
<Tabs.Panel value="password">Change your password here.</Tabs.Panel>
</Tabs.Root>"use client";
import { Button } from "@smartacteam/ambient-web/button";
import { Card } from "@smartacteam/ambient-web/card";
import { CentralIcon } from "@smartacteam/ambient-web/icon";
import { Input } from "@smartacteam/ambient-web/input";
import { Label } from "@smartacteam/ambient-web/label";
import { Tabs } from "@smartacteam/ambient-web/tabs";
export function TabsDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-6">
<Tabs.Root defaultValue="account">
<Tabs.List>
<Tabs.Tab value="account">Account</Tabs.Tab>
<Tabs.Tab value="password">Password</Tabs.Tab>
<Tabs.Tab
isAction
value={null}
render={(props) => (
<button {...props} onClick={() => alert("add new tab")}>
<CentralIcon
name="IconPlusLarge"
radius="1"
stroke="1"
fill="outlined"
/>
Add a new Tab
</button>
)}
/>
</Tabs.List>
<Tabs.Panel value="account">
<Card.Root>
<Card.Header>
<Card.Title>Account</Card.Title>
<Card.Description>
Make changes to your account here. Click save when you're
done.
</Card.Description>
</Card.Header>
<Card.Content className="grid gap-6">
<div className="grid gap-3">
<Label htmlFor="tabs-demo-name">Name</Label>
<Input.Text id="tabs-demo-name" defaultValue="Pedro Duarte" />
</div>
<div className="grid gap-3">
<Label htmlFor="tabs-demo-username">Username</Label>
<Input.Text id="tabs-demo-username" defaultValue="@peduarte" />
</div>
</Card.Content>
<Card.Footer>
<Button variant="primary">Save changes</Button>
</Card.Footer>
</Card.Root>
</Tabs.Panel>
<Tabs.Panel value="password">
<Card.Root>
<Card.Header>
<Card.Title>Password</Card.Title>
<Card.Description>
Change your password here. After saving, you'll be logged
out.
</Card.Description>
</Card.Header>
<Card.Content className="grid gap-6">
<div className="grid gap-3">
<Label htmlFor="tabs-demo-current">Current password</Label>
<Input.Text id="tabs-demo-current" type="password" />
</div>
<div className="grid gap-3">
<Label htmlFor="tabs-demo-new">New password</Label>
<Input.Text id="tabs-demo-new" type="password" />
</div>
</Card.Content>
<Card.Footer>
<Button variant="primary">Save password</Button>
</Card.Footer>
</Card.Root>
</Tabs.Panel>
</Tabs.Root>
</div>
);
}