<cadmodel />

The <cadmodel /> element is used to display a 3D model of a component, it is usually part of a <cadassembly /> or <chip />.

Start by asking your AI to “use tscircuit.”

Tell your AI what you want to build. In environments where your AI can install and run tools, it can download and use tscircuit automatically—you usually don’t need to install anything yourself.

Try: Use tscircuit to design a USB-powered LED board.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)

Properties

Property	Type	Description
modelUrl	string	URL to the 3D model file (GLB, GLTF, OBJ, STL, STEP, WRL)
stepUrl	string	URL to a STEP model file for export purposes
positionOffset	{x: number, y: number, z: number}	Offset the model position from the component center
rotationOffset	number | {x: number, y: number, z: number}	Rotate the model (number = Z-axis rotation in degrees)
zOffsetFromSurface	Distance	Vertical offset from the PCB surface (e.g., "2mm", "0.1in")
size	{x: number, y: number, z: number}	Scale the model size
showAsTranslucentModel	boolean	Render the model as translucent
modelUnitToMmScale	Distance	Scale factor to convert model units to millimeters

Repositioning the Model

You can use positionOffset, rotationOffset, and zOffsetFromSurface to reposition the model.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          positionOffset={{ x: -2, y: 0, z: 0 }}
          rotationOffset={{ x: 0, y: 0, z: 45 }}
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)

Z-Offset from Surface

Use zOffsetFromSurface to control the vertical distance of the model from the PCB surface. This is useful for components that need to be positioned above or below the board surface.

export default () => (
  <board>
    <chip
      name="U1"
      footprint="soic8"
      cadModel={
        <cadmodel
          zOffsetFromSurface="2mm"
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
        />
      }
    />
  </board>
)

Importing local GLB models

import dip4ModelUrl from "./models/dip4.glb"

export default () => (
  <board>
    <chip
      name="U1"
      footprint="dip4"
      cadModel={<cadmodel modelUrl={dip4ModelUrl} />}
    />
  </board>
)

Providing a STEP model

You can provide a STEP model to the <cadmodel /> element by setting the modelUrl. When providing a STEP model, the STEP model will be used when exporting to STEP to preserve the exact geometry of the model.

import soic8StepUrl from "./models/soic8.step"

export default () => (
  <board>
    <chip
      name="U2"
      footprint="soic8"
      cadModel={
        <cadmodel
          modelUrl={soic8StepUrl}
        />
      }
    />
  </board>
)

Translucent Model in cadmodel

You can also use showAsTranslucentModel inside a <cadmodel />.

export default () => (
  <board width="10mm" height="10mm">
    <chip
      name="U2"
      footprint="soic8"
      cadModel={
        <cadmodel
          modelUrl="https://modelcdn.tscircuit.com/jscad_models/soic8.glb"
          showAsTranslucentModel
        />
      }
    />
  </board>
)

Supported File Formats

The following model file formats are supported:

• GLB
• GLTF
• OBJ
• STEP
• STL
• WRL

For device-level mechanical parts such as housings and screws, use assembly.subassembly. See Mounting 3D models to a board for an example with imported screws aligned to PCB holes.