How to hide that default gray line under the tabs

[buoyant dagger]

follow the arrows

How to hide that default gray line under the tabs

[paper ruin]

This is one way, but I'm not sure it's the best. <Tabs
variant="pills"
color="transparent"
defaultValue="gallery"
styles={{
tabSection: {
color: "black",
},
tabLabel: {
color: "black",
},
}}

or you can use css "https://help.mantine.dev/q/tabs-border-color"

[buoyant dagger]

this actually hides the orange underline (the line that highlight the active tab) not the gray long line, though i don't know why without orange underline it looks much better, so thanks

[potent musk]

is this what you are trying to achieve? https://codesandbox.io/p/sandbox/mantine-react-template-q4dd5d

I'd advice you to read through https://mantine.dev/styles/styles-api/

In this specific case I'm passing a class to the list:

<Tabs classNames={{ list: classes.tabsWithoutLine }}>

Inside the class I'm specifically targeting the :before pseudo-element

.tabsWithoutLine {
  &:before {
    border: none;
  }
}

[buoyant dagger]

woah

this works like charm

thank you so much dude