Skip to content
WingoUI
ComponentsTemplatesDocsPricingAI agentsBlogChangelogContact
  1. Home
  2. Components
  3. Pro
What Pro unlocks

Everything in Wingo UI Pro

Pro unlocks all 374 Wingo UI items: the 75 free ones plus the 299 Pro components, blocks, page templates and hooks listed below, including data tables, charts, kanban boards, editors and dashboards. Each one is a single file for React 19 and Tailwind CSS v4 that you install with the CLI, shadcn or your AI agent through the MCP server.

Try every Pro item live, no account needed. Open any card for its configurable preview; you only need Pro to copy or install the source.

[178] components[43] blocks and sections[56] page templates[22] hooks and utilities
Buttons & Actions4Inputs29Forms8Navigation12Overlays6Feedback5Data Display18Tables & Lists10Charts & Stats14Layout9Media16AI Kit14Text & Effects5Mobile15Commerce16Marketing Sections14Blocks26Templates56Hooks & Utilities22

One license, three ways to pay

Compare plans
  • Monthly$8a monthEvery new release while subscribed. Cancel anytime.
  • YearlySave 17%$80a yearThe same Pro access, billed once a year.
  • Lifetime$150onceOne payment, all future components and updates.

14-day refund on your first purchase of Pro or Lifetime: we refund the full amount as long as you have not downloaded any Pro item yet. Free items do not count. Refund policy

Pro Buttons & Actions[4]

All components in Buttons & Actions

Toggle

A React toggle button that stays pressed, for bold and italic in an editor, a favorite heart, mute, or a filter pill.

Button Group

A React button group: buttons joined into one control or spaced in a row, plus a split button that pairs a main action with a menu.

Theme Toggle

A React theme toggle for light, dark and system mode on next-themes: an animated sun and moon button, a segmented control or a menu.

Toggle Group

A React toggle group: a row of toggles where one or several stay pressed, for formatting, alignment, view switches and filters.

Pro Inputs[29]

All components in Inputs

Avatar Upload

A React avatar upload for profile pictures: pick or shoot a photo, crop it in a round frame and watch a ring fill while it uploads.

Color Picker

A React color picker with a saturation and brightness square, hue and opacity sliders, HEX / RGB / HSL inputs, swatches and an eyedropper.

Calendar

A React calendar to pick one day, several days or a range, with disabled days, event dots, several months and a quick month / year jump.

Slider

A React slider for a number or a range: any number of thumbs, labelled marks, a value bubble, vertical mode, tones and finger-sized thumbs.

Masked Input

A React masked input that formats itself as you type or paste: card number, expiry, CVC, IBAN, CNP, postal code or a custom mask.

Date Range Picker

A React date range picker for reports and bookings: two months with presets on desktop, a one-month bottom sheet on phones.

Combobox

A React combobox and autocomplete: type to filter a list or search a server, with matches in bold, a create row and a phone search sheet.

Country Select

A searchable country picker with flags, localized names, optional dial codes, a suggested group and single or multiple selection.

Cron Picker

A React cron expression builder: frequency tabs, weekday and day chips, a time, a sentence that reads the schedule back and the next runs.

Currency Input

A React currency input: a money field formatted per locale as you type, with an optional currency selector and quick amount presets.

Date Picker

A React date picker: type a date in your locale or pick it from a calendar, with presets, limits, optional time and a phone sheet.

Date Time Picker

A React date time picker: a calendar beside a column of free time slots, presets and a time zone label in one field, a sheet on phones.

Email Input

A React email input for one address or a list of recipients, with domain completion, typo hints, contact suggestions and validation.

Emoji Picker

A React emoji picker with search, category tabs, recent emoji, skin tones and a preview, bundling 1,870 emoji with names and keywords.

File Upload

A React file upload with drag and drop, paste and camera capture: validation, previews, per-file progress, and list, grid or avatar layouts.

Filter Builder

A React filter builder for any list: condition chips, AND / OR, nested groups, saved views and a live count, with one bottom sheet on phones.

Input Group

A React input group that joins a field with text addons, selects, icons and buttons into one box with one focus ring and one error state.

Mention Input

A React mention input where @ mentions people, # adds tags and any trigger you define inserts chips, stored as markup that survives renames.

Month Picker

A React month picker for one month or a range from a year grid, with quarters and presets, for reports, billing periods and expiry dates.

Multi Select

A React multi select: pick several options shown as chips with a +N overflow, with search, select all, a maximum and async options.

Number Input

A React number input to type or step values: steppers with hold to repeat, min, max and step, and Intl formatting for money and units.

Password Input

A password field with a caret-safe reveal toggle, a Caps Lock warning and, for sign-up, a strength meter, rules checklist and generator.

Phone Input

A React phone number input with a searchable country picker, formatting as you type, validation and one clean E.164 value out.

Rating

A React star rating to rate or show a score with stars or any icon: half values, a hover preview, a label per value and a fill that pops.

Signature Pad

A React signature pad: draw with a finger, pen or mouse in ink that thins with speed, or type a name, then export it as PNG or SVG.

Tag Input

A React tag input that turns typed, pasted or suggested text into removable chips, for tags, keywords and email recipients.

Time Picker

A React time picker to type a time or pick it from columns, with 12 / 24 hours by locale, minute steps, limits and wheels on phones.

