Vertical Tabs

A vertical tab navigation with a sliding active-tab indicator, keyboard arrow navigation and five style variants (left, right, card, rail, compact) for sidebars and settings pages.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Vertical Tabs to your project and fits it to your theme.

import TabsVertical from "@/components/ui/tabs-vertical";

export default function TabsVerticalDemo() {
  return (
    <div className="flex w-full max-w-md items-center justify-center p-8">
      <TabsVertical />
    </div>
  );
}