@nevil5249/shadowcraft 1.0.3 → 1.0.5
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 +43 -94
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,154 +1,103 @@
|
|
|
1
1
|
# ShadowCraft
|
|
2
2
|
|
|
3
|
-
|
|
4
|
-
<p align="center">
|
|
5
|
-
```
|
|
6
|
-
`<strong>`{=html}Precision Volumetric Interface Shadows for Tailwind
|
|
7
|
-
CSS`</strong>`{=html}
|
|
8
|
-
```{=html}
|
|
9
|
-
</p>
|
|
10
|
-
```
|
|
11
|
-
```{=html}
|
|
12
|
-
<p align="center">
|
|
13
|
-
```
|
|
14
|
-
A professional-grade shadow system engineered for modern interface
|
|
15
|
-
architecture.
|
|
16
|
-
```{=html}
|
|
17
|
-
</p>
|
|
18
|
-
```
|
|
19
|
-
```{=html}
|
|
20
|
-
<p align="center">
|
|
21
|
-
```
|
|
22
|
-
`<a href="https://www.npmjs.com/package/@nevil5249/shadowcraft">`{=html}NPM`</a>`{=html}
|
|
23
|
-
•
|
|
24
|
-
`<a href="https://shadowcraft.nevilgadhia.in">`{=html}Website`</a>`{=html}
|
|
25
|
-
```{=html}
|
|
26
|
-
</p>
|
|
27
|
-
```
|
|
3
|
+
**Precision Volumetric Interface Shadows for Tailwind CSS**
|
|
28
4
|
|
|
29
|
-
|
|
5
|
+
A professional-grade shadow system engineered for modern interface architecture.
|
|
30
6
|
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
ShadowCraft is a Tailwind CSS plugin that introduces a structured,
|
|
34
|
-
multi-layered shadow architecture designed to replicate realistic depth
|
|
35
|
-
and spatial hierarchy in modern UI systems.
|
|
7
|
+
[NPM](https://www.npmjs.com/package/@nevil5249/shadowcraft) • [Website](https://shadowcraft.nevilgadhia.in)
|
|
36
8
|
|
|
37
|
-
|
|
38
|
-
principles to achieve precise, high-fidelity visual depth.
|
|
9
|
+
---
|
|
39
10
|
|
|
40
|
-
|
|
41
|
-
interface quality.
|
|
11
|
+
## Overview
|
|
42
12
|
|
|
43
|
-
|
|
13
|
+
ShadowCraft is a Tailwind CSS plugin that introduces a structured, multi-layered shadow architecture designed to replicate realistic depth and spatial hierarchy in modern UI systems.
|
|
44
14
|
|
|
45
|
-
|
|
15
|
+
Unlike traditional shadows, ShadowCraft applies volumetric layering principles to achieve precise, high-fidelity visual depth.
|
|
46
16
|
|
|
47
|
-
|
|
17
|
+
It is built for developers and designers focused on professional interface quality.
|
|
48
18
|
|
|
49
|
-
|
|
19
|
+
---
|
|
50
20
|
|
|
51
21
|
## Installation
|
|
52
22
|
|
|
53
|
-
```
|
|
23
|
+
```bash
|
|
54
24
|
npm install @nevil5249/shadowcraft
|
|
55
25
|
```
|
|
56
26
|
|
|
57
|
-
|
|
27
|
+
---
|
|
58
28
|
|
|
59
29
|
## Integration
|
|
60
30
|
|
|
61
|
-
Add the plugin to your Tailwind configuration:
|
|
62
|
-
|
|
63
|
-
``` js
|
|
64
|
-
import shadowcraft from '@nevil5249/shadowcraft'
|
|
31
|
+
Add the plugin to your Tailwind configuration (`tailwind.config.js` or `tailwind.config.ts`):
|
|
65
32
|
|
|
33
|
+
```js
|
|
66
34
|
export default {
|
|
67
35
|
content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
|
|
68
36
|
theme: {
|
|
69
37
|
extend: {},
|
|
70
38
|
},
|
|
71
39
|
plugins: [
|
|
72
|
-
shadowcraft
|
|
40
|
+
require('@nevil5249/shadowcraft')
|
|
73
41
|
],
|
|
74
42
|
}
|
|
75
43
|
```
|
|
76
44
|
|
|
77
|
-
|
|
45
|
+
---
|
|
46
|
+
|
|
47
|
+
## Example Usage
|
|
78
48
|
|
|
79
|
-
|
|
49
|
+
Start using any of the 71 curated shadows in your components immediately:
|
|
80
50
|
|
|
81
|
-
```
|
|
82
|
-
<div class="
|
|
51
|
+
```html
|
|
52
|
+
<div class="shd-subtle-01 p-6 bg-white rounded-lg">
|
|
83
53
|
Professional depth with ShadowCraft
|
|
84
54
|
</div>
|
|
85
55
|
```
|
|
86
56
|
|
|
87
|
-
|
|
57
|
+
---
|
|
88
58
|
|
|
89
59
|
## Core Features
|
|
90
60
|
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
61
|
+
- Multi-layered volumetric shadows
|
|
62
|
+
- Precision-engineered depth hierarchy
|
|
63
|
+
- Native Tailwind CSS integration
|
|
64
|
+
- Optimized for performance
|
|
65
|
+
- Production-ready architecture
|
|
96
66
|
|
|
97
|
-
|
|
67
|
+
---
|
|
98
68
|
|
|
99
69
|
## Design Philosophy
|
|
100
70
|
|
|
101
|
-
ShadowCraft is based on the principle that interface shadows should
|
|
102
|
-
reflect structural depth rather than simple visual decoration.
|
|
71
|
+
ShadowCraft is based on the principle that interface shadows should reflect structural depth rather than simple visual decoration.
|
|
103
72
|
|
|
104
73
|
This results in:
|
|
105
74
|
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
75
|
+
- Improved visual realism
|
|
76
|
+
- Clearer interface hierarchy
|
|
77
|
+
- Professional design fidelity
|
|
109
78
|
|
|
110
|
-
|
|
79
|
+
---
|
|
111
80
|
|
|
112
|
-
##
|
|
81
|
+
## Links
|
|
113
82
|
|
|
114
|
-
|
|
83
|
+
- **Documentation**: [https://shadowcraft.nevilgadhia.in](https://shadowcraft.nevilgadhia.in)
|
|
84
|
+
- **NPM Package**: [https://www.npmjs.com/package/@nevil5249/shadowcraft](https://www.npmjs.com/package/@nevil5249/shadowcraft)
|
|
115
85
|
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
------------------------------------------------------------------------
|
|
119
|
-
|
|
120
|
-
## NPM Package
|
|
121
|
-
|
|
122
|
-
https://www.npmjs.com/package/@nevil5249/shadowcraft
|
|
123
|
-
|
|
124
|
-
------------------------------------------------------------------------
|
|
86
|
+
---
|
|
125
87
|
|
|
126
88
|
## Author
|
|
127
89
|
|
|
128
|
-
Nevil Gadhia
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
Website: https://shadowcraft.nevilgadhia.in
|
|
90
|
+
**Nevil Gadhia**
|
|
91
|
+
- GitHub: [https://github.com/nevil5249](https://github.com/nevil5249)
|
|
92
|
+
- Website: [https://www.nevilgadhia.in](https://www.nevilgadhia.in)
|
|
132
93
|
|
|
133
|
-
|
|
94
|
+
---
|
|
134
95
|
|
|
135
96
|
## License
|
|
136
97
|
|
|
137
98
|
MIT License
|
|
138
99
|
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
ShadowCraft was created to push the boundaries of interface depth and
|
|
144
|
-
bring architectural precision into modern frontend development.
|
|
145
|
-
|
|
146
|
-
------------------------------------------------------------------------
|
|
100
|
+
<div align="center">
|
|
101
|
+
<p>Built with precision by Nevil Gadhia</p>
|
|
102
|
+
</div>
|
|
147
103
|
|
|
148
|
-
```{=html}
|
|
149
|
-
<p align="center">
|
|
150
|
-
```
|
|
151
|
-
Built with precision by Nevil Gadhia
|
|
152
|
-
```{=html}
|
|
153
|
-
</p>
|
|
154
|
-
```
|
package/package.json
CHANGED