Timezone Select

A searchable time zone picker with live UTC offsets, optional local times, region groups and a one-tap Use my time zone row.

Tree Select

A React tree select: a field that opens a searchable tree of categories, folders or locations, for one value or many as removable tags.

Pro Forms[8]

All components in Forms

Address Input

A React address input for Romanian addresses: county, locality search, street, number, block and apartment, and a checked postal code.

Booking Widget

A React booking widget: pick a service and a team member, a day and time, add your details and get a confirmation with an .ics file.

CSV Import

A React CSV import wizard for CSV and Excel files in four steps: upload, column mapping, row review with inline fixes, and a run report.

Form Wizard

A React multi-step form wizard with a stepper, sync or async validation per step, a summary step and a full-screen phone layout.

Inline Edit

A React inline edit field for text, numbers and selects that edits in place and saves optimistically.

Invoice line items

A React invoice line items editor that works like a small spreadsheet, with VAT per rate computed the e-Factura way.

Rich Text Editor

A React rich text editor on Tiptap with a toolbar, Markdown shortcuts, mentions, images and counts that outputs HTML, JSON or Markdown.

Schema Builder

A React JSON schema builder for extraction schemas: named fields with unique keys, field and JSON types, required flags, nesting and a JSON view.

Pro Navigation[12]

All components in Navigation

User Menu

A React user menu: profile header, theme switch, account links, other accounts and sign out, as a dropdown or a bottom sheet on phones.

Sidebar

A React sidebar for admin apps: grouped links with icons, nested sections, badges, a sliding active pill, an icon rail and a filter.

Back To Top

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

Command Menu

A React command menu (⌘K palette) with groups, shortcuts, nested pages, async results and recents, and a full-height sheet on phones.

Global Search

A React global search bar for an app header: grouped results from every entity as you type, scopes, recents and suggestions, full screen on phones.

Nav Tabs

React navigation tabs that are links: the sections of a page or a record change the URL, with the look of tabs and the semantics of navigation.

Pagination

A React pagination for tables and lists: numbered pages with ellipses, previous / next, page size, jump to page and load more.

Steps

A React stepper for checkouts, onboarding and KYC: circles, bars or dots, with complete, error and loading states and a phone header.

Table Of Contents

A React table of contents that lists a page's sections, highlights the one being read and jumps to any, with a pill and sheet on phones.

Topbar

A React top bar for app headers: menu button, title or breadcrumb, a search in the middle and actions at the end, on a sticky glass bar.

Workspace Switcher

A React workspace switcher for organizations, teams or projects: logos, plan badges, search, groups, mod+1…9 shortcuts and a create row.

Breadcrumb

A React breadcrumb that shows where you are, folds the middle of long paths and gives phones a back link.

Pro Overlays[6]

All components in Overlays

Alert Dialog

A React alert dialog for confirmations: an async confirm that loads, fails inline and shakes, plus an await confirm() API.

Context Menu

A React context menu component: actions on right-click for grids and lists, and an iOS-style action sheet on a long press on touch screens.

Hover Card

A React hover card: a rich preview of a person, listing or link on hover or focus, opening as a bottom sheet on touch screens.

Share Dialog

The Share dialog of a collaborative app: invite people by email with a role, manage who has access, set link access and copy the link.

Shortcuts Dialog

A React keyboard shortcuts dialog, the "?" overlay of keyboard-friendly apps: every shortcut grouped and searchable, in the device's notation.

Tour

A React product tour that dims the page around the real UI, explains each step in a card, docks at the bottom on phones and adds hotspots.

Pro Feedback[5]

All components in Feedback

Banner

A React announcement banner: a full-width strip for the top of an app, page or panel, with tones, one action and a dismissal it remembers.

Cookie Consent

A React cookie consent banner for GDPR: a bottom bar or card with Accept, Reject and Settings, per-category switches, and a gate for embeds.

Notification Center

A React notification center: a bell with an unread count that opens an inbox with tabs, day groups, inline actions and swipe to dismiss.

Setup Checklist

The dashboard Get started card: setup tasks with progress and actions, collapsible and dismissible, or a floating launcher.

Route Progress

A React route progress bar: the thin bar at the top of the app while a page loads, started by in-app links or by hand for any async work.

Pro Data Display[18]

All components in Data Display

File manager

A React file manager for the documents of a company or a record: folders and files in a grid or a list, a folder tree, uploads and bulk actions.

Countdown

A React countdown timer to a launch, sale or deadline, shown as rolling digit blocks, inline in a sentence or in words, with done content.

Approval Flow

A React approval workflow: the sign-off chain of a request, showing who approved and who is next, with comments, reminders and history.

Calendar View

A React event calendar for appointments and meetings: month, week, day and agenda views, a now line and drag to reschedule.

Comment Thread

A React comment thread for records: replies, reactions, edit and delete, @mentions and a composer that sends optimistically with retry.

Contact card

A React contact card: a person or company at a glance with avatar, role, status, call, email and WhatsApp buttons, tags and last activity.

Description List

A React description list for detail pages: key-value grids for clients, invoices and profiles, with copy buttons, skeletons and iOS rows.

Diff Viewer

A React diff viewer for two texts: split or unified views, word highlights, collapsed context, syntax colors and jumps between changes.

File List

