Uilora Logo
Uilora.
Join
Uilora Logo
Uilora.
Join

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-app
2

Prime Dependencies

Uilora components use cinematic math and physics-based logic. Install the core interaction primitives.

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 500+ 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.

BackBrowse Library