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

Excel Viewer

MediaExcel ViewerNew
DOCX ViewerFile System
Live props
Content
src
fileName
defaultSheet
Behavior
defaultZoom1
defaultGridlines
defaultFormulas
defaultDarkCells
sortable
resizable
maxFileSize
locale
Appearance
variant
radius
selectionColor
highlightColor
activeHighlightColor
Layout
showToolbar
showFormulaBar
showSheetTabs
showHeadings
showSearch
showGridlines
showFormulas
showDarkCells
showDownload
showUpload
height640px
Code
import { ExcelViewer } from "@/components/ui/excel-viewer"

<ExcelViewer />
ProNew

v1.0.0·Added in 1.4.0

An Excel (.xlsx) and CSV viewer with real cell styles, number formats, frozen panes, sheet tabs, a formula bar, sort, search and zoom.

Scroll the sheet both ways: only the rows and columns in view are drawn, so tens of thousands of rows stay smooth, and the A B C / 1 2 3 headings and the file's frozen rows and columns stay put. Cells keep the workbook's look: fonts, fills, borders, alignment, wrapping, merged cells, column widths and row heights, hidden rows and columns, number formats (currency, percent, dates through Intl and the locale), conditional formats (color scales, data bars, icon sets, highlight rules), Excel table styles, images and charts. Click a cell to select it, Shift+click or drag for a range, click a heading for a whole column or row; on touch, tap a cell. The keyboard works like Excel's: arrows, Tab, Enter, Home / End, Page Up / Down, Ctrl / ⌘ + arrows jump to the edge of the data, Shift extends, Ctrl / ⌘ + A selects all, Ctrl / ⌘ + C copies as tab separated text. The formula bar shows the address and the formula or value of the active cell; type an address, a range like Team!A2:C9 or a defined name in its box and press Enter to go there. Each column heading has a menu (Alt+Down) to sort A to Z or Z to A in the view only (blank cells stay last, totals rows stay at the bottom) and to clear the sort; drag a heading edge to resize, double-click it to fit. Search opens from the toolbar or with Ctrl+F / ⌘F inside the viewer and looks through every sheet: the counter reads 2 of 6 and Enter / Shift+Enter jump between hits, switching sheets as needed. Sheet tabs sit at the bottom and scroll sideways; hidden sheets are left out and the ☰ menu lists them all. The toolbar zooms (- / + or a percentage, Fit width), turns gridlines, formulas and dark cells on or off and downloads the file; below 720px of width these move into the ⋯ menu, which also opens another .xlsx or .csv (or drop one onto the viewer). Pinch with two fingers, or Ctrl / ⌘ + scroll, to zoom around that point. Menus become bottom sheets on phones.

Add to a project

npx wingo-ui@latest add excel-viewer

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

Dependencies

@tanstack/react-virtualfflatelucide-reactbuttondropdown-menupopovertooltipuse-controllable-statespreadsheetui-config

Files

  • components/ui/excel-viewer.tsx

See also

DOCX ViewerPDF ViewerCSV ImportSpreadsheetlibData Table
PreviousDOCX ViewerNext File System
Loading workbook