UIPackage
Vue React

Vertical Tabs

React navigation
Edit on GitHub

Settings-page navigation pattern — labels stack on the left, content panel on the right. Same API as Tabs but with a vertical orientation. Use for dense, multi-section settings UIs.

Also available for Vue ->

Installation

$ npx shadcn@latest add https://react.uipkge.dev/r/react/vertical-tabs.json

Or with the named registry: npx shadcn@latest add @uipkge-react/vertical-tabs

Examples

Props

Name Type / Values Default Required
label string — required

Dependencies

@radix-ui/react-tabs

Files (2)

  • components/ui/vertical-tabs/vertical-tabs.tsx 3.3 kB 
    'use client'

import * as React from 'react'
import * as TabsPrimitive from '@radix-ui/react-tabs'
import { cn } from '@/lib/utils'

const VerticalTabs = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Root>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Root
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs"
    orientation="vertical"
    className={cn('flex w-full gap-6', className)}
    {...props}
  />
))
VerticalTabs.displayName = 'VerticalTabs'

const VerticalTabsList = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.List>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.List
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-list"
    className={cn('border-border flex w-56 shrink-0 flex-col gap-0.5 border-r pr-3', className)}
    {...props}
  />
))
VerticalTabsList.displayName = 'VerticalTabsList'

export interface VerticalTabsSectionProps extends React.HTMLAttributes<HTMLDivElement> {
  label: string
}

const VerticalTabsSection = React.forwardRef<HTMLDivElement, VerticalTabsSectionProps>(
  ({ className, label, ...props }, ref) => (
    <div
      ref={ref}
      data-uipkge=""
      data-slot="vertical-tabs-section"
      className={cn(
        'text-muted-foreground mt-3 mb-1 px-2 text-xs font-medium tracking-wider uppercase first:mt-0',
        className,
      )}
      {...props}
    >
      {label}
    </div>
  ),
)
VerticalTabsSection.displayName = 'VerticalTabsSection'

const VerticalTabsTrigger = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Trigger>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
>(({ className, children, ...props }, ref) => (
  <TabsPrimitive.Trigger
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-trigger"
    className={cn(
      'group/trigger text-muted-foreground relative flex w-full items-center gap-2 rounded-md px-3 py-2 text-left text-sm font-medium transition-[color,background-color] duration-150',
      'hover:bg-muted/60 hover:text-foreground',
      'focus-visible:ring-ring/50 focus-visible:ring-2 focus-visible:outline-none',
      'disabled:pointer-events-none disabled:opacity-50',
      'data-[state=active]:bg-muted data-[state=active]:text-foreground',
      '[&>svg]:size-4 [&>svg]:shrink-0',
      className,
    )}
    {...props}
  >
    <span
      aria-hidden
      className="bg-primary absolute inset-y-1 left-0 w-0.5 rounded-full opacity-0 transition-opacity duration-150 group-data-[state=active]/trigger:opacity-100"
    />
    {children}
  </TabsPrimitive.Trigger>
))
VerticalTabsTrigger.displayName = 'VerticalTabsTrigger'

const VerticalTabsContent = React.forwardRef<
  React.ElementRef<typeof TabsPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
>(({ className, ...props }, ref) => (
  <TabsPrimitive.Content
    ref={ref}
    data-uipkge=""
    data-slot="vertical-tabs-content"
    className={cn(
      'ring-offset-background focus-visible:ring-ring/50 flex-1 focus-visible:ring-2 focus-visible:outline-none',
      className,
    )}
    {...props}
  />
))
VerticalTabsContent.displayName = 'VerticalTabsContent'

export {
  VerticalTabs,
  VerticalTabsList,
  VerticalTabsSection,
  VerticalTabsTrigger,
  VerticalTabsContent,
}
  • components/ui/vertical-tabs/index.ts 0.2 kB 
    export {
  VerticalTabs,
  VerticalTabsList,
  VerticalTabsSection,
  VerticalTabsTrigger,
  VerticalTabsContent,
  type VerticalTabsSectionProps,
} from './vertical-tabs'

Raw manifest: https://react.uipkge.dev/r/react/vertical-tabs.json