softui-css 1.6.0 → 1.8.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 +23 -10
- package/dist/softui.css +1033 -9
- package/dist/softui.js +295 -3
- package/dist/softui.min.css +1 -1
- package/dist/softui.min.js +1 -1
- package/dist/tokens.json +58 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -32,10 +32,11 @@
|
|
|
32
32
|
|
|
33
33
|
| | |
|
|
34
34
|
|---|---|
|
|
35
|
-
| **
|
|
35
|
+
| **60+ Components** | Buttons, Cards, Modals, Tables, Tabs, Calendar, Charts, and more |
|
|
36
36
|
| **Dark Mode** | Add `data-theme="dark"` and everything adapts |
|
|
37
37
|
| **Zero Dependencies** | Pure CSS + vanilla JS. No build step required |
|
|
38
38
|
| **CSS Variables** | Fully customizable via custom properties |
|
|
39
|
+
| **Design Tokens** | `tokens.json` for syncing with Tailwind, Figma, or any tool |
|
|
39
40
|
| **Responsive Grid** | 12-column flexbox grid with breakpoints and gap utilities |
|
|
40
41
|
| **Interactive Playground** | Write HTML and preview components live in the browser |
|
|
41
42
|
|
|
@@ -93,23 +94,23 @@ That's it. Every component adapts automatically.
|
|
|
93
94
|
|
|
94
95
|
## Components
|
|
95
96
|
|
|
96
|
-
**
|
|
97
|
+
**Forms** — Input, Select, Textarea, Toggle, Checkbox, Radio, Slider, OTP, Combobox, Color Picker, File Upload, Tags Input, Number Input, Password Input
|
|
97
98
|
|
|
98
|
-
**
|
|
99
|
+
**General** — Buttons, Button Group, Card, Badge, Avatar, Chip, Divider, Kbd, Copy Button, Swap
|
|
99
100
|
|
|
100
|
-
**Data Display** — Table, Data Table, Card,
|
|
101
|
+
**Data Display** — Table, Data Table, Chart, Stat Card, Timeline, Chat Bubble, Calendar, Tree View, Radial Progress, Rating
|
|
101
102
|
|
|
102
|
-
**Feedback** — Alert, Toast, Progress, Skeleton, Spinner
|
|
103
|
+
**Feedback** — Alert, Toast, Progress, Skeleton, Spinner, Loading Overlay
|
|
103
104
|
|
|
104
|
-
**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar
|
|
105
|
+
**Navigation** — Navbar, Tabs, Breadcrumb, Pagination, Stepper, Menubar, Sidebar, Dock, Speed Dial, Tour
|
|
105
106
|
|
|
106
|
-
**
|
|
107
|
+
**Overlays** — Modal, Sheet, Dropdown, Popover, Hover Card, Tooltip, Context Menu, Command Palette, Image Lightbox
|
|
107
108
|
|
|
108
|
-
**
|
|
109
|
+
**Layout** — Container, Grid, Flex utilities, Resizable, Scroll Area, Collapsible, Accordion, Carousel, Toggle Group, Drag & Drop
|
|
109
110
|
|
|
110
|
-
**
|
|
111
|
+
**Media** — Diff, Stack, Browser Mockup, Phone Mockup, Marquee, Typewriter, Text Rotate
|
|
111
112
|
|
|
112
|
-
**Utilities** — Shadows, Radius, Spacing, Text, Aspect Ratio,
|
|
113
|
+
**Utilities** — Shadows, Radius, Spacing, Text, Typography, Aspect Ratio, Display, Position, Sizing, Opacity, Cursor, Flex
|
|
113
114
|
|
|
114
115
|
> 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/).
|
|
115
116
|
|
|
@@ -127,6 +128,18 @@ SoftUI is built on CSS custom properties. Override them to make it yours:
|
|
|
127
128
|
}
|
|
128
129
|
```
|
|
129
130
|
|
|
131
|
+
### Design Tokens
|
|
132
|
+
|
|
133
|
+
All design values are also available as JSON for use with Tailwind, Figma, or any tool:
|
|
134
|
+
|
|
135
|
+
```js
|
|
136
|
+
import tokens from 'softui-css/dist/tokens.json';
|
|
137
|
+
// tokens.colors.primary → "#5B54E0"
|
|
138
|
+
// tokens.radius.default → "16px"
|
|
139
|
+
```
|
|
140
|
+
|
|
141
|
+
See the [Theming Guide](https://softui-css.netlify.app/theming/) for the full variable reference.
|
|
142
|
+
|
|
130
143
|
---
|
|
131
144
|
|
|
132
145
|
## Browser Support
|