A neumorphic CSS library with soft shadows, muted palettes, and tactile depth.
Zero dependencies. Dark mode built in. Just drop it in.
Documentation · Live Demo · Playground · Buy Me a Coffee ☕
| Feature | Description |
|---|---|
| 77+ Components | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, Pricing, and more |
| Dark Mode | Add data-theme="dark" and everything adapts |
| Zero Dependencies | Pure CSS + vanilla JS. No build step required |
| CSS Variables | Fully customizable via custom properties |
| RTL Support | Right-to-left layout for Arabic, Hebrew, Farsi |
| Accessible | WCAG AA contrast, focus-visible, prefers-reduced-motion, ARIA |
| Responsive Grid | 12-column flexbox grid with breakpoints and gap utilities |
| Interactive Playground | Write HTML and preview components live in the browser |
npm install softui-css<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><!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
</head>
<body class="sui-d-flex sui-justify-center sui-align-center sui-min-vh-100">
<div class="sui-card sui-raised sui-p-5 sui-text-center">
<h3>Hello SoftUI</h3>
<p class="sui-text-muted sui-mt-2 sui-mb-3">
A neumorphic card with a soft raised shadow.
</p>
<button class="sui-btn sui-btn-primary">Get Started</button>
</div>
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
</body>
</html><html data-theme="dark">That's it. Every component adapts automatically.
Forms — Input, Styled Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox, Color Picker, File Upload, Tags Input, Number Input, Password Input, Segmented Control, Editable Text, Radio Card, Checkbox Card
General — Buttons, Button Group, Card, Badge, Avatar, Chip, Divider, Kbd, Copy Button, Swap, Pricing, Hero, List Group
Data Display — Table, Data Table, Chart, Stat Card, Timeline, Chat Bubble, Calendar, Tree View, Radial Progress, Rating, Descriptions, Countdown
Feedback — Alert, Toast, Progress, Skeleton, Spinner, Loading Overlay, Result
Navigation — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar, Sidebar, Dock, Speed Dial, Tour, Navigation Menu, Scrollspy
Overlays — Modal, Sheet, Drawer, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette, Image Lightbox
Layout — Container, Grid, Flex utilities, Resizable, Scroll Area, Collapsible, Accordion, Drag & Drop
Media — Carousel, Diff, Stack, Browser Mockup, Phone Mockup, Marquee, Typewriter, Text Rotate, Toggle Group
Utilities — Shadows, Radius, Spacing, Text, Typography, Aspect Ratio, Display, Position, Sizing, Opacity, Cursor, Flex, Mask
Browse all components at softui-css.netlify.app or try them in the Playground.
SoftUI is built on CSS custom properties. Override them to make it yours:
:root {
--sui-primary: #7C5CFC;
--sui-radius: 12px;
--sui-font: 'Inter', sans-serif;
}All design values are also available as JSON for use with Tailwind, Figma, or any tool:
import tokens from 'softui-css/dist/tokens.json';
// tokens.colors.primary → "#5B54E0"
// tokens.radius.default → "16px"See the Theming Guide for the full variable reference.
All modern browsers — Chrome, Firefox, Safari, Edge.