DEV Community

Cover image for I Built a Neumorphic CSS Library with 77+ Components — Here's What I Learned
Siddharth Bhansali
Siddharth Bhansali

Posted on

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

#css #webdev #opensource #neumorphism

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>
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Or just add the CDN link and start building:

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

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.

Top comments (1)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.