Tabs

Tabs organize content into multiple sections and allow users to navigate between them.

Preview

Code

Account

Password

Account

Make changes to your account here. Click save when you're done.

Name

Username

Installation

CLI

Manual

npx shadcn@latest add @kanpeki/tabs

Single import

Multiple imports

import { Tabs } from "~/components/ui/tabs";

<Tabs.Root>
  <Tabs.List>
    <Tabs.Trigger />
  </Tabs.List>
  <Tabs.Content />
</Tabs.Root>

Preview

Code

Tab 1

Tab 2

Tab 3

Content for Tab 1

Under Construction

This component is currently being built. Check back soon for updates!

On This Page

Contribute