Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/kokonut-labs/kokonutui/llms.txt

Use this file to discover all available pages before exploring further.

An animated tab component with smooth slide transitions and customizable card content for each tab. Features motion animations powered by Framer Motion.

​
Installation

npx shadcn@latest add @kokonutui/smooth-tab

​
Usage

import SmoothTab from "@/components/kokonutui/smooth-tab";

export default function Example() {
  return (
    <SmoothTab />
  );
}

​
Props

​
items
TabItem[]
default:"DEFAULT_TABS"
Array of tab items to display. Each item includes:
  • id (string): Unique identifier for the tab
  • title (string): Display text for the tab
  • icon (LucideIcon, optional): Icon component to display
  • content (ReactNode, optional): Content to show when tab is active
  • cardContent (ReactNode, optional): Card content to display above tabs
  • color (string): Background color classes for the tab (e.g., “bg-blue-500 hover:bg-blue-600”)
​
defaultTabId
string
default:"first item id"
ID of the tab that should be selected by default
​
className
string
Additional CSS classes to apply to the tab container
​
activeColor
string
default:"bg-[#1F9CFE]"
Background color for the active tab sliding indicator
​
onChange
(tabId: string) => void
Callback function triggered when tab selection changes

​
Features

  • Smooth Animations: Slide transitions with blur and scale effects using Framer Motion
  • Card Content Display: Shows customizable card content above the tab bar
  • Sliding Indicator: Animated background that smoothly moves to the active tab
  • Keyboard Accessible: Supports Enter and Space key navigation
  • Responsive Layout: Automatically adjusts to container width
  • Customizable Colors: Each tab can have its own color scheme

​
Example with Custom Tabs

import SmoothTab from "@/components/kokonutui/smooth-tab";
import { Home, Settings, User } from "lucide-react";

const customTabs = [
  {
    id: "home",
    title: "Home",
    icon: Home,
    color: "bg-blue-500 hover:bg-blue-600",
    cardContent: <div>Home Content</div>
  },
  {
    id: "settings",
    title: "Settings",
    icon: Settings,
    color: "bg-purple-500 hover:bg-purple-600",
    cardContent: <div>Settings Content</div>
  },
  {
    id: "profile",
    title: "Profile",
    icon: User,
    color: "bg-emerald-500 hover:bg-emerald-600",
    cardContent: <div>Profile Content</div>
  }
];

export default function Example() {
  return (
    <SmoothTab 
      items={customTabs}
      defaultTabId="home"
      onChange={(tabId) => console.log("Selected:", tabId)}
    />
  );
}

​
Dependencies

  • motion (Framer Motion)
  • lucide-react
  • @/lib/utils (cn utility)