non-fungible-ui v1.1.2

Non Fungible UI

Welcome to the Non Fungible UI! This package includes a collection of customizable, reusable, and interactive React components built with TailwindCSS for styling, GSAP for animations, Framer Motion for smooth transitions, and @react-three/fiber for 3D rendering. These components are ready to be integrated into your web applications.

Features

• Predefined Components: A variety of customizable UI components that you can drop into your projects.
• Animations: Powerful animations powered by GSAP, Framer Motion, and React Three Fiber.
• TailwindCSS Integration: Use the full power of TailwindCSS to quickly style and customize components.
• Storybook Integration: Live documentation with examples and easy-to-understand usage.

Installation

To install the library, use npm or yarn:

Using npm:

npm install non-fungible-ui

Using yarn:

yarn add non-fungible-ui

Components

The package currently includes the following components:

HoverColorChangingLinks:

A customizable component that displays a list of links with hover effects. When you hover over a link, it changes color and animates its position.

• Props:
  • projects (array): Array of project objects, each containing:
    • title (string): The text for the link.
    • href (string): The URL the link will navigate to.
  • Example Usage:

import { HoverColorChangingLinks } from "non-fungible-club-ui";

const projects = [
  { title: "New York", href: "https://example.com/new-york" },
  { title: "San Francisco", href: "https://example.com/san-francisco" },
  // Add more projects as needed
];

function App() {
  return <HoverColorChangingLinks projects={projects} />;
}

Usage

Here’s how you can use a typical component:

import { ComponentName } from "non-fungible-club-ui";

function App() {
  return <ComponentName {...props} />;
}

Make sure to check the individual component documentation for more details on available props, methods, and customization.

License

This project is licensed under the MIT License - see the LICENSE.md file for details.

For any questions, suggestions, or issues, feel free to open an issue or reach out to the team!