Astra

Model Viewer

A product-style 3D model viewer that frames itself and floats over a soft shadow.

Model Viewer, a Astra component

Use Model Viewer in your project

Choose JavaScript or TypeScript and plain CSS or Tailwind. Enable JavaScript for the interactive preview, customization controls and source tabs.

npx shadcn@latest add @react-bits/ModelViewer-TS-TW
How to install Astra components

Related components

  • Tilted Card

    A 3D card that tilts toward the cursor, with glare, a soft shadow, floating layers and a flip side.

  • Counter

    An odometer-style number whose digits roll to every new value, with currency, separators and locales.

  • Decay Card

    An image card that tears and melts as the pointer moves, then pulls itself back together.