softui-css 1.0.8 → 1.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +78 -35
- package/dist/softui.css +843 -2
- package/dist/softui.js +25 -1
- package/dist/softui.min.css +1 -1
- package/dist/softui.min.js +1 -1
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,19 +1,50 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
<p align="center">
|
|
2
|
+
<picture>
|
|
3
|
+
<source media="(prefers-color-scheme: dark)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-dark.png">
|
|
4
|
+
<source media="(prefers-color-scheme: light)" srcset="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png">
|
|
5
|
+
<img alt="SoftUI — Neumorphic CSS Components" src="https://raw.githubusercontent.com/siddharth-bhansali/softui/main/assets/banner-light.png" width="100%">
|
|
6
|
+
</picture>
|
|
7
|
+
</p>
|
|
8
|
+
|
|
9
|
+
<h1 align="center">SoftUI</h1>
|
|
10
|
+
|
|
11
|
+
<p align="center">
|
|
12
|
+
A neumorphic CSS library with soft shadows, muted palettes, and tactile depth.<br>
|
|
13
|
+
Zero dependencies. Dark mode built in. Just drop it in.
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p align="center">
|
|
17
|
+
<a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/v/softui-css?color=5B54E0&label=npm" alt="npm version"></a>
|
|
18
|
+
<a href="https://www.npmjs.com/package/softui-css"><img src="https://img.shields.io/npm/dm/softui-css?color=22c55e" alt="npm downloads"></a>
|
|
19
|
+
<a href="https://github.com/siddharth-bhansali/softui/blob/main/LICENSE"><img src="https://img.shields.io/github/license/siddharth-bhansali/softui?color=f59e0b" alt="license"></a>
|
|
20
|
+
<a href="https://softui-css.netlify.app"><img src="https://img.shields.io/badge/docs-live-5B54E0" alt="docs"></a>
|
|
21
|
+
</p>
|
|
22
|
+
|
|
23
|
+
<p align="center">
|
|
24
|
+
<a href="https://softui-css.netlify.app"><strong>Documentation</strong></a> ·
|
|
25
|
+
<a href="https://softui-demo.netlify.app"><strong>Live Demo</strong></a> ·
|
|
26
|
+
<a href="https://softui-css.netlify.app/playground/"><strong>Playground</strong></a>
|
|
27
|
+
</p>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Highlights
|
|
32
|
+
|
|
33
|
+
| | |
|
|
34
|
+
|---|---|
|
|
35
|
+
| **44+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
|
|
36
|
+
| **Dark Mode** | Add `data-theme="dark"` and everything adapts |
|
|
37
|
+
| **Zero Dependencies** | Pure CSS + vanilla JS. No build step required |
|
|
38
|
+
| **CSS Variables** | Fully customizable via custom properties |
|
|
39
|
+
| **Responsive Grid** | 12-column flexbox grid with breakpoints and gap utilities |
|
|
40
|
+
| **Interactive Playground** | Write HTML and preview components live in the browser |
|
|
41
|
+
|
|
42
|
+
---
|
|
6
43
|
|
|
7
44
|
## Install
|
|
8
45
|
|
|
9
46
|
```bash
|
|
10
47
|
npm install softui-css
|
|
11
|
-
# or
|
|
12
|
-
yarn add softui-css
|
|
13
|
-
# or
|
|
14
|
-
pnpm add softui-css
|
|
15
|
-
# or
|
|
16
|
-
bun add softui-css
|
|
17
48
|
```
|
|
18
49
|
|
|
19
50
|
### CDN
|
|
@@ -23,19 +54,18 @@ bun add softui-css
|
|
|
23
54
|
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
|
|
24
55
|
```
|
|
25
56
|
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
Download `softui.min.css` and `softui.min.js` from the `dist/` folder and include them in your HTML:
|
|
29
|
-
|
|
30
|
-
```html
|
|
31
|
-
<link rel="stylesheet" href="softui.min.css">
|
|
32
|
-
<script src="softui.min.js"></script>
|
|
33
|
-
```
|
|
57
|
+
---
|
|
34
58
|
|
|
35
59
|
## Quick Start
|
|
36
60
|
|
|
37
61
|
```html
|
|
62
|
+
<!DOCTYPE html>
|
|
63
|
+
<html lang="en">
|
|
64
|
+
<head>
|
|
65
|
+
<link rel="stylesheet" href="https://unpkg.com/softui-css/dist/softui.min.css">
|
|
66
|
+
</head>
|
|
38
67
|
<body class="sui-d-flex sui-justify-center sui-align-center sui-min-vh-100">
|
|
68
|
+
|
|
39
69
|
<div class="sui-card sui-raised sui-p-5 sui-text-center">
|
|
40
70
|
<h3>Hello SoftUI</h3>
|
|
41
71
|
<p class="sui-text-muted sui-mt-2 sui-mb-3">
|
|
@@ -43,53 +73,66 @@ Download `softui.min.css` and `softui.min.js` from the `dist/` folder and includ
|
|
|
43
73
|
</p>
|
|
44
74
|
<button class="sui-btn sui-btn-primary">Get Started</button>
|
|
45
75
|
</div>
|
|
76
|
+
|
|
77
|
+
<script src="https://unpkg.com/softui-css/dist/softui.min.js"></script>
|
|
46
78
|
</body>
|
|
79
|
+
</html>
|
|
47
80
|
```
|
|
48
81
|
|
|
49
|
-
|
|
82
|
+
---
|
|
50
83
|
|
|
51
|
-
|
|
84
|
+
## Dark Mode
|
|
52
85
|
|
|
53
86
|
```html
|
|
54
87
|
<html data-theme="dark">
|
|
55
88
|
```
|
|
56
89
|
|
|
90
|
+
That's it. Every component adapts automatically.
|
|
91
|
+
|
|
92
|
+
---
|
|
93
|
+
|
|
57
94
|
## Components
|
|
58
95
|
|
|
59
|
-
**Layout**
|
|
96
|
+
**Layout** — Container, Grid, Flex utilities
|
|
60
97
|
|
|
61
|
-
**Forms**
|
|
98
|
+
**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox
|
|
62
99
|
|
|
63
|
-
**Data Display**
|
|
100
|
+
**Data Display** — Table, Data Table, Card, Badge, Avatar, Kbd, Chart
|
|
64
101
|
|
|
65
|
-
**Feedback**
|
|
102
|
+
**Feedback** — Alert, Toast, Progress, Skeleton, Spinner
|
|
66
103
|
|
|
67
|
-
**Navigation**
|
|
104
|
+
**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
|
|
68
105
|
|
|
69
|
-
**Overlay**
|
|
106
|
+
**Overlay** — Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette
|
|
70
107
|
|
|
71
|
-
**Interactive**
|
|
108
|
+
**Interactive** — Accordion, Collapsible, Carousel, Toggle Group, Calendar, Drag & Drop
|
|
72
109
|
|
|
73
|
-
**Content**
|
|
110
|
+
**Content** — Chip, Divider, Scroll Area, Resizable, Button Group
|
|
74
111
|
|
|
75
|
-
**Utilities**
|
|
112
|
+
**Utilities** — Shadows, Radius, Spacing, Text, Aspect Ratio, Typography
|
|
76
113
|
|
|
77
|
-
|
|
114
|
+
> Browse all components at [softui-css.netlify.app](https://softui-css.netlify.app) or try them in the [Playground](https://softui-css.netlify.app/playground/).
|
|
78
115
|
|
|
79
|
-
|
|
116
|
+
---
|
|
117
|
+
|
|
118
|
+
## Customization
|
|
119
|
+
|
|
120
|
+
SoftUI is built on CSS custom properties. Override them to make it yours:
|
|
80
121
|
|
|
81
122
|
```css
|
|
82
123
|
:root {
|
|
83
124
|
--sui-primary: #7C5CFC;
|
|
84
125
|
--sui-radius: 12px;
|
|
85
|
-
--sui-
|
|
126
|
+
--sui-font: 'Inter', sans-serif;
|
|
86
127
|
}
|
|
87
128
|
```
|
|
88
129
|
|
|
130
|
+
---
|
|
131
|
+
|
|
89
132
|
## Browser Support
|
|
90
133
|
|
|
91
|
-
All modern browsers
|
|
134
|
+
All modern browsers — Chrome, Firefox, Safari, Edge.
|
|
92
135
|
|
|
93
136
|
## License
|
|
94
137
|
|
|
95
|
-
MIT
|
|
138
|
+
[MIT](LICENSE)
|