Launch Your Masterpiece.
In Minutes.
From zero to interaction-ready. Select your stack, prepare your environment, and start crafting high-fidelity UIs.
Select Environment
1
Initialize Base
Create your project root. Both configurations come with TypeScript and Tailwind CSS as standard.
Terminal
npx create-next-app@latest my-app2
Prime Dependencies
Uilora components use cinematic math and physics-based logic. Install the core interaction components.
Terminal
npm install @react-three/drei @react-three/fiber @react-three/postprocessing @types/three clsx ...@react-three/drei@react-three/fiber@react-three/postprocessing@types/threeclsxframer-motiongsaplenislucide-reactmaathoglrechartssasstailwind-mergethree
3
Establish Utilities
Create a lib/utils.ts file. This helper merges Tailwind classes and manages conditional styling.
src/lib/utils.ts
import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";
// --- UTILS ---
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs));
}4
Configuration Complete 🎉
Your project is primed for high-fidelity interactions. Browse the library and start injecting cinematic components.
Ready to deploy
- Explore 700+ premium components
- Direct copy-paste source integration
- Full TypeScript & ESM support
Evolve your UI.
Browse the component gallery and find the perfect building blocks for your next digital experience.