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

Timeline

Data DisplayTimeline
TagTree View
Live props
Appearance
variant
size
markers
tone
color
timeFormat
line
Behavior
order
expandable
animateIn
locale
Layout
groupByDay
stickyGroups
timePosition
State
loading
skeletonCount4
hasMore
loadingMore
Code
import { Timeline } from "@/components/ui/timeline"

<Timeline />
Pro

v1.0.0·Added in 1.0.0

Things that happened, in order: activity feeds, audit trails, changelogs and order tracking, with icons, relative times and day groups.

Read it top to bottom: each event has a marker on the line (a dot, an icon tile in its tone, or the person's avatar), a title, an optional description and a timestamp that stays fresh ("5 min. ago", "yesterday"); hover a timestamp on desktop for the full date and time (use timeFormat "datetime" where people on phones need it). Items with details show a Details button: click or tap it (Enter or Space from the keyboard) and the details slide open while the chevron turns; press again to close. New events slide in at the top and the rest glide down. In the feed variant events sit under day headings ("Today", "Yesterday") that can stick while you scroll. In the tracking variant finished steps get a check, the current step pulses, upcoming ones are hollow, a failed one turns red with an X, and the line fills down to the current step when it scrolls into view. Show older at the end loads more and spins while it waits. Tab only stops on real controls (links in titles, Details, Show older, buttons in meta). On a phone or in a narrow panel the side date column folds under the title and every button has a 44px touch target. Reduced motion drops the stagger, the growth and the pulse.

Add to a project

npx wingo-ui@latest add timeline

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

Dependencies

motionlucide-reactavatarbuttonempty-stateskeletonuse-controllable-stateuse-localemotionrelative-timetonesui-config

Files

  • components/ui/timeline.tsx

See also

StepsNotification CenterAvatarRelative timelibEmpty State
PreviousTagNext Tree View

Client activity

Tech Solutions Inc. · New York

  1. Invoice #2026-0412 paid
    09/24/2026, 4:22 PM
    $12,480.00 by bank transfer
    Olivia Bennett
    Paid
  2. Offer #OF-2026-118 accepted
    09/24/2026, 1:40 PM
    Adam Foster signed the offer online.
    Emma Carter
    Northwind CRM Pro license, 12 months$8,400.00
    Setup and data import$3,200.00
    Team training (2 sessions)$880.00
    Total$12,480.00
  3. Call with Adam Foster
    09/23/2026, 2:40 PM
    12 min · asked for training for 2 new teammates
    Michael Reed
  4. Email sent: “Order confirmation”
    09/21/2026, 4:40 PM
    Opened 3 times
    Emma Carter
  5. Client created
    09/12/2026, 4:40 PM
    Tech Solutions Inc. · New York · EIN 12-3456789
    Michael Reed

Add an event to see it slide in at the top