Tabs Carriage

Navigation

About

A tab navigation component whose active-tab underline moves like a typewriter carriage, gliding forward with spring physics and snapping back with a bounce on backward moves.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Tabs Carriage to your project and fits it to your theme.

Code

How Tabs Carriage is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import CarriageReturn from "@/components/ui/tabs-carriage";

export default function TabsCarriageDemo() {
  return (
    <div className="w-full max-w-md p-8">
      <CarriageReturn
        tabs={[
          {
            id: "overview",
            label: "Overview",
            content: (
              <p>
                A quick summary of the project, its goals, and current status at
                a glance.
              </p>
            ),
          },
          {
            id: "activity",
            label: "Activity",
            content: (
              <p>
                Recent changes, comments, and updates from your team appear here
                in chronological order.
              </p>
            ),
          },
          {
            id: "settings",
            label: "Settings",
            content: (
              <p>
                Configure preferences, notifications, and permissions for this
                workspace.
              </p>
            ),
          },
        ]}
      />
    </div>
  );
}