Image Scanner Demo
nyxui/image-scanner-demoFreeExample
Example showing a image scanner.
Live preview
live · rendered by the registry
Rendered by shadcn/ui on their own page — this is the component running, not a screenshot of it.Install it
npx shadcn@latest add https://nyxui.com/r/image-scanner-demo.jsonSource
1import { ImageScanner } from "../ui/image-scanner";23export default function ImageScannerDemo() {4 const personScanResults = [5 {6 id: "person-1",7 type: "object" as const,8 confidence: 98,9 position: { x: 60, y: 40 },10 label: "Person",11 },12 {13 id: "gun",14 type: "object" as const,15 confidence: 90,16 position: { x: 30, y: 30 },17 label: "Gun",18 },19 ];20 return (21 <div>22 <ImageScanner23 image="/assets/images/image-scanner/img.jpg"24 scanType="default"25 scanColor="emerald"26 scanDelay={2}27 showDataOverlay={false}28 showScanResults29 scanResults={personScanResults}30 autoScan={true}31 loop32 />33 </div>34 );35}
What it pulls in
Other registry items
Files it writes
More from shadcn/ui
All 68 items| Component | Registry | Kind | Access | Installs | Command |
|---|---|---|---|---|---|
| 3D Layered Card Demo3d-layered-card-demo | shadcn/ui | Examples | Free | no deps | |
| Animated Code Block Demoanimated-code-block-demo | shadcn/ui | Examples | Free | no deps | |
| Animated Grainy Background Demoanimated-grainy-bg-demo | shadcn/ui | Examples | Free | no deps | |
| Animated Text Demoanimated-text-demo | shadcn/ui | Examples | Free | no deps | |
| Apple Glass Effect Demoapple-glass-effect-demo | shadcn/ui | Examples | Free | no deps | |
| Bubble Background Demobubble-background-demo | shadcn/ui | Examples | Free | no deps | |
| Custom Cursor Democustom-cursor-demo | shadcn/ui | Examples | Free | no deps | |
| Cyberpunk Card Democyberpunk-card-demo | shadcn/ui | Examples | Free | no deps |