A React file list for attachments and documents: rows, preview tiles or chips with type icons, thumbnails, upload progress and file actions.

Gantt

A React Gantt chart: project tasks as bars you drag and resize, with progress, dependency arrows, milestones, groups and a phone task list.

JSON Viewer

A collapsible JSON tree with type colors, search that opens the matching branches, copy value or path, and virtualization for huge payloads.

Log Viewer

A React log viewer for streaming logs up to 100,000 lines: level colors, level and regex filters, tail follow, ANSI colors and JSON details.

Markdown

A React Markdown renderer in the library's look: scrolling tables, highlighted code, task lists and a flicker-free streaming mode for AI.

Presence

React presence indicators for collaboration: an avatar stack with status rings and a who-is-here list, typing, live cursors and last seen.

Scheduler

A React resource scheduler to book rooms, cars and people on a timeline: drag to book, move and resize, conflicts refused, agenda on phones.

Tag

A React tag and chip component: toggling filter chips, removable tags, a dot, icon, avatar or count, in groups that wrap, scroll or fold.

Timeline

A React timeline component for activity feeds, audit trails, changelogs and order tracking, with icons, relative times and day groups.

Tree View

A React tree view for folders, categories or permissions: animated expand, selection, tri-state checkboxes, filter and drag to move.

Pro Tables & Lists[10]

All components in Tables & Lists

Kanban

A React kanban board for tasks, orders and pipelines: drag cards with mouse, touch or keyboard, WIP limits, inline add and a phone layout.

Data Table

A React data table on TanStack Table: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones.

Deal Pipeline

A React sales pipeline board: deal stages with weighted totals, a forecast summary, drag between stages with a lost reason, a list view.

Audit Log

A React audit log table: who did what, when and to which record, with filters, day groups, before / after diffs and a CSV export.

Editable Grid

A React editable grid that works like a spreadsheet: typed cells edited in place, range selection, Excel copy and paste, undo, validation.

List

A React list for settings, contacts, inboxes and orders: iOS grouped panels, selection, row menus, swipe actions and drag to reorder.

Members table

A React members table for B2B team settings: a role select per row, status, activity, 2FA, pending invitations, seats and an invite dialog.

Permissions Matrix

A React permissions matrix of roles by permissions, grouped by module, with dependencies, unsaved-change dots and a per-role list on phones.

Table

A React table component: semantic table parts plus a props API for small read-only tables that sort, total and turn into cards on phones.

Virtual List

A React virtual list for long and endless lists at 60fps, with sticky group headers, infinite loading and scroll restoration.

Pro Charts & Stats[14]

All components in Charts & Stats

Gauge

A React gauge chart showing one value against a scale and its zones: a speedometer arc, needle or segmented dial with a target tick.

Radial bar

A React radial bar chart: several goals as concentric activity rings or 270° bars, each filling toward its own target and lapping past 100%.

Tracker

A React status tracker: a row of status blocks over time, one per day, hour or deploy, for uptime pages, sync health and habit streaks.

Heatmap calendar

A React heatmap calendar of activity by day over weeks or a year, on a one-hue scale with month and weekday labels, a total and a legend.

Stat Card

A React stat card for dashboards: a label, a big number that counts up, a delta pill that knows good from bad, a sparkline and a goal bar.

Sparkline

A React sparkline: a word-sized chart for table cells, list rows, KPI tiles and running text, as a line, an area, bars or win / loss ticks.

Leaderboard

A React leaderboard ranking people, teams or products by one metric, with medals, bars, rank changes, a podium and a "you" row.

Area chart

Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares.

Bar chart

Compares categories or periods as columns or horizontal bars, grouped, stacked or 100%, with negatives below a clear zero line.

Donut chart

Parts of a whole as a donut or pie, with the total in the middle, a legend with values and shares, and a selectable slice.

Funnel chart

A React funnel chart of conversion: each step's count, its conversion and the drop-off between steps, as aligned bars or a tapered shape.

Line chart

Trends over time as smooth lines, with a crosshair readout of every series, a dashed comparison period, target lines and direct end labels.

Radar chart

Compares one or more series across 3 to 12 categories on a spider web, for skills, product scores, survey results and plan comparisons.

Trend badge

A React trend badge, the delta chip for KPIs, table cells and leaderboards: an arrow, a signed change and a color that says if it is good.

Pro Layout[9]

All components in Layout

App Shell

A React app shell for admin layouts: a collapsible, resizable sidebar, a top bar and the page, with a drawer and a tab bar on phones.

Collapsible

A React collapsible section that opens and closes with a spring height animation, plus CollapsibleText, the show more clamp for long text.

Detail Layout

A React detail layout for record pages (a client, a contact, an invoice): header, a main column of sections, a side panel and section cards.

Entity Header

A React entity header for record pages (a client, a deal, an invoice): name, status, key facts, actions, favorite, follow and a pager.

Page Header

A React page header for admin screens: breadcrumb, title with avatar and badges, description, meta, actions that fold into a menu, and tabs.

Scroll Area

A React scroll area with slim custom scrollbars, edge fades that ease out at the ends, snap scrolling and prev / next buttons for rails.

Settings Layout

A React settings page layout like macOS and iOS: a section nav, grouped label and control rows, and a save bar that slides up on changes.

Split View

