ui/topia
beta

Installation

A guide to setting up your project with the necessary dependencies and structure.

This project is built with Next.js and leverages TypeScript and Tailwind CSS for all its components. Some components also require shadcn/ui and Framer Motion. While we recommend TypeScript for optimal development experience, JavaScript is also supported.

Install Next.js

npx create-next-app@latest my-app --typescript --tailwind --eslint framer-motion

Run the CLI

Run the shadcn-ui init command to setup your project:

npx shadcn-ui@latest init

Configure components.json

You will be asked a few questions to configure components.json:

Which style would you like to use? › Default
Which color would you like to use as base color? › Zinc
Do you want to use CSS variables for colors? › no / yes

Add cn helper

I use a cn helper to make it easier to conditionally add Tailwind CSS classes. Here's how I define it in lib/utils.ts:

lib/utils.ts
import { clsx, type ClassValue } from 'clsx'
import { twMerge } from 'tailwind-merge'
 
export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs))
}

App structure

Here's how I structure my Next.js apps. You can use this as a reference:

page.tsx
layout.tsx
button.tsx
site-header.tsx
site-footer.tsx
utils.ts
globals.css
components.json
next.config.js
package.json
postcss.config.js
tailwind.config.ts
tsconfig.json
  • I place the UI components shadcn/ui in the components/ui folder.
  • The rest of the components such as <SiteHeader /> and <SiteFooter /> are placed in the components folder.
  • The lib folder contains all the utility functions. I have a utils.ts where I define the cn helper.
  • The styles folder contains the global CSS.

That's it

You can now start adding shadcn/ui components to your project.

npx shadcn-ui@latest add button

Last updated on

On this page

Edit on Github