Tactile UI

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.

Installation

npm install tactile-material framer-motion lucide-react

Note: This library depends on Tailwind CSS for its internal layout styling. Make sure your project has Tailwind configured.

Usage Example

import React, { useState } from "react";
import { TactileToggle, TactileAlert } from "tactile-material";

export default function App() {
  return (
    <div className="p-8">
      <TactileAlert
        type="info"
        message="Move your mouse over this alert to see the physical reaction!"
      />

      <TactileToggle label="Tactile Switch" />
    </div>
  );
}

Available Components

• TactileToggle
• TactileButton (Reactive kinetic buttons)
• TactileConfirm (Modal)
• TactileAlert (Static Alert blocks)
• TactileToast (Dynamic floating trigger blocks)
• TactileCard (Reactive 3D kinetic cards)
• TactileSlider (Physical slider with inertia)
• TactileLoader (Kinetic loading spinners)

Explore examples/App.jsx for detailed usage of Toasts and Confirm Dialogs!

Author

Alfansyah Dewangga Rizqita

• Portfolio: www.dewangga.site

Support

If you find Tactile Material helpful, consider supporting its development:

• Support on Ko-fi
• Support on Saweria