Components→Tabs

Tabs

Motion-first tabs with sliding indicator, direction-aware content transitions, and full keyboard navigation. Features layout animations and spring physics.

Navigation

Project Overview

DriftKit provides beautiful, physics-based components for modern React applications.

Installation

Copy and paste

Copy the component source code and paste it into your project.

import { Tabs } from "driftkit";

Props

Name	Type	Required	Description
`items`	`TabItem[]`	Yes	Array of tab items. Each has value (key), label (tab header), content (panel content), and optional disabled flag.
`value`	`string`	No	Controlled active tab value. Use with onValueChange for controlled tabs.
`defaultValue`	`string`	No	Default active tab for uncontrolled usage. Falls back to first tab.
`onValueChange`	`(value: string) => void`	No	Callback when active tab changes. Receives the new tab's value.

🎮

Playground

Tune spring physics for this component

Live Preview

Overview

Details

Settings

Spring Physics

StiffnessiHow quickly the animation reaches its target. Higher values create snappier animations.300

DampingiHow much the animation resists motion. Lower values create more bounce and overshoot.30

MassiHow heavy the element feels during animation. Higher values make animations slower with more momentum.1

Generated Code

const springConfig = {
  "type": "spring",
  "stiffness": 300,
  "damping": 30,
  "mass": 1
};

// Basic hover animation
<motion.div
  whileHover={{ scale: 1.05 }}
  whileTap={{ scale: 0.95 }}
  transition={springConfig}
>
  <Tabs />
</motion.div>

// Advanced with custom animations
<motion.div
  animate={{ 
    scale: [1, 1.02, 1],
    y: [0, -4, 0]
  }}
  transition={{
    ...springConfig,
    repeat: Infinity,
    repeatDelay: 2
  }}
>
  <Tabs />
</motion.div>

Stiffness: Controls animation speed. Higher values create snappier animations.

Damping: Controls resistance to motion. Lower values create more bounce and overshoot.

Mass: Controls the perceived weight. Higher values make animations slower with more momentum.

Source Code

View the source code on GitHub to see the full implementation.

View on GitHub