Quickstart
Install @vizbl/react-model-viewer and render your first dialog.
React Quickstart
Install the package, import the stylesheet, and render ModelViewerDialog.
Install
pnpm add @vizbl/react-model-viewernpm install @vizbl/react-model-vieweryarn add @vizbl/react-model-viewerbun add @vizbl/react-model-viewerImports
import { ModelViewerDialog } from '@vizbl/react-model-viewer'
import '@vizbl/react-model-viewer/style.css'Example
'use client'
import { useState } from 'react'
import { ModelViewerDialog } from '@vizbl/react-model-viewer'
import '@vizbl/react-model-viewer/style.css'
export function ProductPreviewButton() {
const [open, setOpen] = useState(false)
return (
<>
<button type="button" onClick={() => setOpen(true)}>
Preview in 3D
</button>
<ModelViewerDialog
open={open}
onOpenChange={setOpen}
tinuuid="…"
/>
</>
)
}Next steps
- Read ModelViewerDialog.
- Read ModelViewer.
- Open Reference for the full prop table.