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

Navigation

Table Of Contents

NavigationTable Of Contents
StepsTabs
Live props
Content
headings
title
pillLabel
sheetTitle
State
defaultSheetOpen
Appearance
variant
size
tone
color
showProgress
Layout
collapseBelow
collapseOn
sticky
Behavior
offset16
smooth
updateHash
Code
import { TableOfContents } from "@/components/ui/table-of-contents"

<TableOfContents />
Pro

v1.0.0·Added in 1.0.0

An "On this page" list of a long page's sections that highlights the one being read and jumps to any; a pill and sheet on phones.

Scroll the page and the section you are reading lights up: on the line variant a short bar glides along the rail to it on a smooth spring, on the dots variant its dot grows and fills. Click a row to glide to that section; the highlight goes straight to it instead of running through the sections in between, the heading lands just under the top bar, receives focus and the URL hash updates (without adding history). Tab or the arrow keys (Home / End for the first and last) move through the rows, Enter jumps. Opening a page with #section in the URL lands there without animation. Below collapseBelow the list turns into a sticky pill under the top bar with a reading ring and the current section, which crossfades as you scroll; tap it to open every section in a bottom sheet (48px rows, the current one checked), tap a row and the sheet closes, then the page jumps. Under reduced motion jumps are instant and nothing slides or crossfades.

Add to a project

npx wingo-ui@latest add table-of-contents

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

Dependencies

motionlucide-reactui-configdraweruse-controllable-stateuse-media-queryuse-scroll-statemotiontext-matchtones

Files

  • components/ui/table-of-contents.tsx

See also

useScrollStatehookScroll ProgressHook SidebarProximity SidebarDrawer
PreviousStepsNext Tabs
NNorthwind CRM / Documents / Contracts#none· 16px · smooth · hash

On this page

Documents · Contracts

Lease agreement, 2-bedroom apartment, New York

8 min read · no. 118 of Sep 23, 2026

1. The parties

Landlord: Olivia Bennett, residing at 14 Observatory Lane, New York, hereinafter the Landlord.

Tenant: Andrew Collins, residing at 7 Pine Street, Seattle, hereinafter the Tenant. The parties agree to this lease on the terms below.

2. The property

The Landlord rents to the Tenant the 2-bedroom apartment at 22 West 86th Street, apt. 9, 3rd floor, New York, with a floor area of 580 sq ft.

The apartment is handed over furnished and equipped as listed in the move-in report, annex 1 to this lease, signed by both parties on October 1, 2026.

3. Term of the lease

The lease runs for 12 months, from October 1, 2026 to September 30, 2027. At the end it can be extended by an addendum, with the consent of both parties.

The Tenant gives notice of an extension at least 30 days before the lease ends.

4. Rent and payment

The monthly rent is $2,500.00, due by the 5th of each month by bank transfer to account 0130 1202 4512, held at Chase.

Payments more than 10 days late carry a penalty of 0.1% of the amount due per day.

4.1 Security deposit

On signing, the Tenant pays a security deposit equal to one month of rent, $2,500.00. It is returned within 15 days of moving out, minus any damage or unpaid amounts.

4.2 Utilities

Electricity, gas, water, internet and building fees are paid by the Tenant, based on the providers' bills. The meter readings at move-in are listed in annex 1.

5. Landlord obligations

To hand over the apartment in good condition, to ensure its quiet use for the whole term and to carry out major repairs, except those caused by the Tenant.

To register the lease with the local housing authority within 30 days.

6. Tenant obligations

To use the apartment with care, to pay the rent and utilities on time, not to sublet without the Landlord's written consent and to allow viewings with 48 hours' notice.

To return the apartment at the end of the lease in the condition it was received, allowing for normal wear.

7. Ending the lease

The lease ends when its term expires, by mutual agreement or by either party with 30 days' notice. Two consecutive months of unpaid rent allow the Landlord to terminate it.

8. Final provisions

This lease was signed today, September 23, 2026, in New York, in two original copies, one for each party. Disputes are settled amicably, otherwise by the courts of New York.

Annexes: 1. Move-in report. 2. Copies of the parties' IDs.

Landlord
Olivia Bennett

Tenant
Andrew Collins

Scroll the contract: the section you are reading lights up. Click a row to jump there; on a phone, tap the pill.