I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned

Siddharth Bhansali — Fri, 17 Apr 2026 18:37:28 +0000

What is SoftUI?

SoftUI is a neumorphic CSS component library. Instead of flat design or material shadows, everything uses soft, diffused shadows that make elements look like they're gently raised from or pressed into the surface.

No React. No Vue. No build step. Just CSS classes and an optional vanilla JS file for interactive components.

<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>

That's it. Drop it in any HTML page and start using sui- prefixed classes.

Why Neumorphism?

Every CSS library looks the same — flat cards, sharp shadows, the same Bootstrap-inspired aesthetic. Neumorphism offers something different: depth without heaviness, texture without noise. When done right, it feels tactile and premium.

The problem is that most neumorphic demos are just buttons and cards. Nobody built a complete, production-ready library with forms, data tables, modals, charts, and everything else you actually need. That's what SoftUI is.

What's Inside

77+ components across 9 categories:

Forms — inputs, styled selects (no native dropdowns), toggles, checkboxes, radios, sliders, color picker, file upload, OTP input, combobox, calendar/date picker, segmented control, editable text, radio cards, checkbox cards
General — buttons, cards, badges, avatars, chips, dividers, pricing cards, hero sections, list groups
Data Display — tables, sortable/filterable data tables with pagination, charts (bar, donut, line), stat cards, timeline, tree view, countdown timer, descriptions
Feedback — alerts, toasts, progress bars, spinners, skeleton loaders, loading overlays, result pages
Navigation — navbar, sidebar, tabs, breadcrumbs, pagination, stepper, dock, speed dial, navigation menu with mega-menus, scrollspy
Overlays — modals, sheets/drawers (with drag-to-dismiss), dropdowns, popovers, hover cards, tooltips, context menus, command palette
Layout — 12-column responsive grid, scroll area, accordion, collapsible, resizable panels, drag & drop
Media — carousel, lightbox, image diff, chat bubbles, browser/phone mockups, marquee, typewriter, text rotate, tour/walkthrough
Utilities — shadows, radius, spacing, text, flex, display, position, sizing, opacity, cursor, mask shapes

Every component has a dedicated docs page with live examples and copyable code.

Dark Mode That Just Works

<html data-theme="dark">

One attribute. Every component adapts automatically. No separate dark stylesheet, no JavaScript toggle logic needed (though we provide one).

All colors are CSS custom properties, so you can override them globally:

:root {
  --sui-primary: #7C5CFC;
  --sui-bg: #F0F2F5;
  --sui-radius: 12px;
}

No Native UI Anywhere

One decision I'm proud of: zero native browser UI. Every <select> is a custom styled dropdown. Every number input hides the native arrows. Date pickers use our own calendar component. Even the data table's filter and per-page selectors are custom dropdowns.

This means the UI looks consistent across every browser and OS. No more fighting Chrome's default select styling vs Firefox's.

Built-in Accessibility

Neumorphism has a reputation for being inaccessible (low contrast, no focus indicators). SoftUI addresses this:

WCAG AA contrast on all text colors
:focus-visible outlines on every interactive element
prefers-reduced-motion disables all animations
ARIA attributes on modals, tabs, dropdowns, accordions
Keyboard navigation — arrow keys in dropdowns, Escape to close overlays, Tab trapping in modals
RTL support — CSS logical properties + dir="rtl" overrides for Arabic, Hebrew, Farsi
Print styles — hides overlays, removes shadows, adds borders

The Data Table

The data table deserves its own mention. It does sort, search, filter, and paginate — all built-in with zero custom JavaScript:

<div class="sui-datatable">
  <div class="sui-datatable-toolbar">
    <div class="sui-datatable-search">
      <input type="text" placeholder="Search...">
    </div>
    <div class="sui-dropdown sui-datatable-filter" data-filter-attr="data-status">
      <button class="sui-dropdown-toggle" data-sui-dropdown>
        <span class="sui-datatable-filter-label">All Status</span>
      </button>
      <div class="sui-dropdown-menu">
        <button class="sui-dropdown-item active" data-value="">All</button>
        <button class="sui-dropdown-item" data-value="active">Active</button>
        <button class="sui-dropdown-item" data-value="inactive">Inactive</button>
      </div>
    </div>
  </div>
  <table class="sui-table">
    <thead>
      <tr>
        <th data-sort="string">Name</th>
        <th data-sort="number">Amount</th>
        <th data-sort="string">Status</th>
      </tr>
    </thead>
    <tbody>
      <tr data-status="active"><td>Alice</td><td>$299</td><td>Active</td></tr>
      <!-- more rows -->
    </tbody>
  </table>
  <div class="sui-datatable-footer">
    <div class="sui-datatable-info"></div>
    <div class="sui-datatable-pagination"></div>
  </div>
</div>

Click column headers to sort (3-click cycle: ascending, descending, reset). The styled filter dropdown filters by data attributes. Pagination auto-generates. Search is real-time. All working together.

Interactive Playground

The Playground lets you write HTML and see SoftUI components rendered instantly. There are 110 drag-and-drop snippets organized by category — click one and it inserts the code. Great for experimenting before committing to your project.

The Demo App

To prove SoftUI works for real apps, there's a full CloudMetrics demo — a SaaS dashboard with:

Login page
Dashboard with stat cards, charts, tables, activity feed
Analytics with bar charts, donut charts, radial progress
Customers with searchable/filterable data table, detail sheets
Orders with timeline tracking
Invoices with date picker modals
Team management with cards and invite modals
Settings with profile forms, password validation, notification toggles
Upgrade page with selectable pricing cards

Every page is responsive, every form uses styled selects and date pickers, every dropdown and modal works correctly.

What I'd Do Differently

Start with fewer components, ship faster. I built 77 components before launching. In hindsight, 20 solid ones would have been enough to get feedback and traction.

Design tokens from day one. Adding dist/tokens.json was an afterthought. If I'd structured the CSS variables as a token system from the start, theming would be even more powerful.

Write content earlier. The library was feature-complete for weeks before I started writing about it. Content (articles, comparisons, tutorials) is what drives discovery.

Try It

npm install softui-css

Or just add the CDN link and start building:

<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">

MIT licensed, free forever. If you find it useful, a star on GitHub or a coffee would mean a lot.

What neumorphic components would you want to see next? Drop a comment or open an issue on GitHub.

DEV Community: Siddharth Bhansali