---
name: "@3d-viewer"
slug: "3d-viewer"
description: "A composable 3D model viewer for shadcn/ui with inspection, animation, multiple cameras, screenshots, and fullscreen support."
category: "Animated components"
tags: ["3d", "animation"]
framework: "react"
license: null
author: null
website: "https://shadcn-3d-viewer.vercel.app"
github: null
registry: "https://shadcn-3d-viewer.vercel.app/r/registry.json"
pro: false
pro_url: null
github_stars: null
component_count: 4
generated_at: "2026-10-27T06:34:08.542Z"
---

# @3d-viewer

A composable 3D model viewer for shadcn/ui with inspection, animation, multiple cameras, screenshots, and fullscreen support.

## Links

- Website: https://shadcn-3d-viewer.vercel.app
- Registry JSON: https://shadcn-3d-viewer.vercel.app/r/registry.json
- Directory page: https://sh4dcn.netlify.app/registry/3d-viewer
- This file: https://sh4dcn.netlify.app/md/3d-viewer.md

## Install

```sh
# add the whole registry (shadcn CLI)
npx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/registry.json
pnpm dlx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/registry.json
bunx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/registry.json
# fetch the raw registry index
curl -s https://shadcn-3d-viewer.vercel.app/r/registry.json
```

## Components (4)

| name | type | description | install |
| --- | --- | --- | --- |
| model-viewer | registry:ui | Complete viewer preset with all composable controls and inspector. | `npx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/model-viewer.json` |
| model-viewer-core | registry:ui | Renderer, state, loading and error UI, keyboard orientation, and fullscreen. No toolbar or inspector UI. | `npx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/model-viewer-core.json` |
| model-viewer-controls | registry:ui | Composable toolbar menus, camera and animation controls, with the viewer core. | `npx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/model-viewer-controls.json` |
| model-viewer-inspector | registry:ui | Searchable scene inspector with the viewer core. No default toolbar. | `npx shadcn@latest add https://shadcn-3d-viewer.vercel.app/r/model-viewer-inspector.json` |

## For AI agents

```text
You are adding components from @3d-viewer to a shadcn-compatible project.
1. Read this file (https://sh4dcn.netlify.app/md/3d-viewer.md) for the component list.
2. Fetch the machine-readable index: https://shadcn-3d-viewer.vercel.app/r/registry.json
3. Install a single component with its install command from the table above.
4. Full structured record: https://sh4dcn.netlify.app/json (library slug: 3d-viewer).
```