iconiq

Registry Component

Tabs

Animated tabs with measured active and hover underlines, plus a blurred content transition for the active panel.

Live Playground

Switch between the three views to test the underline tracking, hover state, and content transition timing.

Product workspace

Keep the main summary visible while switching between planning, delivery, and support details without leaving the current surface.

Move between the tabs to inspect the measured underline motion, hover trail, and the blurred content transition between panels.

Install And Iterate

Install the component directly into your codebase, then branch into v0 if you want to iterate on variations.

Install

Build with v0

Send the registry bundle into v0 when you want to explore new colorways, copy, or layout directions quickly.

Usage

Use the shadcn-style root, list, trigger, and content primitives while keeping the same underline treatment and panel motion.

tsx
import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@/components/ui/tabs";

export function WorkspaceTabs() {
  return (
    <Tabs className="w-full" defaultValue="overview">
      <TabsList>
        <TabsTrigger value="overview">Overview</TabsTrigger>
        <TabsTrigger value="activity">Activity</TabsTrigger>
        <TabsTrigger value="files">Files</TabsTrigger>
      </TabsList>

      <TabsContent value="overview">
        <p className="text-sm text-muted-foreground">
          A concise summary for the current workspace.
        </p>
      </TabsContent>

      <TabsContent value="activity">
        <p className="text-sm text-muted-foreground">
          Recent updates, comments, and handoff notes.
        </p>
      </TabsContent>

      <TabsContent value="files">
        <p className="text-sm text-muted-foreground">
          Attached assets and supporting documents.
        </p>
      </TabsContent>
    </Tabs>
  );
}

API Details

Each item below covers the documented props and the behavior that matters during implementation.