DEV Community

Jan Silva
Jan Silva

Posted on

Remove ugly blue on focus ring border from NextUI Input Component

#nextjs #react #tailwindcss #nextui

I looked everywhere for this. I hope you save some time.

<Input 
    classNames={{
        inputWrapper: "group-data-[focus-visible=true]:ring-0 group-data-[focus-visible=true]:ring-offset-0"
    }}
    placeholder="write something..."
/>
Enter fullscreen mode Exit fullscreen mode

source: some guy on github

Top comments (0)

Read next

ernestothagreat profile image

How to build a Lottery App with Solidity, Chainlink VRF V2.5 and React.js(Vite)

Ernesto -

codingashish_dev profile image

5 Ways to Add Tailwind CSS to Your Project

Ashish Prajapati -

dev007777 profile image

Open Canvas Vs ChatGPT Canvas

TheDev -

mukarramjavid profile image

How to Create PDFs in React from JSON Data with jsPDF

Mukarram Javid -