Animated Select component using typescript, shadcn and framer-motion

The "Expand Select Animation" is a custom select component built using TypeScript and Framer Motion, with the base component provided by ShadCN. This component enhances the standard select element with a smooth, visually appealing animation that expands downward to reveal options and collapses upward to hide them.

Demo

Source Code

expand-select.tsx

import { Globe } from "lucide-react";
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
import { motion, AnimatePresence } from "framer-motion";

export function ExapandSelect() {
  return (
    <Select>
      <SelectTrigger className="text-white w-[180px]flex gap-2 bg-[#1a1a1a] hover:bg-[#3e3d3d] ring-none border-none ">
        <Globe />
        <SelectValue placeholder="English" />
      </SelectTrigger>
      <AnimatePresence>
        <SelectContent className="bg-[#3e3d3d] text-white  border-none p-[1px]">
          <motion.div
            initial={{ opacity: 0, height: 0, scale: 0.95 }}
            animate={{
              opacity: 1,
              height: "auto",
              scale: 1,
              transition: {
                type: "spring",
                stiffness: 300,
                damping: 30,
              },
            }}
            exit={{
              opacity: 0,
              height: 0,
              scale: 0.95,
              transition: {
                duration: 0.2,
              },
            }}
           >




          

            
        <script>
  // Detect dark theme
  var iframe = document.getElementById('tweet-1878086086502887693-992');
  if (document.body.className.includes('dark-theme')) {
    iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1878086086502887693&theme=dark"
  }

</script>

The above is the detailed content of Animated Select component using typescript, shadcn and framer-motion. For more information, please follow other related articles on the PHP Chinese website!