Headless UI Transitions
4 min read
This is a collection of some of my favorite transitions for Tailwind Lab's Headless UI React library. This page includes interactive examples and code snippets to use in your own projects.
These examples are inspired by the Tailwind team. If you want polished UI components, I highly recommend Tailwind UI.
How to use this page
For each example, you'll see an object representing the props
required by the Transition component.
Having the transition classes available in a single place makes it easy to reuse the transition styles across multiple components.
With the object of transition classes,
you can spread the props into your Transition component.
import {transitionClasses} from '@lib/transitions';
function MyComponent({show}: {show: boolean}) {
return (
<Transition as={'p'} show={show} {...transitionClasses}>
Boo!
</Transition>
);
}
Simple
export const transitionClasses = {
enter: 'transition-opacity duration-75',
enterFrom: 'opacity-0',
enterTo: 'opacity-100',
leave: 'transition-opacity duration-150',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0',
};
Spin In
export const transitionClasses = {
enter: 'transform transition duration-[400ms]',
enterFrom: 'opacity-0 rotate-[-120deg] scale-50',
enterTo: 'opacity-100 rotate-0 scale-100',
leave: 'transform duration-200 transition ease-in-out',
leaveFrom: 'opacity-100 rotate-0 scale-100',
leaveTo: 'opacity-0 scale-95',
};
Notification
export const transitionClasses = {
enter: 'transform ease-out duration-300 transition',
enterFrom: 'translate-y-2 opacity-0 sm:translate-y-0 sm:translate-x-2',
enterTo: 'translate-y-0 opacity-100 sm:translate-x-0',
leave: 'transition ease-in duration-100',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0',
};
Dropdown
export const transitionClasses = {
enter: 'transition ease-out duration-100',
enterFrom: 'transform opacity-0 scale-95',
enterTo: 'transform opacity-100 scale-100',
leave: 'transition ease-in duration-75',
leaveFrom: 'transform opacity-100 scale-100',
leaveTo: 'transform opacity-0 scale-95',
};
Flyout (from top)
export const transitionClasses = {
enter: 'transition ease-out duration-200',
enterFrom: 'opacity-0 -translate-y-1',
enterTo: 'opacity-100 translate-y-0',
leave: 'transition ease-in duration-150',
leaveFrom: 'opacity-100 translate-y-0',
leaveTo: 'opacity-0 -translate-y-1',
};
Flyout (from bottom)
export const transitionClasses = {
enter: 'transition ease-out duration-200',
enterFrom: 'opacity-0 translate-y-1',
enterTo: 'opacity-100 translate-y-0',
leave: 'transition ease-in duration-150',
leaveFrom: 'opacity-100 translate-y-0',
leaveTo: 'opacity-0 translate-y-1',
};
Select Menu
export const transitionClasses = {
leave: 'transition ease-in duration-100',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0',
};
Modal
export const transitionClasses = {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
enterTo: 'opacity-100 translate-y-0 sm:scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
};
Modal (background overlay)
export const transitionClasses = {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0',
enterTo: 'opacity-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0',
};
Slide-over
export const transitionClasses = {
enter: 'transform transition ease-in-out duration-500 sm:duration-700',
enterFrom: 'translate-x-full',
enterTo: 'translate-x-0',
leave: 'transform transition ease-in-out duration-500 sm:duration-700',
leaveFrom: 'translate-x-0',
leaveTo: 'translate-x-full',
};
Slide-over (background overlay)
export const transitionClasses = {
enter: 'ease-in-out duration-500',
enterFrom: 'opacity-0',
enterTo: 'opacity-100',
leave: 'ease-in-out duration-500',
leaveFrom: 'opacity-100',
leaveTo: 'opacity-0',
};
Command Palette
export const transitionClasses = {
enter: 'ease-out duration-300',
enterFrom: 'opacity-0 scale-95',
enterTo: 'opacity-100 scale-100',
leave: 'ease-in duration-200',
leaveFrom: 'opacity-100 scale-100',
leaveTo: 'opacity-0 scale-95',
};
