Use Case Tabs

Solutions-by-team section: a tab for each audience (engineering, product, design, marketing, support) over a two-sided panel with that team's headline, three benefits, a metric and customer quote, a Learn more link and a product mock of its own. Arrow keys select, the indicator slides, panels crossfade without moving the page, and the tabs scroll on phones. Autoplay is opt-in.

Tags: use-cases solutions tabs teams personas product-mock testimonial
Dependencies: @base-ui/react(npm, opens in a new tab)motion(npm, opens in a new tab)lucide-react(npm, opens in a new tab)

Props

Other props pass through to the root element.

eyebrow
React.ReactNode
Default "Solutions"
title
React.ReactNode
Default "Built around the way each team works"
intro
React.ReactNode
Default "One workspace for engineering, product, design, marketing …
useCases
UseCase[]
Default DEFAULT_USE_CASES
defaultValue
string
value
string
Controls the active tab. Pair with onValueChange.
onValueChange
(id: string) => void
onLearnMore
(useCase: UseCase, event: React.MouseEvent<HTMLAnchorElement>) => void
Called when a panel's link is followed.
autoplay
boolean
Default false
Advance through the tabs on a timer. Pauses on hover, focus and off screen; off under reduced motion.
interval
number
Default 7000
Time each tab stays up while autoplaying, in ms.

Prop	Type	Default	Description
eyebrow	React.ReactNode	"Solutions"
title	React.ReactNode	"Built around the way each team works"
intro	React.ReactNode	"One workspace for engineering, product, design, marketing …
useCases	UseCase[]	DEFAULT_USE_CASES
defaultValue	string	–
value	string	–	Controls the active tab. Pair with `onValueChange`.
onValueChange	(id: string) => void	–
onLearnMore	(useCase: UseCase, event: React.MouseEvent<HTMLAnchorElement>) => void	–	Called when a panel's link is followed.
autoplay	boolean	false	Advance through the tabs on a timer. Pauses on hover, focus and off screen; off under reduced motion.
interval	number	7000	Time each tab stays up while autoplaying, in ms.