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.
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.
77+ components across 9 categories:
Every component has a dedicated docs page with live examples and copyable code.
<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;
}
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.
Neumorphism has a reputation for being inaccessible (low contrast, no focus indicators). SoftUI addresses this:
:focus-visible outlines on every interactive elementprefers-reduced-motion disables all animationsdir="rtl" overrides for Arabic, Hebrew, FarsiThe 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.
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.
To prove SoftUI works for real apps, there's a full CloudMetrics demo — a SaaS dashboard with:
Every page is responsive, every form uses styled selects and date pickers, every dropdown and modal works correctly.
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.
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.
此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。