jattac.libs.web.zest-tabs

A delightful animated tab-switcher React component. Powered by Framer Motion's spring physics, fully generic over string and number values, and self-contained — no separate CSS import required.

Introduction

ZestTabs is a polished pill-style tab component that makes switching between views feel alive. The active tab is highlighted by a smooth spring-animated background pill that glides between tabs as the user clicks. It handles string values, number values, disabled tabs, multiple independent instances on one page, dark mode, and responsive layout — all out of the box.

Key Features

• Spring-animated active pill: A white background pill smoothly transitions between tabs using Framer Motion's spring physics — no abrupt jumps.
• Fully generic: ZestTabs<T extends string | number> — your onChange callback receives the correctly typed value, not any.
• Disabled tabs: Mark individual tabs as non-interactive with disabled: true on the item.
• Multiple instances: Use the id prop to namespace the animation when several ZestTabs appear on the same page.
• Dark mode aware: Respects body.dark for dark-mode styling with no extra configuration.
• Responsive layout: Full-width on mobile, compact (fit-content) on desktop (≥ 768 px).
• Self-contained: CSS is injected automatically at runtime — consumers do not need a separate stylesheet import.

Installation

npm install jattac.libs.web.zest-tabs

framer-motion is a peer dependency and must be installed separately if not already present:

npm install framer-motion

Basic Usage (Hello World)

import React, { useState } from 'react';
import ZestTabs from 'jattac.libs.web.zest-tabs';

const App = () => {
  const [view, setView] = useState('all');

  return (
    <ZestTabs
      items={[
        { label: 'All', value: 'all' },
        { label: 'Active', value: 'active' },
        { label: 'Archived', value: 'archived' },
      ]}
      activeValue={view}
      onChange={setView}
    />
  );
};

export default App;

Next Steps: Documentation Overview

• The Cookbook: Step-by-Step Examples — Your primary guide to common patterns with ZestTabs.
• Features Showcase — A quick overview of what ZestTabs can do.
• API Reference — Detailed documentation for all props and types.
• Development & Contributing — How to build and contribute to the project.
• Best Practices & Developer Insights — Tips for getting the most out of ZestTabs.
• Breaking Changes — Information about upgrading between versions.
• License — Project licensing information.

Next: The Cookbook