Styling dependencies
These libraries are essential and used in almost every component here.
- Tailwind CSS - Utility-first CSS framework with atomic class patterns for rapid styling.
- tailwind-merge - A tool for merging Tailwind class names efficiently, preventing style conflicts.
- clsx - A compact library for conditionally combining class names.
- Class Variance Authority - Variant-based class management with type-safe configurations.
Animation dependencies
Some components require animation libraries to achieve complex interactions and motion effects.
- Motion - Production-ready animations with spring physics and gesture support.
- React Three Fiber - React-powered Three.js wrapper for building interactive 3D content.
Basic installation
To use these dependencies in your project, install them using npm or yarn:
Class Name utility
The "cn" helper function is used throughout our components to safely merge Tailwind classes, simplyfing conditional styling: