←  Back to Blog

Why Building a ShadCN Input with Icons Using Tailwind Took Me Hours

Tried to build a styled input from Untitled UI using ShadCN and Tailwind? Here's my real story of struggling with icon placement, padding, and layout — and how that pain sparked the idea that eventually became DSy.

From Figma to Code using ShadCN Input

I had a clean input design in Figma (thanks to Untitled UI): Left icon, right icon, perfect focus state.

But when I tried building it with ShadCN UI + Tailwind, things got messy. What should've taken 10 minutes… took hours.

Why It Wasn't So Simple as I thought

ShadCN isn’t plug-and-play. It's flexible — but you need to:

  • Understand how its components are wired
  • Use clsx, cva, and variants properly
  • Manually nest wrappers and adjust spacing

It’s great for control. But not for speed.

I Just Wanted This:

From Figma: 📩 Mail icon on the left, 👁 Clear or eye icon on the right, ✨ Focus ring that looked clean. But to get icons working, I had to:

  • Wrap the input in a div to hold the icons.
  • Add left and/or right icons inside the div as needed.
  • Apply focus styles to the wrapper div since it handles focus now.
  • Dynamically adjust input padding based on which icons are present to prevent overlap.

Not Just My Problem, If you're:

  • A solo builder or freelancer
  • Learning Tailwind or React
  • Short on time

You'll probably face the same wall. You don’t always want to fight component architecture. Sometimes you just want to build and move on.

What if we built components in mins?

In this case build Input in minutes/clicks — without the guesswork:

Pick component -> Tweak in clicks -> Copy code

DSy input in minutes

How DSy eases the pain and saves time

  • Set padding, colors, and states visually — no manual Tailwind classes tweaking.
  • Add left/right icons in clicks — no wrappers, no manual layout fixes.
  • No design system? No problem — style from scratch in minutes.
  • Preview everything live as you build - No learning curve.
  • Copy clean, ready-to-use component + usage code.
  • Save hours of guesswork — and skip the frustration.Build features that matters!

What I’d Tell Myself a Year Ago

"You don’t have to rebuild every component from scratch to ship something great."

That input pain? One of many that stayed with me. It helped shape DSy — a tool to help people skip the grunt work and move faster.

If you've struggled with small things that eat big time — DSy is for you.

Follow the Journey

Building DSy in public: tips, small wins, real dev pain.

Join the waitlist or follow @limbachiyariddh — DMs open ❤️