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

Back To Top

NavigationBack To Top
Rich Text EditorBounce Sidebar
Live props
Behavior
threshold400
showOn
smooth
Appearance
progress
variant
tone
color
size
radius
Content
label
showLabel
Layout
position
side
offset16
Code
import { BackToTop } from "@/components/ui/back-to-top"

<BackToTop />
Pro

v1.0.0·Added in 1.0.0

A floating button that appears on long pages, rings with your reading progress and takes you, and your focus, back to the top.

Scroll past the threshold and the button pops in on a quick spring, a thin ring around it filling as you read. Click or tap it to glide back to the top; once the scroll settles, focus moves to the page title so keyboard and screen reader users land there too (scroll away mid-way and focus stays put). Tab to it for a focus ring outside the progress ring, and press Enter or Space. With showOn="scroll-up" it stays out of the way while you read down and comes back the moment you flick up. On a phone it is 48px, sits above the bottom tab bar and clears the home indicator. Under reduced motion it only fades and the jump is instant.

Add to a project

npx wingo-ui@latest add back-to-top

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

Dependencies

motionlucide-reactbuttonuse-scroll-statemotiontonesui-config

Files

  • components/ui/back-to-top.tsx

See also

useScrollStatehookScroll ProgressButton
PreviousRich Text EditorNext Bounce Sidebar
SSummit CRM / Help / Guides0px/400px· smooth

Guides · Invoicing

Guide: send your first invoice in 12 steps

6 min read · updated Sep 23, 2026

1. Check what you need to send

Every invoice you send a business client needs a unique number, the date, both company names and addresses, the line items and the amount due. Summit CRM fills most of it for you.

2. Connect your payment account

Link your bank account or Stripe once, in Settings › Payments. Approval usually takes a day, and Summit CRM only asks for access with your consent.

3. Fill in your company details

In Settings › Billing add your tax ID, your office address, your bank details and the invoice series. The default series is SUM, numbered from 0001.

4. Add the client

Search the client by name or tax ID and the details fill in from your contacts. For Northwind Tech Inc. (San Francisco, EIN 94-1234567) you also see the current balance, $12,480.00.

5. Create the invoice

Pick the products or services, the quantities and the tax rate. The totals update as you type, rounded to the cent.

6. Check the totals

Before sending, look over the summary: the amount before tax, the tax for each rate and the total due.

ItemAmount
Summit CRM Pro license, 12 months$4,800.00
Setup and data import$3,200.00
Team training (hours) × 8$2,000.00
Sales tax 8%$800.00
Total due$10,800.00

7. Send it

Press Send invoice. The invoice gets a number and its status moves to “Sent”. You can close the page, delivery continues in the background.

8. Track delivery

Within minutes the status turns “Delivered” or “Bounced”. If it bounces you see the exact reason, for example a wrong email address.

9. Download the PDF

The signed PDF is your record of the invoice. Summit CRM keeps it for 7 years, as most tax rules require.

10. Get paid

The client gets an email with the PDF and a payment link. When the money arrives, the invoice marks itself as paid.

11. Correct an invoice

A sent invoice is never deleted: issue a credit note for the full amount, then a new, correct invoice.

12. Automate it

For subscriptions, set up monthly recurring invoices. They are issued and sent on the first day of the month, without a click.

Need help? Write to support@summitcrm.com.

Scroll the guide: the ring fills as you read. Press the button and focus lands on the title.