Most modern interfaces are built from familiar pieces.
Buttons, cards, inputs, dropdowns, dialogs. We have excellent libraries for all of them. Yet when you browse enough products, you start noticing something: many interfaces feel remarkably similar.
I wanted to explore a different visual direction.
That's why I built "baloot-neomorphic-ui" (https://github.com/sajjadcodes/baloot-neomorphic-ui), a reusable neomorphic UI component library for Next.js App Router and Tailwind CSS v4.
The idea was simple: take the soft depth of neomorphism and turn it into a practical component system developers can use in real applications.
Why neomorphism?
Neomorphism, sometimes called Soft UI, creates depth through subtle highlights and shadows. Instead of relying on strong borders or dramatic contrast, components appear to rise from or press into their surrounding surfaces.
Done well, the result feels calm, tactile, and distinctive.
But a visual concept is only the beginning. A design that looks beautiful in a mockup still needs to work as an actual interface.
Buttons need clear states. Forms need useful validation. Components need to behave consistently. And the design needs to work in both light and dark themes.
A design system should make consistency easier, not turn every new component into another styling problem.
From visual idea to reusable components
I built the library around that principle.
Rather than recreating the same styles and behaviors across projects, the library provides reusable components with a shared visual language.
It includes:
- Form controls: inputs, textareas, selects, checkboxes, radio groups, switches, and sliders.
- Navigation and layout: cards, tabs, breadcrumbs, sidebars, pagination, and tables.
- Feedback components: alerts, snackbars, dialogs, progress indicators, and skeletons.
The library also includes theme tokens, allowing developers to customize the visual system instead of treating every component as an isolated design.
It is built for Next.js App Router projects using Tailwind CSS v4, with TypeScript support.
Design is more than shadows
Neomorphism has a weakness: subtle visual depth can become a usability problem when it makes interactive elements difficult to distinguish.
That trade-off matters.
A component library cannot focus exclusively on appearance. It also needs to consider accessible markup, keyboard interactions, visible focus feedback, disabled states, and reduced-motion preferences where relevant.
The goal isn't to make every element look beautiful at the expense of usability. It's to make the visual identity and the interaction design work together.
That's the difference between a collection of styled components and a library intended for real applications.
Try it in your next project
You can install the package with npm:
npm install baloot-neomorphic-ui
Explore the source code, installation instructions, component examples, and theme customization options in the repository:
GitHub: https://github.com/sajjadcodes/baloot-neomorphic-ui
npm: https://www.npmjs.com/package/baloot-neomorphic-ui
The library is an evolving project, and I'm interested in making it more useful as it grows.
One question for frontend developers
We have no shortage of component libraries. What we need isn't necessarily another library with more components.
Sometimes, we need a different design perspective.
When choosing a UI library, what matters most to you: visual identity, accessibility, customization, developer experience, or the speed of building an interface?
I'd be interested to hear what other developers prioritize — and what you think neomorphism gets right or wrong.
Top comments (0)