A React split view: a list and its detail side by side on wide screens, a push and pop stack with swipe back on phones.

Toolbar

A React toolbar for lists and tables: search, filter chips, applied filters, sort, a list or grid switch, the count, actions and bulk mode.

Pro Media[16]

All components in Media

QR Code

A React QR code generator with rounded or dotted modules, soft eyes, a center logo, any colors, a caption and one-tap PNG or SVG export.

Carousel

A swipeable React carousel on Embla for photos, cards, testimonials and onboarding, with peek, arrows, dots, thumbnails and autoplay.

PowerPoint Viewer

A React PowerPoint (.pptx) viewer with real slides, thumbnails, zoom, search, speaker notes, a single slide view and a fullscreen presenter.

Image Lightbox

A React image lightbox: a full-screen photo viewer that zooms from its thumbnail, with swipe, pinch zoom and swipe down to close.

Video Player

A React video player with controls that hide while you watch, a chapter scrubber, captions, speed, picture in picture and full screen.

Image Cropper

A React image cropper for photos before upload: aspect presets, pinch or wheel zoom, rotation, a thirds grid and a JPEG, PNG or WebP export.

Location Map

A React location map to pick or show a place: a draggable pin, an optional radius with a towns count, offline search and a static fallback.

Audio Player

A React audio player with a waveform you can see and scrub, as a podcast card, a chat voice message or a thin call-log bar.

Excel Viewer

A React Excel viewer for .xlsx and CSV files with real cell styles, number formats, frozen panes, sheet tabs, a formula bar, sort and search.

DOCX Viewer

A React Word (.docx) viewer with real pages, headers and footers, thumbnails, zoom, search, comments, tracked changes and download.

CSV Viewer

A React CSV viewer for large CSV and TSV files: typed columns, sort, filters, search, selection with copy, frozen columns and zoom.

DOCX Editor

A React Word (.docx) editor with real pages, styles, tables, images, find and replace, comments and tracked changes, saved as .docx.

File System

A React file browser in the style of Finder: a sidebar, icons, list, columns and gallery views, a preview panel and Quick Look on real documents.

Image compare

A before and after slider over two images or any two layers, for photo edits, AI image tools, redesigns and renovations.

Image Gallery

A React image gallery with masonry, cropped grid and justified rows layouts, tag filters, a lightbox and load more.

PDF Viewer

A React PDF viewer on PDFium: sharp pages, search, thumbnails, rotation, and highlights with notes that export as real PDF annotations.

Pro AI Kit[14]

All components in AI Kit

Workflow Canvas

A React workflow builder: a node editor for automations with a trigger, actions, AI steps and yes / no branches you connect and watch run.

Voice Input

A React voice input: a mic that grows into a recording pill with a live waveform and transcript, a full-width bar, or a voice orb.

Model Picker

A React AI model picker for chat apps: a quiet trigger that opens a short grouped list of models, each with one line on what it is for.

Agent Status Card

A React AI agent status card: orb, name, status, current step, progress, elapsed time, steps, logs and the controls that matter right now.

Chat Message

A React AI chat message: the question in a bubble, the answer with its thinking, tool calls, markdown, sources and actions.

Chat Thread

A React chat thread for AI chats: the scrolling conversation, pinned to the newest message while it streams, with day pills and follow-ups.

Chat Widget

A React support chat widget like Intercom or Crisp: a floating launcher that opens Home, Messages and Help, with an AI agent and a handoff.

Conversation List

A React chat history list for AI apps: New chat, search, pinned chats and day groups, with rename, pin, archive and delete.

Prompt Input

A React prompt input for AI chat: a growing text box with attachments, tool chips, a model picker, dictation and a send and stop button.

Reasoning Indicator

A React reasoning indicator for AI chat: a shimmering live timer while the model thinks, then a quiet "Thought for 12 s" row to expand.

Rule Builder

A React rule builder for if-this-then-that automations: a trigger, conditions and ordered actions as sentence cards, read back as one sentence.

Suggestion Chips

React suggestion chips for AI chat: prompts people tap instead of typing, as pills under a composer, welcome cards or follow-up rows.

Tool Call Timeline

A React tool call timeline for AI agents: each step with its status, time, input and output, plus approval and retry when a call needs them.

Usage Meter

A React usage meter for plan quotas: tokens, messages, images, credits or money against limits, with resets, warnings and an upgrade offer.

Pro Text & Effects[5]

All components in Text & Effects

Background Pattern

A decorative, theme-aware pattern layer of dots, grid, lines, diagonal stripes or crosses for heroes, cards, empty states and auth screens.

Marquee

An infinite scroller for logos, cards, tags or any content, horizontal or vertical, with edge fades and a pause control.

Terminal

An animated React terminal window for dev-tool landing pages and docs: typed commands, output, spinners and progress bars.

Text Animate

Animated text for headlines and copy that reveals by word, character or line with a fade, blur, slide, scale or typewriter effect.

Text Rotate

A rotating word for headlines that cycles through a list of words or short phrases in place, inside a sentence that reflows to fit each one.

Pro Mobile[15]

All components in Mobile

Hero Header

A React photo hero header for phone detail pages: a full-bleed image under the status bar, glass buttons, parallax and a bar handover.

Bottom Tab Bar

A React bottom tab bar for phones: 3 to 5 tabs at the thumb with an animated pill, badges, a raised center action and hide on scroll.

