Reshaped Tabs

Navigation 3

About

Compound Tabs.List / Tabs.Item / Tabs.Panel component with matching ids, per-item icons and full composition control. Supports pills, pills-raised and borderless variants, row or column direction, three sizes, controlled and uncontrolled selection, equal-width items, flexible panel placement and native radio form submission via the name prop.

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

Code

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

Usage.tsx

import { Reshaped } from "reshaped/bundle";
import Tabs from "@/components/ui/reshaped-tabs";

const ActivityIcon = () => (
  <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
    <polyline points="22 12 18 12 15 21 9 3 6 12 2 12" />
  </svg>
);

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <Tabs defaultValue="1">
          <Tabs.List>
            <Tabs.Item value="1" icon={ActivityIcon}>
              Item 1
            </Tabs.Item>
            <Tabs.Item value="2" icon={ActivityIcon}>
              Long item 2
            </Tabs.Item>
            <Tabs.Item value="3" icon={ActivityIcon}>
              Very long item 3
            </Tabs.Item>
          </Tabs.List>
          <Tabs.Panel value="1">Tab 1</Tabs.Panel>
          <Tabs.Panel value="2">Tab 2</Tabs.Panel>
          <Tabs.Panel value="3">Tab 3</Tabs.Panel>
        </Tabs>
      </div>
    </Reshaped>
  );
}