SegmentedControl does not animate when switching color schema
Author: sariogluCreated Sep 17, 2026Updated Sep 17, 2026
Dependencies check up
- I have verified that I use latest version of all @mantine/* packages
What version of @mantine/* packages do you have in package.json?
9.6.1
What package has an issue?
@mantine/core
What framework do you use?
Next.js
In which browsers you can reproduce the issue?
All
Describe the bug
I have a SegmentedControl based component to let user decide on the color schema. I realized it doesn't animate the transition while all the other SegmentedControls work as expected. Here is the code I used:
"use client";
import { Center, SegmentedControl, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
import { IconMoonStars, IconSun } from "@tabler/icons-react";
import type { FC } from "react";
export const ColorSchemaSwitch: FC = () => {
const { setColorScheme } = useMantineColorScheme();
const colorScheme = useComputedColorScheme("light", { getInitialValueInEffect: true });
return (
<SegmentedControl
value={colorScheme}
onChange={(value) => setColorScheme(value as "light" | "dark")}
data={[
{
value: "light",
label: (
<Center>
<IconSun />
</Center>
),
},
{
value: "dark",
label: (
<Center>
<IconMoonStars />
</Center>
),
},
]}
/>
);
};
If possible, include a link to a codesandbox with a minimal reproduction
No response
Possible fix
I'm not sure what's the root cause and what does a potential solution look like but I can take a look if needed.
Self-service
- I would be willing to implement a fix for this issue
Source: mantinedev/mantine