Sticky CTA Bar

A React sticky CTA bar for product, listing and checkout pages on phones: the price on one side, the main action on the other.

Slide To Confirm

A React slide to confirm control: drag the thumb to the end to approve a payment or risky action.

Action Sheet

A React iOS-style action sheet: a short list of actions with a title, red destructive rows, a separate Cancel and an awaitable show().

FAB

A React floating action button (FAB) for a phone screen's main action, with a labeled or radial speed dial and a label that folds on scroll.

Haptic Button

A React haptic button that feels native: spring press, touch ripple, a haptic tick, a long-press action and a hold-to-confirm mode.

Install Prompt

A React PWA install prompt: the browser's install dialog in Chrome and Edge, and an Add to Home Screen guide on iPhone and Mac.

Large Title Header

A React iOS large title header that shrinks into a compact title in a glass bar as you scroll.

Notification Banner

iOS-style React notification banners for messages, orders and reminders that drop from the top one at a time, with a queue.

Onboarding Carousel

A React onboarding carousel of first-run slides for an app or PWA: swipe or tap Next, follow the dots, Skip any time, then Get started.

Picker Wheel

A React iOS-style picker wheel whose columns spin with momentum and snap on a 3D cylinder.

Pull To Refresh

A React pull to refresh wrapper: pull a list past its top to reload it, with rubberband resistance, iOS spokes or a Material ring, haptics.

Swipe Deck

A React swipe card deck: decide on one card at a time, swipe right to accept, left to reject, optionally up for later, with undo.

Swipeable Tabs

React swipeable tabs whose pages sit side by side and follow your thumb: swipe and the indicator tracks the finger, tap and the pages slide.

Pro Commerce[16]

All components in Commerce

Listing card

A React listing card for marketplaces: swipeable photos, price, place and time, badges and a heart, in grid, list and compact layouts.

Product gallery

A React product gallery for detail pages: a swipeable photo stage that zooms under the mouse, a thumbnail rail and a full-screen viewer.

Favorite button

A React favorite button: a heart that fills with a spring pop and a burst, keeps a count, saves optimistically and rolls back on failure.

Order tracker

A React order tracker: status, arrival window, milestones, a courier route, the tracking number, shipment history and the order total.

Checkout steps

A React multi-step checkout: address and invoice, delivery with lockers, payment and a review that places the order, beside a summary.

Cart drawer

A React shopping cart drawer: a side panel on desktop, a bottom sheet on phones, with undo, free delivery progress, a promo code and totals.

Listing grid

A React listing grid for marketplace results: count, sort, view switch and filter chips over listing cards that load more as you scroll.

Pricing table

A React pricing table: plans side by side with a monthly / yearly switch whose prices roll, a featured plan and a full comparison table.

Reviews

A React reviews section for products and sellers: average, stars, a 5 to 1 filter breakdown, and sortable reviews with photos and replies.

Seller card

A React seller card for marketplaces: avatar, verified mark, stars, reply speed, a phone number to reveal, message, follow, more listings.

Quantity stepper

A React quantity stepper for carts and product pages, with stock hints, hold to repeat, rolling digits and an Add to cart morph.

Price

A React price component written the way shops print prices: a smaller currency, a struck old price with a discount chip, Negotiable, Free.

Coupon input

A React coupon code input for carts and checkouts: a link that opens it, Apply inside the box, async checks and applied codes as chips.

Category picker

A React category picker: browse a category tree with icon tiles, drill-down rows with a back button, counts and search across levels.

Filter panel

A React filter panel for faceted search: a sidebar that applies as you go on desktop, a full-height sheet with a live count on phones.

Price range

A React price range filter: a histogram of the results over a two-thumb slider, synced min and max inputs, preset chips and a live count.

Pro Marketing Sections[14]

All sections in Marketing Sections

App Download Section

A mobile app promo: a drawn phone with a mini app, store buttons, a QR code to the download page, the rating and feature bullets.

Blog Cards Section

A "From the blog" section: the latest posts as cards, a featured post with a list, dated rows or a sideways rail, with covers drawn in code.

Feature Grid

A marketing section that lists product features as icon cards, a bento with drawn visuals, illustrated cards, numbered rows or compact rows.

Feature Showcase

A section that shows a few features in depth: alternating rows, tabs that swap the visual, tall cards or a scroll tour past a pinned visual.

Hero Section

A React hero section for a landing or product page: an announcement pill, a big title, two actions, social proof and a product shot drawn in code.

Integrations Section

A marketing section of linked integration tiles: a filterable grid, an orbit around the product mark, or copy beside a tile wall.

Newsletter Section

A React newsletter signup section for marketing pages: centered, split with the latest issue, a raised card or one compact row.

Pricing Section

A compact plans section for a landing page: plans with a Monthly / Yearly switch, a highlighted plan, checklists and a button each.

Stats Section

A React stats section of big numbers with labels: plain figures, cards, hairline columns, an inverted band or a split grid, rolling up on view.

Steps Section

A How it works section: three to five numbered steps, each with an icon, a title, a line of text and a small drawn product visual.

Team Section

A React team section for an about page: portrait cards, tall portrait cards, a compact roster or a list with bios, plus a "We're hiring" tile.

Testimonials Section

