Animated Tabs is a modern interactive tabs UI component built using Next.js, TailwindCSS, Shadcn/UI, and Framer Motion.
You can use it in dashboards, product showcases, portfolio sections, and content organization where clear structure and smooth interaction are needed.
Features
✨ Smooth Animations: Built with Framer Motion for fluid transitions between tabs.
📱 Responsive Design: Works perfectly in various screen sizes, from desktop to mobile.
🖱️ Hover Effects: Includes interactive feedback when users hover over tabs.
🎨 TailwindCSS styling – Customizable appearance using utility classes.
Installation
1. Clone the repository from GitHub.
git clone https://github.com/mehrdadrafiee/animated-tabs.git
cd animated-tabs2. Install the necessary dependencies using pnpm:
pnpm installUsage
1. Execute the command:
pnpm dev2. Open your web browser and navigate to http://localhost:3000.
Related Resources
- Framer Motion: The animation library used in Animated Tabs. Its documentation helps understand the animation principles applied. https://www.framer.com/motion/
- Shadcn/UI: The UI component library providing the base elements. Explore its documentation for customization options. https://ui.shadcn.com/
- Tailwind CSS: The utility-first CSS framework used for styling. Its extensive documentation covers all styling utilities. https://tailwindcss.com/docs
FAQs
Q: Can I customize the animation timing and effects?
A: Yes, you can modify the animation parameters in the component code to adjust timing, easing functions, and transition effects to match your design requirements.
Q: Is this component accessible?
A: The component builds on Shadcn/UI which prioritizes accessibility. It supports keyboard navigation and maintains proper ARIA attributes for screen readers.
Q: Does it support vertical tabs?
A: The default implementation is horizontal, but the component can be modified to support vertical tab layouts with CSS adjustments.
Q: How do I add icons to the tab headers?
A: You can extend the tab data structure to include icon components and modify the tab rendering to display them alongside tab titles.
