Overview
Weekly Objective:
In Week 5, we will customize the overall UI and UX of our SAAS template. We will be learning about the different react UI libraries that are available to us for free. The goal is to pick a UI library and integrate it into our website. We will also dive deeper into Tailwind CSS and how to customize the theme of our website and manipulate JSX elements to look and feel like our brand. Additionally, we will be using AI and different vision models such as GPT 4 Vision to write the code for our new UI.
Requirements:
- Github Account
- These applications installed on your computer
- NodeJS
- Github Desktop
- Visual Studio Code
- AI Tutor Plus or any other AI assistant that support vision
- Vercel Account
- Your SAAS template from weeks 2-4 that you want to customize
Resources:
- Tailwind CSS – a framework used for styling React websites. Provides the project with a set of classes we can use inline. Additionally, Tailwind allows us to make our UI responsive and ensure that the experience is comparable across multiple devices.
- v0 by Vercel – Allows users to use artificial intelligence to create different UI elements in their website. Able to input mockups or describe the desired UI and iterate on the design. Uses ShadCN components to construct a full page.
- ShadCN – A component library that is used by many Vercel websites. Has enough components to create dashboard, login screens, and fully fledged applications. Also support Tailwind styling and theming.
- NextUI – Another React component library that integrates seamlessly with Tailwind. Also has integration with Figma for easy design to product transition. While there are fewer components, they are typically better designed than ShadCN
- Preline UI – Has a large selection of premade React components. Unlike ShadCN and NextUI, has components that will aid in creating a landing page with FAQ, Team, Blog, Pricing, and Hero sections that are prebuild and work with TailwindCSS
- Ant Design – One of the largest free React component libraries. Easy to use and includes components for layout, navigation, data entry, data display, and feedback.
Here are some more React UI libraries