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 Editor
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 PlayerCarouselImage CropperImage LightboxLocation MapQR 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
GalleryThemeCredits

Data Display

Log Viewer

Data DisplayLog Viewer
KbdMarkdown
Live props
Behavior
maxLines100000
filterMode
regex
expandable
searchShortcut
fileName
State
defaultQuery
defaultFollow
loading
Layout
defaultWrap
height420px
toolbar
Appearance
showTimestamps
timeFormat
showLevels
showSource
showLineNumbers
ansi
size
Content
locale
Code
import { LogViewer } from "@/components/ui/log-viewer"

<LogViewer />
Pro

v1.0.0·Added in 1.0.0

A streaming log console for 100.000 lines: level colors, level and text or regex filters, follow the tail, ANSI colors and JSON details.

New lines stream in at the bottom and the view follows them. Scroll up (wheel, finger, scrollbar or keys) and following pauses by itself: a pill at the bottom counts the new lines (12 new lines) and a tap on it, the End key or scrolling back to the very end follows again; the follow toggle and the Live / Paused badge in the footer show the state. Type in the search to hide the lines that do not match (case and diacritics are ignored), or turn on the .* toggle for a regular expression (an invalid one is marked and filters nothing); in highlight mode every line stays, hits are marked and Enter / Shift+Enter or the arrows step through them. The level chips turn levels on and off and show their counts. Click, tap or press Enter on a line with details to open its JSON tree under it (the stream pauses so it stays put). The toolbar wraps lines, shows or hides the time, and the ⋯ menu copies the visible lines, downloads everything as a dated .log file or clears the buffer; on a narrow viewer wrap and time move into that menu, and below 768px it opens as a bottom sheet while the chips scroll sideways. The log body is one Tab stop: Up and Down move a focus row, Page Up / Page Down jump a page, Home goes to the first line, End to the newest, Escape drops the focus row (screen readers hear each focus row as it moves), and Ctrl+F / ⌘F inside the viewer jumps to its search (searchShortcut adds a global key). Lines over 10.000 characters are cut with a Show all button; with maxLines reached the oldest lines drop and the footer says how many.

Add to a project

npx wingo-ui@latest add log-viewer

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

Dependencies

@tanstack/react-virtualmotionlucide-reactbadgebuttondropdown-menuempty-statejson-viewersearch-inputtagtoggletooltipuse-clipboarduse-controllable-stateuse-localeuse-media-queryuse-stick-to-bottomfile-exportmotionnumber-formatrelative-timetext-matchtonesui-config

Files

  • components/ui/log-viewer.tsx

See also

JSON VieweruseStickToBottomhookCode BlockFile exportlib
PreviousKbdNext Markdown

Invoice sync · job #4812

Northwind CRM · started today at 13:31 UTC · billing API, tax ID 12-3456740

Running
INFInfoxml✓ Invoice 2026-0448 validated (UBL 2.1, 22.6 KB)
DBGDebughttpPOST /v1/invoices/upload 429 316ms
TRCTracequeuejob invoices:4812 heartbeat 365
WRNWarnsyncInvoice 2026-0449: slow response, retrying (3/5), Details
TRCTracequeuejob invoices:4812 heartbeat 367
WRNWarnsyncInvoice 2026-0449: slow response, retrying (3/5), Details
ERRErrorvalidatorValidation error: BR-US-065 the unit code is missing on line 3, Details
INFInfosyncFetching messages for tax ID 78-1234500
DBGDebughttpGET /v1/invoices/status 429 448ms
DBGDebughttpGET /v1/invoices/status 200 482ms
WRNWarnsyncInvoice 2026-0449: slow response, retrying (4/5), Details
INFInfoxml✓ Invoice 2026-0449 validated (UBL 2.1, 13.3 KB)
DBGDebughttpGET /v1/invoices/status 200 483ms
DBGDebughttpGET /v1/invoices 200 548ms
INFInfomailSent the confirmation to james.miller@northwind.app
INFInfomailSent the confirmation to ryan.cooper@northwind.app
DBGDebughttpGET /v1/invoices 200 301ms
TRCTracequeuejob invoices:4812 heartbeat 380
DBGDebughttpGET /v1/invoices/download 200 463ms
WRNWarnsyncInvoice 2026-0450: slow response, retrying (3/5), Details
DBGDebughttpGET /v1/invoices 200 456ms
DBGDebugdbupsert received_invoices 2026-0450 10ms
INFInfosyncFetching messages for tax ID 78-1234500
DBGDebugdbupsert received_invoices 2026-0450 7ms
DBGDebughttpGET /v1/invoices/status 200 495ms
WRNWarnhttpRate limit: 45/50 requests per minute
DBGDebughttpGET /v1/invoices 200 164ms
DBGDebughttpGET /v1/invoices 200 469ms
WRNWarnsyncInvoice 2026-0450: slow response, retrying (3/5), Details
DBGDebughttpGET /v1/invoices 200 133ms
DBGDebugdbupsert received_invoices 2026-0450 4ms
WRNWarnsyncInvoice 2026-0450: slow response, retrying (4/5), Details
DBGDebughttpPOST /v1/invoices/upload 200 122ms
INFInfosyncFetching messages for tax ID 12-3456740
WRNWarnsyncInvoice 2026-0450: slow response, retrying (2/5), Details
WRNWarnsyncInvoice 2026-0450: slow response, retrying (4/5), Details
TRCTracequeuejob invoices:4812 heartbeat 399
DBGDebughttpGET /v1/invoices 200 289ms
400 lines · 24 errorsLive

stream: 20 lines/s · follow: on · search: no key · file: logs-2026-09-24-1640.log · locale: auto