dolphincss 1.3.0 → 1.3.1
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 +10 -4
- package/dist/assets/css-BcpnIGsX.css +1 -0
- package/dist/index.html +1 -1
- package/dolphin-css.css +1 -1
- package/package.json +1 -1
- package/scripts/components.js +193 -0
- package/dist/assets/css-DZnkuf5R.css +0 -1
package/README.md
CHANGED
|
@@ -75,17 +75,19 @@ No need for `framer-motion` or `animate.css`. DolphinCSS ships with a complete `
|
|
|
75
75
|
|
|
76
76
|
1. **Install via npm:**
|
|
77
77
|
```bash
|
|
78
|
-
npm install tailwindcss dolphincss
|
|
78
|
+
npm install tailwindcss @tailwindcss/vite dolphincss lucide-react
|
|
79
79
|
```
|
|
80
|
+
*(Note: `lucide-react` is required because the generated magic components use these beautiful icons by default.)*
|
|
80
81
|
|
|
81
|
-
2. **Add the
|
|
82
|
+
2. **Add the Plugins:** (In `vite.config.js`)
|
|
82
83
|
```javascript
|
|
83
84
|
import { defineConfig } from 'vite'
|
|
84
85
|
import react from '@vitejs/plugin-react'
|
|
86
|
+
import tailwindcss from '@tailwindcss/vite'
|
|
85
87
|
import dolphincssPlugin from 'dolphincss/vite-plugin'
|
|
86
88
|
|
|
87
89
|
export default defineConfig({
|
|
88
|
-
plugins: [react(), dolphincssPlugin()]
|
|
90
|
+
plugins: [react(), tailwindcss(), dolphincssPlugin()]
|
|
89
91
|
})
|
|
90
92
|
```
|
|
91
93
|
|
|
@@ -100,13 +102,17 @@ import 'dolphincss/dolphin-css.css';
|
|
|
100
102
|
|
|
101
103
|
Type any of these magic markers in your `.jsx` or `.tsx` file, hit save, and watch the code generate instantly:
|
|
102
104
|
|
|
103
|
-
- `<div className="dolphin-form"></div>` (Beautiful
|
|
105
|
+
- `<div className="dolphin-form-floating"></div>` (Beautiful Floating Label Form)
|
|
106
|
+
- `<div className="dolphin-form-standard"></div>` (Minimalist Standard Label Form)
|
|
104
107
|
- `<div className="dolphin-table"></div>` (Responsive Data Table)
|
|
105
108
|
- `<div className="dolphin-toast"></div>` (Notification Toast)
|
|
106
109
|
- `<div className="dolphin-modal"></div>` (Native HTML Dialog Modal)
|
|
107
110
|
- `<div className="dolphin-button"></div>` (Button Variants Showcase)
|
|
108
111
|
- `<div className="dolphin-card"></div>` (Glassmorphic Profile Card)
|
|
112
|
+
- `<div className="dolphin-grid"></div>` (Responsive Product/Car Grid)
|
|
109
113
|
- `<div className="dolphin-navbar"></div>` (Sleek Navigation Bar)
|
|
114
|
+
- `<div className="dolphin-header"></div>` (Modern Header/Navbar)
|
|
115
|
+
- `<div className="dolphin-footer"></div>` (Premium Footer Section)
|
|
110
116
|
- `<div className="dolphin-alert"></div>` (Modern Alert Box)
|
|
111
117
|
- `<div className="dolphin-badge"></div>` (Status Badges)
|
|
112
118
|
|