Reshaped Tabs

Forms

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";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ maxWidth: 480, width: "100%", margin: "0 auto", padding: 24 }}>
        <Tabs itemWidth="equal" defaultValue="1">
          <Tabs.List>
            <Tabs.Item value="1">Item 1</Tabs.Item>
            <Tabs.Item value="2">Item 2</Tabs.Item>
            <Tabs.Item value="3">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>
  );
}