WingoUI
Buttons & Actions
ButtonButton GroupCopy ButtonDelete ButtonTheme ToggleToggleToggle Group
Inputs
Avatar UploadCalendarCheckboxColor PickerComboboxCron PickerCurrency InputDate PickerDate Range PickerDate Time PickerDuration PickerFile UploadFilter BuilderInputInput GroupListboxMasked InputMention InputMonth PickerMulti SelectNumber InputOTP InputPassword InputPhone InputRadio GroupRatingSearch InputSegmented ControlSelectSignature PadSliderSwitchTag InputTextareaTime Picker
Forms
Address InputCSV ImportFieldForm WizardInline EditInvoice line itemsRich Text EditorSchema Builder
Navigation
Back To TopBounce SidebarBreadcrumbCommand MenuGlobal SearchGooey NavHook SidebarNav MenuNav TabsPaginationProximity SidebarScroll ProgressSidebarStepsTable Of ContentsTabsTopbarUser MenuWorkspace Switcher
Overlays
Alert DialogContext MenuDialogDrawerDropdown MenuFamily DrawerHover CardPopoverSheetShortcuts DialogTooltipTour
Feedback
AlertBannerCookie ConsentEmoji ReactionEmpty StateNotification BellNotification CenterProgressRoute ProgressSkeletonSpinnerToast
Data Display
Approval FlowAvatarBadgeCalendar ViewCode BlockComment ThreadContact cardCountdownDescription ListDiff ViewerFile ListFile managerFolderGanttJSON ViewerKbdLog ViewerMarkdownPresenceSchedulerTagTimelineTree View
Tables & Lists
Audit LogData TableDeal PipelineEditable GridKanbanListMembers tablePermissions MatrixTableTask ListVirtual List
Charts & Stats
Animated CounterArea chartBar chartDonut chartFunnel chartGaugeGitHub ActivityHeatmap calendarLeaderboardLine chartRadial barSparklineStat CardTrackerTrend badge
Layout
AccordionApp ShellCardCollapsibleDetail LayoutEntity HeaderPage HeaderScroll AreaSeparatorSettings LayoutSplit ViewToolbar
Media
Audio PlayerCarouselCSV ViewerDOCX ViewerExcel ViewerFile SystemImage CropperImage LightboxLocation MapPDF ViewerPowerPoint ViewerQR CodeStep PlayerVideo Player
AI Kit
Agent Status CardChat MessageChat ThreadConversation ListFluid OrbGrid RevealMatrix OrbModel PickerPrompt InputReasoning IndicatorRule BuilderSuggestion ChipsTool Call TimelineUsage MeterVoice InputWorkflow Canvas
Text & Effects
Gravity Letters
Mobile
Action SheetBottom Tab BarFABHaptic ButtonHero HeaderInstall PromptLarge Title HeaderNotification BannerOnboarding CarouselPicker WheelPull To RefreshSlide To ConfirmSticky CTA BarSwipe DeckSwipeable Tabs
Commerce
Cart drawerCategory pickerCheckout stepsCoupon inputFavorite buttonFilter panelListing cardListing gridOrder trackerPricePrice rangePricing tableProduct galleryQuantity stepperReviewsSeller card
Blocks
Admin Dashboard PageAdmin ShellAI Chat PageAutomation Builder PageCheckout PageCRM Contact PageCRM Pipeline PageError PagesInbox PageInvoice PageKPI DashboardListing Detail PageLogin PageMarketplace Home PageMarketplace Search PageMarketplace ShellMobile App HomeOnboarding FlowPost Listing WizardPricing PageRegister PageSettings PageUsers Admin Page
Hooks & Utilities
AI ChatChart kitCommerceDate utilsFile exportFile typesFiltersForm validationHapticsInvoicingMotion presetsNavigationNumber formatRelative timeRomanian locationsSpreadsheetText matchTonesUIProvideruseClipboarduseConsentuseControllableStateuseCooldownuseDebounceuseKeyboardInsetuseLocaleuseLongPressuseMediaControlsuseMediaQueryuseOverflowItemsusePersistedStateuseScrollEdgesuseScrollStateuseSelectionuseShortcutuseStickToBottom
GalleryTheme

Media

PowerPoint Viewer

MediaPowerPoint ViewerNew
PDF ViewerQR Code
Live props
Content
src
fileName
defaultSlide1
Behavior
defaultLayout
defaultZoom
defaultNotesVisible
defaultSidebarOpen
maxFileSize
Appearance
variant
radius
highlightColor
activeHighlightColor
Layout
showToolbar
showThumbnails
showSearch
showLayoutSwitch
showNotes
showPresent
showDownload
showUpload
height640px
Code
import { PptxViewer } from "@/components/ui/pptx-viewer"

<PptxViewer />
ProNew

v1.0.0·Added in 1.4.0

A PowerPoint (.pptx) viewer with real slides, thumbnails, zoom, search, speaker notes, a single slide view and a fullscreen presenter.

Slides render in the browser from the .pptx itself, with nothing uploaded: layouts, masters and the theme's colors and fonts, backgrounds (solid, gradient, picture), shapes with fills, outlines, arrows, rotation and flips, grouped shapes, text with bullets, numbering, spacing and shrink-to-fit, cropped pictures, tables with their styles, bar, line, area and pie charts from the values saved in the file, and SmartArt from its saved drawing; video, audio and embedded objects show an honest labeled placeholder. Text stays real text you can select and search. Scroll through the slides as a column, or switch to one slide at a time (Single slide); only the slides near the view are drawn, so long decks stay light. The toolbar moves between slides (‹ ›, or type a number in the slide field: Enter jumps, Up / Down step, Escape cancels), zooms (- / + or a percentage, Automatic, Fit page, Fit width), searches, shows the speaker notes under the slide, starts the presenter and downloads the file; below 720px of width the switches, Present and Download move into the ⋯ menu, which also opens another .pptx (or drop one onto the viewer). The sidebar lists every slide as a thumbnail, hidden slides dimmed; arrows, Home and End move through it. In the viewer, ← → Page Up / Page Down, Home and End change slides (↑ ↓ too while a slide fits the view), Ctrl+F / ⌘F opens search: the counter reads 2 of 6, Enter / Shift+Enter jump between hits, hits in the notes open the notes. Present goes fullscreen with the hidden slides left out: click, Space, arrows or Page Up / Down to advance, Home / End, Escape to leave; on a phone swipe left or right. Pinch with two fingers, or Ctrl / ⌘ + scroll, to zoom around that point. Menus become bottom sheets on phones and slides keep their own colors in dark mode.

Add to a project

npx wingo-ui@latest add pptx-viewer

Pro item: the CLI needs a Pro account. See plans

Dependencies

fflatelucide-reactbuttondropdown-menupopovertooltipuse-controllable-statemotionui-config

Files

  • components/ui/pptx-viewer.tsx

See also

PDF ViewerDOCX ViewerExcel ViewerCarousel
PreviousPDF ViewerNext QR Code
Slideof –
Loading presentation