I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned
SoftUI — soft shadows, dark mode, RTL, accessibility, and zero dependencies
Every CSS library looks the same. Flat cards, sharp shadows, the same Bootstrap-inspired look. I wanted something different — something that felt tactile and premium. So I built SoftUI, a neumorphic CSS component library.
No React. No Vue. No build tools. Just CSS + optional vanilla JS. Drop in two files and start building.
What is Neumorphism?
Neumorphism uses soft, diffused shadows to make elements look like they're gently raised from or pressed into the surface. Think of it as the middle ground between flat design and skeuomorphism — subtle depth without being heavy.
The problem? Most neumorphic demos are just buttons and cards. Nobody built a complete library with forms, data tables, modals, charts, and everything you actually need for real apps. Until now.
77+ Components
SoftUI covers everything:
Forms — styled selects (no native browser dropdowns), toggles, radios, checkboxes, sliders, colour picker, file upload, OTP input, date picker, segmented control, editable text, radio/checkbox cards
Data — sortable/filterable data tables with built-in pagination, bar/donut/line charts, stat cards, timeline, tree view, countdown, skeleton loaders
Navigation — navbar, sidebar, tabs, breadcrumbs, stepper, dock, speed dial, mega-menu with sub-menus, scrollspy
Overlays — modals, bottom drawers with drag-to-dismiss and snap points, dropdowns, popovers, tooltips, command palette, context menus
Media — carousel, lightbox, image diff slider, chat bubbles, browser/phone mockups, marquee, typewriter, text rotate
Utilities — 12-column responsive grid, spacing, flex, shadows, mask shapes (circle, star, heart, hexagon), and more
Dark Mode in One Attribute
<html data-theme="dark">
Every component adapts. No extra CSS file, no JavaScript required. All colours are CSS custom properties:
:root {
--sui-primary: #7C5CFC;
--sui-bg: #F0F2F5;
--sui-radius: 12px;
}
Override them to match your brand in seconds.
Zero Native Browser UI
This is the decision I'm most proud of. Every <select> is a custom styled dropdown. Number inputs hide native arrows. Date pickers use our own calendar. Data table filters and per-page selectors are all custom.
The result: pixel-perfect consistency across Chrome, Firefox, Safari, and Edge. No more fighting browser defaults.
Accessibility Done Right
Neumorphism has a bad reputation for accessibility. Low contrast, no focus indicators, style over substance. SoftUI fixes all of that:
WCAG AA contrast on all text
:focus-visibleon every interactive elementprefers-reduced-motiondisables all animationsARIA roles on modals, tabs, dropdowns, accordions
Keyboard navigation everywhere (arrow keys, Escape, Tab trapping)
RTL support for Arabic, Hebrew, Farsi
Print styles that actually work
The Data Table
Worth highlighting on its own. Add data-sort to column headers for sorting, wrap in .sui-datatable for search + filter + pagination. Everything works together with zero custom JavaScript:
Click headers to sort (asc → desc → reset)
Styled dropdown filters by data attributes
Auto-generated pagination
Real-time search
Styled per-page selector
All plug-and-play.
A Real Demo App
I built a full CloudMetrics demo — a SaaS dashboard with 9 pages:
Dashboard with charts, stat cards, activity feed
Analytics with bar/donut/radial charts
Customers with searchable data table + detail sheets
Orders with timeline tracking
Invoices with calendar date pickers
Settings with form validation + notification toggles
Team management with avatar cards
Upgrade page with selectable pricing
Every form uses styled selects. Every dropdown works. Every page is responsive with a hamburger menu on mobile. It proves SoftUI works for real applications, not just component demos.
Interactive Playground
The Playground has 110 drag-and-drop snippets. Click a component name, it inserts the code, and you see it rendered instantly. Dark mode preview toggle included.
What I'd Do Differently
Ship with fewer components, iterate faster. I built 77 before launching. 20 solid ones would have been enough to get feedback.
Structure design tokens from day one. The tokens.json file was an afterthought. Should have been the foundation.
Write content earlier. The library was done for weeks before I wrote a single article. Content is distribution. Code alone doesn't get discovered.
Get Started
npm install softui-css
Or CDN:
<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
Links:
MIT licensed, free forever. A GitHub star or coffee would mean a lot if you find it useful.
What would you build with neumorphic components? I'd love to see it — drop a comment or share in the GitHub discussions.