Viora LogoViora UI
Login

Select

An unfoldable select menu with gooey spring corner separation and staggered option reveal.

demo-motion-select-demo.tsx
Loading source code...

Installation

pnpm dlx viora-ui add motion-select
npx viora-ui add motion-select
yarn viora-ui add motion-select
bunx --bun viora-ui add motion-select

Usage

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "viora-ui";
import { useState } from "react";

export default function Demo() {
  const [val, setVal] = useState("next");
  return (
    <Select value={val} onValueChange={setVal}>
      <SelectTrigger>
        <SelectValue placeholder="Select" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="next">Next.js</SelectItem>
        <SelectItem value="react">React</SelectItem>
      </SelectContent>
    </Select>
  );
}

Built by Otis

Last updated: 9/13/2026