Discrete Tabs

Renders animated tabs with smooth morphing transitions between active states. Tabs update with spring-based animations when clicked or focused. Displays icons and labels with color changes and shine effects. Use for interactive navigation with visual feedback and dynamic tab switching.

byWatermelon Corp from Watermelon

Installation

terminal

pnpm dlx layro-cli add @watermeloncorp/discrete-tabs

npx layro-cli add @watermeloncorp/discrete-tabs

npx layro-cli add @watermeloncorp/discrete-tabs

bunx layro-cli add @watermeloncorp/discrete-tabs

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

'use client';

import { useEffect, useState, type FC, type ReactNode } from 'react';

import { AnimatePresence, motion } from 'motion/react';
import { cn } from '@/lib/utils';

interface TabItem {
  id: string;
  icon: ReactNode;
  label: string;
  activeColor: string;
}