This project is built with TypeScript, React, Shadcn, TailwindCSS and Framer Motion. The first step you need is to install these depenciedes in your project before copying and pasting the code.

1. Install Shadcn
2. Install TailwindCSS
3. Install Framer Motion

In React projects, there is no strict way to organize your components. It just depends on you and your team on how to decide that, taking into consideration the pros and cons of each one.

However, and due to the rise of ready-to-use component libraries, I have gotten used to structuring them under the components folder, and inside it, I organize the components that belong to each brand.

📁 my-poroject
  📁 components
    📁 shadcn
    📁 magic
    📁 vibrant
       📄 component-name.tsx

All you need to do is create a folder called vibrant, then create a file with the name of the component you want to use, and just copy & paste the code.