Animated Select

Animating Select using CSS transitions in React. The component waits for the transition to finish before completely hiding the popover.

Favorite fruit
import * as Ariakit from "@ariakit/react";
import "./style.css";
export default function Example() {
return (
<div className="wrapper">
<Ariakit.SelectLabel className="label">
Favorite fruit
<Ariakit.Select className="button" />
<Ariakit.SelectItem className="select-item" value="Apple" />
<Ariakit.SelectItem className="select-item" value="Banana" />
<Ariakit.SelectItem className="select-item" value="Grape" />
<Ariakit.SelectItem className="select-item" value="Orange" />

Stay tuned

Join 1,000+ subscribers and receive monthly tips & updates on new Ariakit content.

No spam. Unsubscribe anytime. Read latest issue