Customer quotes with people, ratings and results: a grid, featured quote, marquee, carousel, wall of love or one large quote.

Timeline Section

A marketing section that tells the company story as milestones on a vertical rail, a zigzag around a center line or a horizontal scroller.

Video Section

A product video block with no video file: a drawn poster whose play button opens an animated, chaptered walkthrough.

Pro Blocks[26]

All blocks in Blocks

Onboarding Flow

A React onboarding flow for a marketplace app: welcome slides, notification and location asks, a short profile, preferences and a finish.

Login Page

A React login page with password, magic link or code sign-in, Google, Apple and Microsoft buttons, two-step codes and password recovery.

Marketplace Home Page

A React marketplace home page with a what and where search, category tiles, a promoted rail, new listings near you and an app band.

Mobile App Home

A React mobile app home screen for a marketplace: large title, search, stories, quick actions, recommended ads, feed tabs and a tab bar.

Admin Dashboard Page

A React admin dashboard page: greeting and period, four KPIs, revenue against the previous period, recent orders, alerts and team activity.

Admin Shell

A React admin shell layout with a workspace sidebar, a top bar with search and notifications, a command menu and a bottom tab bar on phones.

AI Chat Page

A React AI chat page with conversation history, a streaming thread with reasoning and tool calls, a prompt composer and plan usage.

API Keys Page

The developer settings screen for API keys: list, create with scopes and expiry, reveal the secret once, copy, roll, rename and revoke.

Automation Builder Page

A React automation builder page: rules with on and off switches and run health, a visual workflow editor, a cron inspector, tests and logs.

Checkout Page

A React checkout page from the cart to Order placed: an editable cart, four checkout steps and the order confirmation.

CRM Contact Page

A React CRM contact page: a company record with facts and actions, tabs for overview, activity, deals, files and notes, and a details panel.

CRM Pipeline Page

A React CRM pipeline page: pipeline switcher, search and filters, a deals board or list with totals, a deal sheet and a new deal dialog.

Error Pages

React error pages in one block: 404 not found, 500 server error, maintenance, offline and no permission, full page or inside an app shell.

Inbox Page

A React marketplace inbox page: chats about your listings and ads you asked about, with the listing pinned on top, offers and voice notes.

Invoice Page

A React invoice page to edit and view Romanian B2B invoices: client, series, VAT lines, totals, an A4 preview, sending and e-Factura.

KPI Dashboard

A React KPI dashboard: metric tiles with deltas, revenue against the last period, sources, funnel, top sellers, invoices and activity.

Listing Detail Page

A React listing detail page for a classifieds marketplace: photo gallery, price card, seller, map, contact actions and similar listings.

Marketplace Search Page

A React marketplace search results page: count, facets in a sidebar or phone sheet, filter chips, sort, grid or list and endless results.

Marketplace Shell

A React marketplace layout shell with a what and where search header, a category strip, a footer, bottom tabs on phones and cookie consent.

Order History Page

A React order history page for an ecommerce account: orders grouped by month with search and filters, and a full order detail beside them.

Post Listing Wizard

A React post listing wizard for marketplaces: category, details, photos, price, place, contact and a preview, with an autosaved draft.

Pricing Page

A React SaaS pricing page: plans with monthly or yearly and USD or EUR switches, a comparison table, quotes, an FAQ and a closing call.

Profile Page

A React user profile screen: cover band, avatar with presence, bio and links, follow and message, counters, tabs and an edit profile sheet.

Register Page

A React register page for a CRM sign-up: an account with password rules, company details from the CUI, an email code and a welcome step.

Settings Page

A React account settings page for a back office: profile, account, notifications, billing, security and a danger zone, with a save bar.

Users Admin Page

A React users admin page: team members and invitations with seats, roles with a permissions matrix and a save bar, and the audit log.

Pro Templates[56]

All templates in Templates

About Page

A React about page template for a SaaS: hero collage, mission, stats, a timeline, values, team, investors, press, offices and careers.

Academy Page

A React academy page template: a drawn course player, progress and streaks, learning paths, a filterable course catalog and certifications.

Accessibility Page

A React accessibility statement template: live keyboard, contrast, motion and zoom demos, WCAG 2.2 conformance and a feedback form.

Affiliate Page

A React affiliate program page template: a commission hero, an earnings calculator, tiers, partner quotes, an application form and FAQ.

Agency Page

A React agency website template: rotating hero, services, case studies, process, team, packages and a project inquiry form.

AI Product Page

A React AI product page template: a streaming assistant mockup, a capability bento, how it works, privacy, add-on pricing and an FAQ.

Appointment Booking Page

A React appointment booking template for clinics, salons and coaches: next free times, a booking widget, services, team, hours and a map.

Blog Page

A React blog page template: a featured post, category chips, live search, a grid or list of post cards, pagination and a newsletter band.

Blog Post Page

A React blog post template: byline, share actions, a drawn cover, a Markdown body with a sticky table of contents and reading progress.

Bug Bounty Page

A bug bounty program page: rewards by severity with a CVSS reward estimator, scope, rules and safe harbor, a hall of fame and a report form.

Careers Page

A React careers page template: mission, team mosaic, values, benefits, filterable open roles with a job drawer and apply form.

Changelog Page

A React changelog page template: email and RSS subscribe, releases on a sticky version rail with drawn covers and New, Improved and Fixed groups.

