スライドアニメーション付きタブメニュー

背景がヌルっと動くメニューとスワイプ機能付きのスライダーを組み合わせて作ったスライドするアニメーション付きのタブメニューです。

About Preview

このコンポーネントを使いたい場合は、component.tsxとstyle.cssの内容をコピーして、render.tsxを参考にコンポーネントを使ってください

Default Packages

プレビュー画面では以下のパッケージがンストールされています

• react@18.2.0
• framer-motion@11.0.0
• lucide-react@0.460.0
• TailwindCSS
• clsx
• tailwind-merge

pnpm add tailwindcss framer-motion clsx tailwind-merge

Component PropTypes

interface Menu {
  name: string;
  icon?: React.FC;
}

interface TabProps {
  menu: Menu[];
  children: React.ReactNode[];
  duration?: number;
  color?: string;
  className?: string;
}