Animated Select

Forms 59

About

Animated select component made using framer-motion

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Animated Select to your project and fits it to your theme.

Code

How Animated Select is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { Select, SelectOption } from "@/components/ui/animated-select-1"
import * as React from "react"

export function Demo() {
    const [value, setValue] = React.useState<string>("")
    return(
        <main className="flex justify-center items-center">
     <Select value={value} setValue={setValue} placeholder="Select fruit">
          <SelectOption value="apple">Apple</SelectOption>
          <SelectOption value="tomato">Tomato</SelectOption>
          <SelectOption value="lemon">Lemon</SelectOption>
          <SelectOption value="banana">Banana</SelectOption>
        </Select>
        </main>
    )
}