Learning Shadcn/UI

February 3, 2024

Shadcn/UI is my first experience with Shadcn/UI. Built using powerful tools like Shadcn/UI and Tailwind CSS, it offers user-friendly and reusable components. Additionally, technologies such as React, Next.js, and Framer Motion have been incorporated to provide dynamic structure, page routing, and animations.

Learning Shadcn/UI Image 1

Modern and reusable user interface components were created using Shadcn/UI and Tailwind CSS. Dynamic structures were built with React, and page routing and server-side rendering were handled with Next.js. Framer Motion enhanced the user experience with animations.

Learning Shadcn/UI Image 2

Additionally, comments for each course are dynamically displayed via The Rick and Morty API, with user data fetched from the API and providing real-time updated content.

Learning Shadcn/UI Image 3

The site’s Contact Form allows users to get in touch directly. Developed using React Hook Form, this form collects user feedback.

Technologies Used

  • Shadcn/UI: Chosen to provide modern and reusable user interface components.
  • Tailwind CSS: Used to develop the design quickly and efficiently.
  • React: Used to build the dynamic structure of the project.
  • Next.js: Used to manage page routing and server-side rendering.
  • Framer Motion: Preferred to add animations to components and make user interactions smoother.
  • React Hook Form: Used for form management in the Contact Form to collect user feedback.
  • The Rick and Morty API: Used in the comments component to provide dynamic content from The Rick and Morty API.
view sourcevisit project