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

Markdown

Data DisplayMarkdown
Log ViewerPresence
Live props
Content
children
Appearance
size
variant
caret
tone
color
codeAccent
codeLineNumbers
State
streaming
Layout
codeMaxHeight480px
Behavior
headingIds
linkTarget
allowImages
breaks
Code
import { Markdown } from "@/components/ui/markdown"

<Markdown>
  I found **3 overdue invoices** in September, **$22,775.95** in total:

| Client | Invoice | Amount | Late |
|---|---|---:|---:|
| Acme Corp | #2026-0405 | $12,480.00 | 1 day |
| Greenleaf Pharmacy | #2026-0371 | $7,315.20 | 53 days |
| West Side Books | #2026-0366 | $2,980.75 | 57 days |

**What I suggest:**
1. A polite reminder to Acme Corp, the due date passed yesterday.
2. A call to Greenleaf Pharmacy: Daniel Reed, `(503) 555-0118`.
3. For West Side Books, a formal notice. I can use the **Payment notice** template.

Shall I draft the emails?
</Markdown>
Pro

v1.0.0·Added in 1.0.0

Markdown in the library's look: tables that scroll in their own box, highlighted code, task lists, and a streaming mode that never flickers.

Read it like any page: headings keep their levels, links are always underlined (external ones get a small arrow and open in a new tab), done tasks are struck through, and fenced code gets a highlighted block with a copy button. A table wider than the column scrolls sideways inside its own rounded box with soft edge fades, never the page; once it overflows it is a focusable region, so Tab reaches it and the arrow keys scroll it. Tab also stops on each link (Enter follows it), on every code block's scroller and on its copy button. An image that fails to load shows its alt text instead of a broken icon. With streaming on, text arrives without flicker: half-typed bold, code spans, links and table headers stay hidden until they complete, only the last block re-renders, each new block fades in and a caret pulses at the end of the text. Press Replay as a stream in the playground to replay the answer. On a phone the text stays at 15px, long words and links wrap, and tables and code scroll with a swipe. Reduced motion drops the fade and stills the caret.

Add to a project

npx wingo-ui@latest add markdown

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

Dependencies

react-markdownremark-gfmlucide-reactcode-blockuse-scroll-edgestonesui-config

Files

  • components/ui/markdown.tsx

See also

Code BlockTable Of ContentsCollapsibleuseScrollEdgeshookAI Chatlib
PreviousLog ViewerNext Presence
Northwind assistantNorthwind Pro · today, 4:32 PM

I found 3 overdue invoices in September, $22,775.95 in total:

ClientInvoiceAmountLate
Acme Corp#2026-0405$12,480.001 day
Greenleaf Pharmacy#2026-0371$7,315.2053 days
West Side Books#2026-0366$2,980.7557 days

What I suggest:

  1. A polite reminder to Acme Corp, the due date passed yesterday.
  2. A call to Greenleaf Pharmacy: Daniel Reed, (503) 555-0118.
  3. For West Side Books, a formal notice. I can use the Payment notice template.

Shall I draft the emails?

streaming=false · 4 blocks
Internal noteEmma Carter · Sep 24, 2026

Acme Corp · collection plan

Contact: Nathan Price, finance director. See the client record (opens in a new tab). Office: 28 Market St, San Francisco

  • Invoice #2026-0405 issued on Sep 10, 2026
  • Past due since Sep 23, 2026
  • Email reminder today, with the standard template
  • Call on Friday if the payment does not arrive

Usually pays 2 or 3 days late. No formal notice yet.

The Acme Corp office in San Francisco

sql
SELECT number, amount, due_date
FROM invoices
WHERE client_id = 'c01' AND status = 'overdue';

Replay the answer to watch half-typed bold and the table header wait until they are complete.