2023/10/17

下線移動のアニメーション付きタブメニュー

スワイプにも対応しています

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

About Preview

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

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

pnpm add tailwindcss framer-motion clsx tailwind-merge

interface Menu {
  name: string;
}

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