Tab Content Crossfade

display

Tabs with animated crossfade transition between content panels.

Preview

No preview available

Check the code examples below.

Installation

npm install @launchapp/design-system
Import
import { TabContentCrossfade } from "@launchapp/design-system";

Examples

Animated tab switcher

<TabContentCrossfade  tabs={[    { id: "overview", label: "Overview", content: <div>Overview content</div> },    { id: "details", label: "Details", content: <div>Details content</div> },    { id: "history", label: "History", content: <div>History content</div> },  ]}  defaultTab="overview"/>

Props

PropTypeDefaultDescription
tabs*
Array<{ id: string; label: string; content: React.ReactNode }>—Tab definitions.
defaultTab
string—Initially active tab id.
← PreviousStreaming Text
Next →Tag Input