How to change border radius of Tabs component in NextUI

Question

I have a problem in the tabs component of nextui. I want to change the radius as in the picture but the element is not in the code structure. How to solve it?

]

]

I tried with className={{ wrapper: ‘rounded-lg’}} in child element but it still doesn't work.

Answer 1

Problem :

How to change border radius of inner & outer part of Tabs component in NextUI

Cause :

There is no property/key wrapper for classNames in Tabs component.

Solution :

There are two ways to change radius :

• for custom border-radius, classNames
• radius prop

1. Using classNames prop for custom border-radius :

• classNames has keys

base｜ tabList｜ tab｜ tabContent｜ cursor ｜ panel

Tabs component has prop classNames pass border-radius to tabList & cursor keys in it to get desired result.

Code:

<Tabs
    classNames={{
        tabList: "rounded-xl bg-secondary", // Changes Border radius of outer part
        cursor: "rounded-sm",  //  Changes Border radius of inner part
    }}
>

Explanation :

• tabList : is the part that contains the tab names buttons(cursor)
• cursor : is the button that we click to change tab

---

2. Using radius prop :

radius prop valid values :

none | sm | md | lg | full

Code :

<Tabs radius={'lg'}>

Please Read :

• Tab Props : https://nextui.org/docs/components/tabs#tabs-props
• Custom Styles : https://nextui.org/docs/components/tabs#custom-styles
• Radius : https://nextui.org/docs/components/tabs#radius