Installation
A simple guide to set up ui/topia with the required dependencies and structure.
This project is built with Next.js, using TypeScript and Tailwind CSS for all components. Some components also rely on shadcn/ui and Motion.
For the best development experience, I recommend using TypeScript, but it’s not mandatory.
Install Tailwind CSS
The components are styled using Tailwind CSS.
Follow the official installation guide to set it up in your project.
Install Motion
To use components with animations, you’ll need to add Motion to your project.
npm install motionAdd a Utility Helper
To make it easier to conditionally apply Tailwind CSS classes, add this cn helper function to your project.
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}Folder Structure
Here’s a recommended folder structure to organize your components and utilities:
Feel free to adapt it based on your project’s needs.
You're all set! You can now start enjoying the components.
Last updated on