Utilities for controlling transitions.

React propsCSS Properties
transition={value}transition: {value};


Use transition={value} to specify transitions.

<x.button transition transitionDuration={500} color="white" bg={{ _: 'amber-600', hover: 'orange-600' }} py={3} px={6} borderRadius="md" > Hover me </x.button>


You can conditionally apply animations and transitions using the motionSafe and motionReduce states:

<x.button color={{ hover: 'red' }} transition={{ _: true, motionReduce: 'none' }} > Hover me </x.button>


To control the transitions on an element at a specific breakpoint, use responsive object notation. For example, adding the property transition={{ md: "all" }} to an element would apply the transition="all" utility at medium screen sizes and above.

<x.div transition={{ md: 'all' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.



If you'd like to customize your values for transitions, use the theme.transitions section of your theme.

  // theme.js

  export const theme = {
    transitions: {
      // ...
+     light: 'color 300ms ease-in-out'

If you don't want to customize it, a set of transitions is already present in default theme. Values are the same as the values accepted in transitionProperty.

Styled bindings


Using xstyled's styled, all transitions defined are automatically bound to transition attribute:

import styled from '@xstyled/...' const Button = styled.button` transition: default; `

To learn more about styled syntax, read styled syntax documentation.


It is possible to manually bind a transition using th.transition utility:

import styled from '...' import { th } from '@xstyled/...' const Button = styled.button` transition: ${th.transition('default')}; `


Get a transition in any component using useTransition hook:

import { useTransition } from '@xstyled/...' function Button() { const transition = useTransition('default') }
Edit this page on GitHub