File ( image, pdf .....) Preview UI

[yaba101]

Would love to see this UI on origin!

[MurphyLo]

Yeah, totally need this. Would be perfect for social media app or application UI.

[davidepacilio]

@yaba101, @MurphyLo, any examples you can share?

[MurphyLo]

@davidepacilio Great work on Origin UI! Love its clean and elegant design!

I've previously explored various implementations for image viewer components:

Some full-featured open-source projects:

• LightGallery
• Yet-Another-React-Lightbox
• react-photo-view
• React Grid Gallery (grid layout only)

Commercial:

• Lightbox.js
• Fancybox

These viewers usually have two styles / main functions:

• Modal/Lightbox: full-window or dialog, triggered from a file tree in sidebar or a gallery. Common in social feeds (think X’s full-window image preview - also with a side-comment panel), blog photo albums, and any app that dealing with file management, content moderation or project collaboration. Typical extras: captions, slide counter, thumbnail strip, and smooth loading transitions for lazy loading.

• Masonry/Grid Layout: dense overview layouts that usually act as a entry point. These show up on "explore" pages of ai image tools like sora, ideogram, and midjourney.

Regarding pdf previews, I haven't explored deeply, but there seem to be fewer mature options. Mozilla's pdf.js is widely used and powerful, but has minimal styling. react-pdf-viewer provides a nicer experience and is commercial.

[yaba101]

@davidepacilio I was suggesting more like component that support any fileType preview for example pdf,doc,docx,pptx...... I never come across that kinda of component.