KokonutUI
Navigation tabs with a spring-animated sliding indicator and directional blur transitions between content panels. Click the tabs below to see the pill slide and the content cross-fade with motion blur.
The active indicator slides between tabs using a spring with stiffness 400 and damping 30 for a snappy, organic feel.
Content panels enter and exit with directional slide, blur, and scale. Moving right slides content left, and vice versa.
Each tab accepts optional cardContent for fully custom panel rendering, or falls back to the built-in waveform layout.
Full keyboard navigation with proper ARIA roles, tab indices, and focus-visible ring for screen reader compatibility.
| Prop | Type | Default |
|---|---|---|
| items | TabItem[] | 4 default tabs (Models, MCPs, Agents, Users) |
| defaultTabId | string | first item id |
| className | string | undefined |
| activeColor | string | bg-[#1F9CFE] |
| onChange | (tabId: string) => void | undefined |
id: string
title: string
description?: string
icon?: LucideIcon
content?: ReactNode
cardContent?: ReactNode
color: string