sander-ui 0.1.22 → 0.1.24
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 +58 -7
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,8 +1,21 @@
|
|
|
1
1
|
# 🧩 sander-ui
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/sander-ui)
|
|
4
|
+
[](https://github.com/sanderyt/sander-ui/blob/master/LICENSE)
|
|
4
5
|
|
|
5
|
-
|
|
6
|
+
A modern, accessible React component library — lightweight, themeable, and ready for production.
|
|
7
|
+
|
|
8
|
+
**[🌐 Live Demo](https://n8n-sander-ui-showcase.igjw7r.easypanel.host/)** · **[📖 Storybook Docs](https://n8n-sander-ui.igjw7r.easypanel.host)**
|
|
9
|
+
|
|
10
|
+
## ✨ Why sander-ui?
|
|
11
|
+
|
|
12
|
+
- **Accessibility-first** — Built on native HTML elements (`<dialog>`, `<details>`), full ARIA support, keyboard navigation, and focus management baked into every component.
|
|
13
|
+
- **Zero-runtime styling** — CSS Modules + CSS Custom Properties. Scoped styles with zero CSS-in-JS overhead.
|
|
14
|
+
- **Minimal dependencies** — Only `classnames` and `lucide-react` at runtime. All animations are pure CSS — no heavy libraries needed.
|
|
15
|
+
- **28 production-ready components** — Forms, feedback, data display, navigation, and layout with compound component patterns (e.g. Modal + ModalHeader/Body/Footer).
|
|
16
|
+
- **Design token system** — Comprehensive CSS custom properties for colors, typography, spacing, radii, shadows, and transitions — ready for theming via simple variable overrides.
|
|
17
|
+
- **Tree-shakeable** — ES module exports with subpath imports (`sander-ui/button`) for optimal bundle size.
|
|
18
|
+
- **TypeScript-first** — Strict mode, full type definitions, and clear prop interfaces for every component.
|
|
6
19
|
|
|
7
20
|
## 📦 Installation
|
|
8
21
|
|
|
@@ -21,6 +34,13 @@ import { Button, Input, Modal } from "sander-ui";
|
|
|
21
34
|
import "sander-ui/styles.css";
|
|
22
35
|
```
|
|
23
36
|
|
|
37
|
+
You can also import individual components via subpath exports for optimal tree-shaking:
|
|
38
|
+
|
|
39
|
+
```tsx
|
|
40
|
+
import { Button } from "sander-ui/button";
|
|
41
|
+
import { Modal, ModalHeader, ModalBody, ModalFooter } from "sander-ui/modal";
|
|
42
|
+
```
|
|
43
|
+
|
|
24
44
|
Use them in your app:
|
|
25
45
|
|
|
26
46
|
```tsx
|
|
@@ -36,10 +56,26 @@ function App() {
|
|
|
36
56
|
}
|
|
37
57
|
```
|
|
38
58
|
|
|
59
|
+
Many components support compound patterns for flexible composition:
|
|
60
|
+
|
|
61
|
+
```tsx
|
|
62
|
+
<Card>
|
|
63
|
+
<CardHeader>
|
|
64
|
+
<Heading as="h3">Card Title</Heading>
|
|
65
|
+
</CardHeader>
|
|
66
|
+
<CardBody>
|
|
67
|
+
<Text>Card content goes here.</Text>
|
|
68
|
+
</CardBody>
|
|
69
|
+
<CardFooter>
|
|
70
|
+
<Button variant="primary">Save</Button>
|
|
71
|
+
</CardFooter>
|
|
72
|
+
</Card>
|
|
73
|
+
```
|
|
74
|
+
|
|
39
75
|
## 🗂️ Components
|
|
40
76
|
|
|
41
77
|
### 📝 Form
|
|
42
|
-
`Button` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch`
|
|
78
|
+
`Button` · `IconButton` · `Input` · `Textarea` · `Select` · `Checkbox` · `Radio` · `Switch`
|
|
43
79
|
|
|
44
80
|
### 💬 Feedback
|
|
45
81
|
`Alert` · `Toast` · `Progress` · `Spinner` · `Skeleton`
|
|
@@ -51,13 +87,28 @@ function App() {
|
|
|
51
87
|
`Tabs` · `Breadcrumbs` · `Pagination` · `Dropdown`
|
|
52
88
|
|
|
53
89
|
### 📐 Layout
|
|
54
|
-
`Card` · `Modal` · `Drawer`
|
|
90
|
+
`Container` · `Card` · `Modal` · `Drawer` · `Heading` · `Text`
|
|
91
|
+
|
|
92
|
+
See the components in action at the **[🌐 Live Demo](https://n8n-sander-ui-showcase.igjw7r.easypanel.host/)**, or browse interactive examples and full prop documentation at the **[📖 Storybook](https://n8n-sander-ui.igjw7r.easypanel.host)**.
|
|
93
|
+
|
|
94
|
+
## 🎨 Theming
|
|
95
|
+
|
|
96
|
+
All visual decisions are centralized in CSS custom properties, making theming as simple as overriding variables:
|
|
97
|
+
|
|
98
|
+
```css
|
|
99
|
+
:root {
|
|
100
|
+
--color-primary: #6366f1;
|
|
101
|
+
--color-primary-hover: #4f46e5;
|
|
102
|
+
--font-family: "Inter", system-ui, sans-serif;
|
|
103
|
+
--radius-md: 0.5rem;
|
|
104
|
+
}
|
|
105
|
+
```
|
|
55
106
|
|
|
56
|
-
|
|
107
|
+
Available token categories: colors, typography ([Outfit](https://fonts.google.com/specimen/Outfit)), spacing, border radius, shadows, transitions, and z-index.
|
|
57
108
|
|
|
58
|
-
##
|
|
109
|
+
## 🌐 Browser Support
|
|
59
110
|
|
|
60
|
-
|
|
111
|
+
Supports all modern browsers (Chrome, Firefox, Safari, Edge). Requires support for CSS Custom Properties and ES Modules.
|
|
61
112
|
|
|
62
113
|
## 📄 License
|
|
63
114
|
|