Next.js Discord

Discord Forum

shadcn-ui with nexjs

Unanswered
Hackberry nipple gall parasitoid posted this in #help-forum
Open in Discord
Hackberry nipple gall parasitoidOP
Hello, I got a problem with shadcn-ui and nextjs the input provided by shadcn-ui has this border color which I dont like and Im not sure how to remove it.

{/* Input Username */}
                <div className="mt-1">
                    <Label className="text-sm text-[#f0f4ff] font-medium"> Username</Label>
                    <Input
                        type="text"
                        placeholder="Enter your  username..."
                        className="flex items-center justify-between p-4 rounded-md bg-[#181A28] transition-all duration-200 ease-in-out max-w-full h-12 text-white focus:outline-none mt-2 border-0"
                        value={username}
                        onChange={(e) => setUsername(e.target.value)}
                    />
                </div>

2 Replies

Hackberry nipple gall parasitoidOP
ring-0 border-0 focus-visible:ring-offset-0 focus-visible:ring-0


I removed like this,

but i got an other problem
when I click it its become white for some reason any idea?
luis_llanes
I think that’s the “outline”, indicating that field is active.

If you want the same behavior in every input try modifying the input.tsx file ShadCn adds for you