Community Page

A React community page template: a live chat hero, member stats, forum highlights, a map of local chapters, ambassadors and member builds.

Compare Page

A React comparison page template (Acme vs a competitor): a verdict hero, a feature table, price comparison, migration steps and FAQ.

Customer Story Page

A React case study page template: customer facts, results that count up, a story with pull quotes and a sticky company sidebar.

Customers Page

A React customer stories page template: logos, a featured case study, industry and size filters, story cards with a reader drawer.

Demo Booking Page

A React book-a-demo page template with the agenda, host and logos beside a three step booking.

Developers Page

A React developer platform page template: a code hero with language tabs, API surfaces, a live CLI terminal, endpoints, uptime and limits.

Docs Home Page

A React docs portal home template: a search palette, quick-start cards, popular guides, API code samples, SDK tiles and the changelog.

Download Page

A React app download page template: an OS-aware download hero, drawn desktop and phone apps, a platform picker with checksums, and FAQ.

Enterprise Page

A React enterprise page template: a Talk to sales form, security seals, ROI numbers, a plan comparison, a CIO quote and an FAQ.

Events Page

A React events page template: a featured webinar with countdown and sign-up, filterable upcoming events, past recordings and speakers.

Experts Page

A React expert directory template: search, filters and sort over certified consultants and agencies, profiles and proposal requests.

Feature Page

A React feature page template: a hero with a drawn mockup, how-it-works steps, use case tabs, capabilities, integrations and FAQ.

Glossary Page

A React glossary page template: A to Z teamwork terms with instant search, a sticky letter rail, topic filters and drawn In Acme examples.

Help Article Page

One support article: search, a topic sidebar, a Markdown body with steps and callouts, contents and helpful feedback.

Help Center Page

A support home: live search with grouped, highlighted results, topic chips, category cards, popular articles, contact options and status.

Home Services Page

A React home services and contractor website template: ZIP check, priced services, a quote estimator, before and after projects.

Impact Page

A sustainability and social impact report: headline numbers, emissions charts, a carbon calculator, giving, people data and commitments.

Integration Detail Page

React integration detail page template: an install button with OAuth states, setup steps, permissions, a facts sidebar and related apps.

Integrations Page

A React integrations directory template: search, a category sidebar, cards with install switches, a detail drawer and a request form.

Job Detail Page

A React job posting page template: the role, benefits, interview steps, team, a sticky apply card, an application form and similar roles.

Landing Page

A SaaS home page: hero with a drawn product shot, logos, bento features, product tour, numbers, quotes, pricing teaser, FAQ and CTA.

Launch Page

A keynote-style product launch page: giant hero with a tilted drawn app, countdown or live state, keynote, what's new, launch week and FAQ.

Legal Page

Terms, privacy, cookie and data processing pages in one template: a document switcher, a plain-English summary and numbered sections.

Manifesto Page

A company manifesto as a typeset long read: a full-screen opening, eight numbered principles with drawn art, signatures and a hiring P.S.

Portfolio Page

A React portfolio template for designers and developers: hero, case studies in a sheet, experience, priced services, writing and contact.

Press Page

A React press page template: releases, coverage, company facts and story, a brand kit with logos, colors and type, and a media contact.

Product Tour Page

An interactive product tour page where visitors click through a drawn app in six chapters.

Promo Page

A limited-time sale page: a drawn coupon hero with a countdown and copyable code, plan cards with live totals and a savings calculator.

Real Estate Page

A React real estate template: buy or rent search, listing cards, a price pin map, neighborhoods, a mortgage estimate and a valuation form.

Referral Page

A React referral program page template: drawn gift cards, a copyable invite link, email invites, reward milestones and referral status.

Research Report Page

A gated research report landing page: a drawn report cover, a download form, five key findings with charts and a benchmark explorer.

Restaurant Page

A React restaurant website template: live opening hours, a tabbed menu with dietary filters, table booking, a gallery, events and a map.

Roadmap Page

React public roadmap page template: Now, Next, Later and Shipped columns with upvotes, filters, search and a suggest a feature dialog.

ROI Calculator Page

A React ROI calculator page template: team, hourly cost, lost hours and replaced tools in; yearly savings, payback and a chart out.

Security Page

A React trust center template: drawn compliance seals, security practices, uptime, subprocessors, a report request form and disclosure.

Solutions Page

A use-case page per team with a switcher that swaps the hero, drawn app screen, before and after, steps, templates, quotes and numbers.

Startups Page

A React startup program page template: a credits pass, a live eligibility checker, savings calculator, partner perks and an apply form.

Status Page

React status page template: an overall banner, components with 90-day uptime bars, live incidents, scheduled maintenance and history.

Storefront Page

A React ecommerce store template: free shipping bar, hero, collections, a filterable product grid with quick add, a cart drawer and reviews.

Switch Page

A migration page for teams leaving other tools: an import visual, source tiles, a working 4-step import wizard, a support matrix and offers.

Template Gallery Page

A gallery of ready-made workspace templates: search hero with fanned previews, categories, sort, drawn template cards and a detail dialog.

Travel Page

A React travel agency and tour operator template: tour search, tour cards, a day by day detail sheet, destinations and a custom trip form.

Waitlist Page

