React Universal Tilt

🎆 universal-tilt.js implementation for React component
Alternatives To React Universal Tilt
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Material Ui87,09614,7568,38510 hours ago162April 03, 20221,494mitTypeScript
MUI Core: Ready-to-use foundational React components, free forever. It includes Material UI, which implements Google's Material Design.
Awesome React Components35,639
a month ago2cc0-1.0
Curated List of React Components & Libraries.
Chakra Ui32,98547620 hours ago453September 22, 2022129mitTypeScript
⚡️ Simple, Modular & Accessible UI Components for your React Applications
React Virtualized24,8632,7281,6052 months ago294December 18, 2020501mitJavaScript
React components for efficiently rendering large lists and tabular data
React Bootstrap21,73729,4213,983a day ago199August 25, 2022170mitTypeScript
Bootstrap components built with React
React Native Web20,7723,2371,3425 days ago335August 30, 202278mitJavaScript
Cross-platform React UI packages
Enzyme19,98351,43526,2413 months ago54December 20, 2019292mitJavaScript
JavaScript Testing utilities for React
React Testing Library17,8432,70718,2858 days ago91May 28, 202227mitJavaScript
🐐 Simple and complete React DOM testing utilities that encourage good testing practices.
Bit16,6986410 hours ago819September 24, 2022146otherTypeScript
A tool for composable software development.
Fluentui15,73765840810 hours ago1,487September 23, 2022740otherTypeScript
Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
Alternatives To React Universal Tilt
Select To Compare

Alternative Project Comparisons


NPM version NPM downloads NPM license Codecov Travis Bundle size


universal-tilt.js implementation for React component


Live check the website
Playground play with the library in Storybook


How to Use

First, install the library in your project by npm:

$ npm install react-universal-tilt

Or Yarn:

$ yarn add react-universal-tilt

Getting Started

** Import plugin in the React application file:**

import ReactTilt from 'react-universal-tilt';

** Later, create a parallax component and pass options:**

  settings={/* settings */}
  callbacks={/* callbacks */}
  onTiltChange={/* event output destination */}
  className={/* class name(s) */}
  // other props for div tag e.g. style

You can add components with or without additional content:


<ReactTilt /* options */>
  {/* additional content */}


<ReactTilt /* options */ />


Name Type Default Description Available options
settings object {} Default universal-tilt.js settings universal-tilt.js settings
callbacks object {} Default universal-tilt.js callbacks universal-tilt.js settings
className string tilt Tilt element class name Name of the tilt element


onTiltChange event callback will output the x, y & angle of tilting


import React from 'react';
import ReactTilt from 'react-universal-tilt';

/* ------ First Example ------ */

export const FirstExample = () => {
  return (
        base: 'window',
        reverse: true,
        border: '1px solid #333',
      className="tilt-elem my-tilt"

/* ------ Second Example ------ */

function myFunc(el) { = '#f00';

export const SecondExample = () => {
  const handleTiltChange = (e) => {
    console.log(e.tiltX, e.tiltY, e.angle);

  const style = {
    border: '1px solid #333',

  return (
        speed: 500,
        scale: 1.3,
        onMouseMove: (el) => myFunc(el),
      className="tilt-elem my-tilt"
      <h3>Hello World!</h3>


This project is licensed under the MIT License 2018-present Jakub Biesiada

Popular Reactjs Projects
Popular React Component Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.
React Components