ui/topia
beta

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 motion

Add a Utility Helper

To make it easier to conditionally apply Tailwind CSS classes, add this cn helper function to your project.

lib/utils.ts
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:

your-desired-components.tsx
utils.ts

Feel free to adapt it based on your project’s needs.

You're all set! You can now start enjoying the components.

Edit on GitHub

Last updated on

On this page