tactile-material 1.0.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 +44 -0
- package/dist/tactile.es.js +6229 -0
- package/dist/tactile.umd.js +88 -0
- package/package.json +34 -0
package/README.md
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
# Tactile UI
|
|
2
|
+
|
|
3
|
+
Tactile UI is a procedural material UI system for React. It uses `framer-motion` to simulate physical properties like mass, stiffness, damping, and inertia in standard UI elements like Dialogs, Alerts, Toasts, and Toggles.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install tactile-material framer-motion lucide-react
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
**Note**: This library depends on Tailwind CSS for its internal layout styling. Make sure your project has Tailwind configured.
|
|
12
|
+
|
|
13
|
+
## Usage Example
|
|
14
|
+
|
|
15
|
+
```jsx
|
|
16
|
+
import React, { useState } from "react";
|
|
17
|
+
import { TactileToggle, TactileAlert } from "tactile";
|
|
18
|
+
|
|
19
|
+
export default function App() {
|
|
20
|
+
return (
|
|
21
|
+
<div className="p-8">
|
|
22
|
+
<TactileAlert
|
|
23
|
+
type="info"
|
|
24
|
+
message="Move your mouse over this alert to see the physical reaction!"
|
|
25
|
+
/>
|
|
26
|
+
|
|
27
|
+
<TactileToggle label="Tactile Switch" />
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
31
|
+
```
|
|
32
|
+
|
|
33
|
+
## Available Components
|
|
34
|
+
|
|
35
|
+
- `TactileToggle`
|
|
36
|
+
- `TactileButton` (Reactive kinetic buttons)
|
|
37
|
+
- `TactileConfirm` (Modal)
|
|
38
|
+
- `TactileAlert` (Static Alert blocks)
|
|
39
|
+
- `TactileToast` (Dynamic floating trigger blocks)
|
|
40
|
+
- `TactileCard` (Reactive 3D kinetic cards)
|
|
41
|
+
- `TactileSlider` (Physical slider with inertia)
|
|
42
|
+
- `TactileLoader` (Kinetic loading spinners)
|
|
43
|
+
|
|
44
|
+
Explore `examples/App.jsx` for detailed usage of Toasts and Confirm Dialogs!
|