React waitlist page template: a launch countdown, an email signup with social proof, your place in line with a referral link and FAQ.

Year in Review Page

A React year in review template, Wrapped style: a team's giant numbers, a chapter and chart per stat, a story player and a share poster.

Pro Hooks & Utilities[22]

All hooks and utilities in Hooks & Utilities

AI Chat

The AI kit's shared vocabulary: message, tool call and model types, token and duration formatting, live timers and a mock stream.

Chart kit

A React chart toolkit: the palette, formatters, measuring container, axes, crosshair, tooltip, legend and data table charts share.

Commerce

Price formatting and cart math for React shops and marketplaces: prices, discounts, unit prices, coupons and cart totals with VAT.

Date utils

Locale-aware date helpers for React date pickers and calendars: week start, month and weekday names, typed-date parsing, grids and presets.

File export

File export helpers for React apps: download blobs, text and JSON, turn a canvas or an SVG into a PNG, copy images and name files cleanly.

File types

File type helpers for React that tell what a file is from its name or mime type: kind, icon, tile colors, a type label and a localized size.

Filters

The filter model behind React filter builders and saved views: typed fields, AND / OR groups, evaluation, sentences and URL strings.

Form validation

Zod validation rules for React forms with one message set (English or Romanian), react-hook-form glue and a pretend request.

Haptics

Haptic feedback for the web in one call: short vibration ticks on Android and the system tick on iPhone, silent everywhere else.

Invoicing

Invoice math for React billing apps: VAT per rate the way e-Factura checks it, Romanian VAT rates, and CUI, IBAN and CNP validation.

Relative time

Hydration-safe timestamps for feeds and comments: "5 min. ago", day groups like Today / Yesterday, clocks and full dates.

Romanian locations

Romania's counties, cities and neighbourhoods with coordinates, diacritic-free search, distances and within-radius lists.

Spreadsheet

Read CSV and Excel files in the browser, match their columns to your fields, and write CSV that Excel opens with diacritics intact.

useConsent

A React cookie consent hook: which categories a visitor allowed, when and under which policy version, shared by banner, links and scripts.

useCooldown

A React cooldown timer hook for resend and retry buttons: wait N seconds before a code can be sent again, kept across reloads.

useKeyboardInset

A React hook for the mobile on-screen keyboard: how much of the screen it covers, so bars pinned to the bottom ride above it.

useMediaControls

A React hook for custom audio and video players: play, seek, volume, speed, buffering and a smooth playhead from one media element.

useOverflowItems

A React overflow menu hook (Priority+) that shows what fits in a row and moves the rest into a More menu.

usePersistedState

A React useState that survives reloads in localStorage, sessionStorage or a cookie, syncs across tabs and hydrates cleanly.

useScrollState

A React scroll position hook: offset, progress and hide-on-scroll state for the window or a container, as motion values without re-renders.

useSelection

A React selection hook for lists, tables and grids: single or multiple, Shift-click ranges, and select all with an indeterminate state.

useStickToBottom

A React hook that keeps a chat, a log or streaming output pinned to its bottom while it grows, and lets go when the reader scrolls up.

Built for client work

The Wingo UI license lets you use the components “in an unlimited number of end products, for yourself or for clients, commercial or not”, and “clients and end users of your end products do not need their own license.”

One license covers one developer. Reselling the components on their own, as a UI kit or template, is not allowed. Several developers? Wingo UI for teams has one request and one invoice.

Ready for the full library?

Get all 374 items, full MCP and CLI access for your agents and every new release. Pro starts at $8 a month, and the 75 free items stay free without an account.

See pricingBrowse the free components

Browse by category

Each category has its own page with an overview and every item in it, free and Pro.

  • Buttons & Actions7 components
  • Inputs40 components
  • Forms9 components
  • Navigation19 components
  • Overlays13 components
  • Feedback13 components
  • Data Display23 components
  • Tables & Lists11 components
  • Charts & Stats16 components
  • Layout12 components
  • Media17 components
  • AI Kit17 components
  • Text & Effects6 components
  • Mobile15 components
  • Commerce16 components
  • Marketing Sections20 sections
  • Blocks26 blocks
  • Templates58 templates
  • Hooks & Utilities36 hooks and utilities
WingoUI

Animated, configurable, mobile-first React components and blocks. Copy the source, make it yours, and let your coding agent build with it.

Product

  • Components
  • Templates
  • Pricing
  • AI agents
  • For teams
  • Theme generator

Resources

  • Docs
  • Contact
  • Programs
  • Blog
  • Changelog
  • Changelog RSS
  • llms.txt

Compare

  • Wingo UI vs paid kits
  • Wingo UI vs shadcn/ui
  • shadcn/ui alternatives
  • MUI alternatives
  • Tailwind Plus alternatives
  • Magic UI alternatives
  • Free components

Legal

  • Terms
  • Privacy
  • Refunds
  • License
  • Imprint

Component categories

  • Buttons & Actions
  • Inputs
  • Forms
  • Navigation
  • Overlays
  • Feedback
  • Data Display
  • Tables & Lists
  • Charts & Stats
  • Layout
  • Media
  • AI Kit
  • Text & Effects
  • Mobile
  • Commerce
  • Marketing Sections
  • Blocks
  • Hooks & Utilities

© 2026 Wingo UI

Wingo UI