Transition

Installation

Install @vinui/react from GitHub with pnpm, then import its stylesheet once, in your root layout or entry file:

pnpm add github:vindotski/vinui#path:packages/react

import '@vinui/react/styles.css';

Usage

Animate content in and out with a preset effect, built on Headless UI's Transition. The effects ship in vinui's stylesheet, so your app needs no animation CSS:

import { Transition } from '@vinui/react';

<Transition show={saved} effect="slide-up" role="status">
  Changes saved
</Transition>;

• Effects are fade (default), scale, slide-up and slide-down; motion is skipped for users who prefer reduced motion.
• Hidden content is unmounted after it animates out; pass unmount={false} to keep it mounted.
• appear animates in on first render. beforeEnter, afterEnter, beforeLeave and afterLeave run around each transition.

More to come

Detailed examples, keyboard interaction and the full component API are on their way.