Getting Started
Set up a fresh project with Uilora components. Choose your framework and follow the simple steps to get started in minutes.
Create Your Project
Start with a fresh project using your preferred framework. Both options include Tailwind CSS setup.
npx create-next-app@latest my-appInstall Dependencies
Install all the dependencies required for Uilora components. These are the maximum dependencies you'll need—most components only use a subset.
npm install @react-three/drei @react-three/fiber @react-three/postprocessing @types/three clsx framer-motion gsap lenis lucide-react maath ogl recharts sass tailwind-merge threeDependencies included:
Create Utils File
Create a lib/utils.ts file in your project root. This utility function is used by many Uilora components for className merging.
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
// --- UTILS ---
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}You're Done! 🎉
Your project is now set up and ready to use Uilora components. Browse the component library, copy the code you need, and start building amazing interfaces.
Next Steps
- •Browse components at
/get-started/components - •Copy component code from the detail pages
- •Customize props to match your design system
Ready to Build?
Start exploring our 500+ components and find the perfect building blocks for your next project.