Features Tabs

Installation

pnpm
npm
yarn
bun
pnpm dlx shadcn@latest add https://ui.sanjid.shop/r/feature-tabs.json

Props

Types

1interface Tab {2  value: string;3  title: string;4  description: string;5  content: React.ReactNode;6}7
8interface FeatureTabsProps {9  tabs: Tab[];10  sectionTitle?: string;11  sectionSubtitle?: string;12  defaultValue?: string;13  onValueChange?: (value: string) => void;14  className?: string;15  height?: string;16  autoplay?: boolean;17  interval?: number;18}

Usage

1"use client";2
3import { FeatureTabs } from "@/components/ui/features-tabs";4
5const tabs = [6  {7    value: "design",8    title: "Polished UI",9    description: "Beautiful defaults with subtle motion",10    content: (11      <div className="space-y-2">12        <h4 className="text-lg font-semibold">Design System Ready</h4>13        <p className="text-muted-foreground text-sm">14          Tailwind-first, accessible, theme-aware.15        </p>16      </div>17    ),18  },19  {20    value: "performance",21    title: "Fast",22    description: "Optimized motion with spring transitions",23    content: (24      <div className="space-y-2">25        <h4 className="text-lg font-semibold">Smooth Animations</h4>26        <p className="text-muted-foreground text-sm">27          Zero jank with Motion One spring physics.28        </p>29      </div>30    ),31  },32  {33    value: "integration",34    title: "Easy Integrations",35    description: "Drop-in API with sensible props",36    content: (37      <div className="space-y-2">38        <h4 className="text-lg font-semibold">Headless API</h4>39        <p className="text-muted-foreground text-sm">40          Render anything inside each tab panel.41        </p>42      </div>43    ),44  },45];46
47export default function Page() {48  return (49    <div className="flex min-h-screen items-center justify-center bg-neutral-100 p-6 dark:bg-neutral-900">50      <FeatureTabs tabs={tabs} />51    </div>52  );53}

Customization

Enable or disable autoplay and adjust the interval:

1<FeatureTabs tabs={tabs} autoplay interval={4000} />

Control the preview area height with the

1height

1<FeatureTabs tabs={tabs} height="min-h-[420px]" />