Toggle and ToggleGroup styling broken

[wouter-deen]

I have a NextJS project with shadcn-ui installed. The project I created around a year ago, but I since upgraded to the latest NextJS version. I recently installed the latest versions of all components using npx shadcn@latest add -a -y -o (shadcn-ui v4+). All of the components I'm using seem to be working, but recently I wanted to add toggles to my app. To my frustration, they seem to be broken, and I've tried looking at the globals.scss, updating tailwind, and a host of other solutions, but nothing seems to work. I'm curious whether someone here might have an idea of what is going on.

See my toggles below:

  const [selectedValue, setSelectedValue] = useState<string>("daily"); // Add at the top with other state
  
  return (
      <ToggleGroup
        type="single"
        variant="outline"
        value={selectedValue} // Add this
        onValueChange={setSelectedValue}
      >
        <ToggleGroupItem value="daily">Daily</ToggleGroupItem>
        <ToggleGroupItem value="weekly">Weekly</ToggleGroupItem>
        <ToggleGroupItem value="monthly">Monthly</ToggleGroupItem>
      </ToggleGroup>

      <Toggle variant="outline">
        <BoldIcon />
      </Toggle>
  )

The borders are not rendered correctly for the togglegroup (at least not when compared to the docs), and their style doesn't change when I click on them. I can confirm, however, that their data-state toggles when I click them (on/off).

I'm hoping anyone here could have an idea of where I should look.

[Om-singh-ui]

This usually isn’t a Toggle bug — it’s caused by a Tailwind / shadcn style mismatch after upgrading.

Since data-state is changing, the component logic is working, but styles are not being applied correctly.

Things worth checking:

→ Make sure you are using the latest Toggle and ToggleGroup component files (old versions break with new shadcn tokens).
→ Verify your tailwind.config content paths include components and app directories.
→ Ensure your global CSS includes shadcn base styles and theme tokens.
→ Confirm data-[state=on] styles exist in the Toggle component file.
→ Try clearing .next and reinstalling dependencies to avoid stale builds.

In shadcn v4, many components depend on design tokens + CSS variables, so partial upgrades often cause broken borders or inactive state styles. Re-adding the Toggle components after updating Tailwind usually resolves this.