Animated Tabs Component
This is a jQuery-based recreation of the shadcn animated tabs component, designed to work with the existing Jekyll + Bootstrap setup.
Overview
The animated tabs component provides a smooth, modern interface for organizing content into tabbed sections. It features:
- Smooth sliding background animation
- Responsive design that works on all screen sizes
- Dark mode support
- jQuery-based implementation compatible with existing site
Features
Key features of this implementation:
- Backdrop blur effects - Uses CSS backdrop-filter for modern glass-like appearance
- Smooth transitions - 250ms ease transitions for fluid animations
- Mobile responsive - Adapts to different screen sizes with appropriate padding and font sizes
- Accessibility - Proper focus states and keyboard navigation
- Dark mode - Automatically adapts to site's dark mode toggle
Documentation
How to use the animated tabs component:
HTML Structure
<div class="animated-tabs">
<ul class="animated-tabs-list">
<li class="animated-tab">
<a href="#tab1" class="animated-tab-trigger active">Tab 1</a>
</li>
<li class="animated-tab">
<a href="#tab2" class="animated-tab-trigger">Tab 2</a>
</li>
</ul>
</div>JavaScript Initialization
$('.animated-tabs').animatedTabs({
activeClass: 'active',
duration: 250,
onTabChange: function(index, tab) {
console.log('Switched to tab:', index);
}
});