Reshaped Toggle button group

Buttons

About

Groups ToggleButton children with value props and manages their selection state, built on Button.Group. Supports single or multiple selection via selectionMode, controlled and uncontrolled modes through value/defaultValue, per-button disabled states and full keyboard navigation.

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

Code

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

Usage.tsx

import { Reshaped } from "reshaped/bundle";
import ToggleButtonGroup, { ToggleButton } from "@/components/ui/reshaped-toggle-button-group";

export default function Demo() {
  return (
    <Reshaped theme="slate">
      <div style={{ margin: "0 auto", padding: 24, display: "flex", justifyContent: "center" }}>
        <ToggleButtonGroup defaultValue={["1"]}>
          <ToggleButton value="1">Button 1</ToggleButton>
          <ToggleButton value="2" disabled>
            Button 2
          </ToggleButton>
          <ToggleButton value="3">Button 3</ToggleButton>
        </ToggleButtonGroup>
      </div>
    </Reshaped>
  );
}