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-visibleoutlines on every interactive element -
prefers-reduced-motiondisables 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.
