Thank you for purchasing Axiom Pro. This library is designed to give you drop-in, high-fidelity 3D components that work across any modern React environment.
Here is your quick-start guide to getting the components running in your project in under 2 minutes.
Axiom relies on React Three Fiber and Three.js for native WebGL rendering.
Run this in your project's terminal:
npm install three @react-three/fiber @react-three/drei @react-spring/three
npm install -D @types/three
Note: Ensure you have Tailwind CSS installed in your project, as Axiom uses standard Tailwind utility classes for layout and styling.
Next.js, Vite, and Create React App all require static assets to be served from a public directory.
Drag the entire contents of the Axiom public/models folder directly into your project's public/models directory.
If you skip this step, the 3D components will fail to load their .glb files and the canvas will remain blank.
Axiom components are designed to be completely modular. You do not need to install the whole library ā just copy the files you want into your project's components directory.
Copy single files like Button.tsx or InputField.tsx and import them normally.
3D components like the Toggle are packaged in their own folders to handle Server-Side Rendering (SSR) safety automatically.
Copy the entire Toggle folder into your components directory.
Import it by referencing the folder (which automatically targets the universal index.tsx wrapper):
/* Example Import */
import { Toggle } from "@/components/Toggle";
export default function MyPage() {
return (
<Toggle
active={true}
onClick={() => console.log('Toggled')}
/>
)
}Axiom Pro is built with Universal React.
SSR & 3D: Our 3D component wrappers use standard synchronous imports guarded by React 18's useSyncExternalStore. They are completely safe for Server-Side Rendered environments (Next.js/Remix) and strictly Client-Side environments (Vite) out of the box.
Routing: Components use standard <a> tags to ensure cross-framework compatibility. If you are exclusively using Next.js, feel free to swap these for <Link>.
In the design-assets folder, you will find the raw .blend files and unoptimized .glb files. These are provided so you can modify materials, lighting, or base geometry in Blender if you wish to customize the aesthetic before exporting.
Have questions? Check the FAQs or submit feedback.