Duck Tabs

Tabs with an indicator that slides between triggers. Arrows move, Home and End jump to the ends.

NavigationClient component

Preview

Pond Studio runs on the Flock plan with four active projects and two staging environments.

The CLI writes the source into your project and pulls in whatever it depends on.

$pnpm dlx shadcn@latest add @duck/duck-tabs

Pulls in @duck/theme. Already installed items are skipped.

import { DuckTabs, DuckTabsList, DuckTabsTrigger, DuckTabsContent } from "@/components/ui/duck-tabs"

The file lands in components/ui/duck-tabs.tsx and belongs to you from that point on. Edit it in place rather than wrapping it.

Everything not listed here is forwarded to the underlying element.

Prop	Type	Default	Description
defaultValue	string	-	Uncontrolled starting tab.
value	string	-	Controlled active tab.
onValueChange	(value: string) => void	-	Fires on every change.