# Wingo UI

> Wingo UI is a library of animated, configurable, mobile-first React components and blocks you copy into your project, with a CLI and an MCP server for coding agents. 268 items (209 components, 23 blocks, 17 hooks, 19 helper libraries) for React 19 and Tailwind CSS v4, release 1.0.1. 59 items are free; the rest need a Pro plan.

Components are installed as source you own with the CLI (`npx wingo-ui@latest add <slug>`). Coding agents connect to the MCP server to search components, read props and design rules, and check for updates.

- MCP server (Streamable HTTP): https://wingo-ui.com/mcp (optional header "Authorization: Bearer wui_..." for Pro sources)
- Registry: https://wingo-ui.com/r/registry.json (shadcn format), https://wingo-ui.com/r/<slug>.json (item with source), https://wingo-ui.com/r/meta/<slug>.json (docs), https://wingo-ui.com/r/versions.json

## Docs

- [Installation](https://wingo-ui.com/docs/installation): set up a Next.js or Vite project, add components, stay up to date
- [MCP server](https://wingo-ui.com/docs/mcp): connect Claude Code, Codex, Gemini CLI, Grok or Cursor
- [Design rules](https://wingo-ui.com/llms-full.txt): tokens, sizes, motion, forms, overlays and mobile rules, plus every item's docs
- [Changelog](https://wingo-ui.com/changelog): releases ([RSS](https://wingo-ui.com/changelog/rss.xml), [JSON](https://wingo-ui.com/changelog/feed.json))
- [Pricing](https://wingo-ui.com/pricing)

## CLI

- `npx wingo-ui@latest init`: set up the project (utils, tokens, wingo-ui.json)
- `npx wingo-ui@latest add <slug...>`: install items with their dependencies
- `npx wingo-ui@latest login`: sign in for Pro items
- `npx wingo-ui@latest outdated` / `update`: see and apply upstream changes (3-way merge)
- `npx wingo-ui@latest agents install`: rule files and MCP config for your coding agent

## Buttons & Actions

- [Button](https://wingo-ui.com/r/meta/button.json): The button every screen starts with: five variants, six tones, three sizes plus icon sizes, and a loading state that never jumps.
- [Button Group](https://wingo-ui.com/r/meta/button-group.json): Buttons joined into one control or spaced in a row, plus a split button that pairs a main action with a menu. (Pro)
- [Copy Button](https://wingo-ui.com/r/meta/copy-button.json): Copy an IBAN, a tax ID, a link or an API key with one tap: an icon button with a tooltip, a labelled button, and CopyText for inline values. (Pro)
- [Delete Button](https://wingo-ui.com/r/meta/delete-button.json): A delete button that asks for confirmation in place, no dialog needed.
- [Theme Toggle](https://wingo-ui.com/r/meta/theme-toggle.json): Switch light, dark and system on top of next-themes: an animated sun / moon button, a segmented control or a menu, with a circular reveal. (Pro)
- [Toggle](https://wingo-ui.com/r/meta/toggle.json): A two-state button that stays pressed, for bold and italic in an editor, a favorite heart, mute, or a filter pill. (Pro)
- [Toggle Group](https://wingo-ui.com/r/meta/toggle-group.json): A row of toggles where one or several stay pressed, for text formatting, alignment, view switches and quick filters. (Pro)

## Inputs

- [Avatar Upload](https://wingo-ui.com/r/meta/avatar-upload.json): Change a profile picture like on a phone: pick or shoot a photo, crop it in a round frame and watch a ring fill while it uploads. (Pro)
- [Calendar](https://wingo-ui.com/r/meta/calendar.json): A month grid for picking one day, several days or a stay, with disabled days, event dots, several months and a quick month / year jump. (Pro)
- [Checkbox](https://wingo-ui.com/r/meta/checkbox.json): A box that is on, off or mixed with a check that draws itself, a label row that is the whole target, cards, and groups with select all.
- [Color Picker](https://wingo-ui.com/r/meta/color-picker.json): A color field with a saturation / brightness square, hue and opacity sliders, HEX / RGB / HSL inputs, swatches and an eyedropper. (Pro)
- [Combobox](https://wingo-ui.com/r/meta/combobox.json): An autocomplete field: type to filter a list or search a server, with matches in bold, a create row and free text; a search sheet on phones. (Pro)
- [Cron Picker](https://wingo-ui.com/r/meta/cron-picker.json): Build a schedule without knowing cron: frequency tabs, weekday and day chips, a time, a sentence that says it back and the next runs. (Pro)
- [Currency Input](https://wingo-ui.com/r/meta/currency-input.json): A money field formatted per locale as you type, with the symbol on the right side, an optional currency selector and quick amounts. (Pro)
- [Date Picker](https://wingo-ui.com/r/meta/date-picker.json): A date field to type in your locale or pick from a calendar popover, with presets, limits and an optional time; a sheet on phones. (Pro)
- [Date Range Picker](https://wingo-ui.com/r/meta/date-range-picker.json): A date range field for reports and bookings: two months with presets and Apply / Cancel on desktop, a bottom sheet with one month on phones. (Pro)
- [Date Time Picker](https://wingo-ui.com/r/meta/date-time-picker.json): A day and a time in one field: a calendar beside a column of free time slots, presets and a time zone label; a sheet on phones. (Pro)
- [Duration Picker](https://wingo-ui.com/r/meta/duration-picker.json): A gooey, spring-animated picker for entering a duration in hours and minutes.
- [File Upload](https://wingo-ui.com/r/meta/file-upload.json): Add files by dropping, browsing, pasting or taking a photo: validation, previews, per-file progress, and list, grid or avatar layouts. (Pro)
- [Filter Builder](https://wingo-ui.com/r/meta/filter-builder.json): Advanced filters for any list: condition chips, AND / OR, nested groups, saved views and a live count, with one bottom sheet on phones. (Pro)
- [Input](https://wingo-ui.com/r/meta/input.json): The single-line text field: icons and addons inside the box, a clear button, a loading spinner, a counter and floating labels.
- [Input Group](https://wingo-ui.com/r/meta/input-group.json): Joins a field with text addons, selects, icons and buttons into one box with one focus ring and one error state. (Pro)
- [Listbox](https://wingo-ui.com/r/meta/listbox.json): A searchable list of options for single or multiple choice, with groups, async loading, create-new and virtualized rows.
- [Masked Input](https://wingo-ui.com/r/meta/masked-input.json): A text field that formats itself as you type or paste: card number, expiry, CVC, IBAN, CNP, postal code or a custom mask. (Pro)
- [Mention Input](https://wingo-ui.com/r/meta/mention-input.json): A note field where @ mentions people, # adds tags and any trigger you define inserts chips, stored as markup that survives renames. (Pro)
- [Month Picker](https://wingo-ui.com/r/meta/month-picker.json): Pick a month or a range of months from a year grid, with quarters and presets, for reports, billing periods and card expiry dates. (Pro)
- [Multi Select](https://wingo-ui.com/r/meta/multi-select.json): Pick several options from a list, shown as chips with a measured +N overflow, with search, select all, a maximum and async options. (Pro)
- [Number Input](https://wingo-ui.com/r/meta/number-input.json): A field for numbers people type or step: steppers with hold to repeat, min, max and step, and Intl formatting for money and units. (Pro)
- [OTP Input](https://wingo-ui.com/r/meta/otp-input.json): A one-time-code input whose characters roll into place behind a caret that slides from slot to slot.
- [Password Input](https://wingo-ui.com/r/meta/password-input.json): A password field with a caret-safe reveal toggle, a Caps Lock warning and, for sign-up, a strength meter, rules checklist and generator. (Pro)
- [Phone Input](https://wingo-ui.com/r/meta/phone-input.json): A phone number field with a searchable country picker, formatting as you type, validation and one clean E.164 value out. (Pro)
- [Radio Group](https://wingo-ui.com/r/meta/radio-group.json): Pick exactly one of a few visible options: rows with a dot that springs in, or cards with icons, prices and a selection ring that slides.
- [Rating](https://wingo-ui.com/r/meta/rating.json): Rate or show a rating with stars or any icon: half values, a hover preview, a label per value and a fill that pops. (Pro)
- [Search Input](https://wingo-ui.com/r/meta/search-input.json): The search field for lists and pages: debounced search, a focus shortcut, a spinner, a results count, recent searches and suggestions. (Pro)
- [Segmented Control](https://wingo-ui.com/r/meta/segmented-control.json): The iOS segmented control: pick one of a few options on a raised thumb that slides, and on touch drags along with your finger. (Pro)
- [Select](https://wingo-ui.com/r/meta/select.json): A custom select with search, groups, icons, thousands of virtualized rows and a hidden native select for forms.
- [Signature Pad](https://wingo-ui.com/r/meta/signature-pad.json): Sign with a finger, a pen or a mouse, with ink that thins with speed like a real pen, or type your name; exports PNG or SVG. (Pro)
- [Slider](https://wingo-ui.com/r/meta/slider.json): Pick a number or a range by dragging: any number of thumbs, labelled marks, a value bubble, vertical, tones and finger-sized thumbs. (Pro)
- [Switch](https://wingo-ui.com/r/meta/switch.json): An on / off setting that applies at once: a spring thumb that stretches and drags like iOS, thumb icons, and async saves that roll back.
- [Tag Input](https://wingo-ui.com/r/meta/tag-input.json): A field that turns typed, pasted or suggested text into removable chips, for tags, keywords and email recipients. (Pro)
- [Textarea](https://wingo-ui.com/r/meta/textarea.json): Multi-line text that grows with what you write, with a counter, an optional resize handle, a toolbar slot and mod+enter to submit.
- [Time Picker](https://wingo-ui.com/r/meta/time-picker.json): A time-of-day field to type into or pick from columns, with 12 / 24 hours by locale, minute steps, limits and iOS wheels on phones. (Pro)

## Forms

- [Address Input](https://wingo-ui.com/r/meta/address-input.json): A Romanian address form: county, locality search, street, number, block and apartment, postal code checked against the county. (Pro)
- [CSV Import](https://wingo-ui.com/r/meta/csv-import.json): A four step import wizard for CSV and Excel files: upload, column mapping, row review with inline fixes, and a progress run with a report. (Pro)
- [Field](https://wingo-ui.com/r/meta/field.json): The wrapper every form control shares: label, hint, animated error and counter, fieldsets, and the one box recipe all inputs use.
- [Form Wizard](https://wingo-ui.com/r/meta/form-wizard.json): A multi-step form with a stepper, per-step sync or async validation, direction-aware slides, a summary step and a full-screen phone layout. (Pro)
- [Inline Edit](https://wingo-ui.com/r/meta/inline-edit.json): Edit a value where it is shown: text, long text, numbers and selects that turn into an editor in place and save optimistically. (Pro)
- [Invoice line items](https://wingo-ui.com/r/meta/invoice-line-items.json): The lines of an invoice, quote or order edited like a small spreadsheet, with VAT per rate computed the way e-Factura checks it. (Pro)
- [Rich Text Editor](https://wingo-ui.com/r/meta/rich-text-editor.json): A Notion-like text editor on Tiptap with a toolbar, Markdown shortcuts, mentions, images and counts; outputs HTML, JSON or Markdown. (Pro)

## Navigation

- [Back To Top](https://wingo-ui.com/r/meta/back-to-top.json): A floating button that appears on long pages, rings with your reading progress and takes you, and your focus, back to the top. (Pro)
- [Bounce Sidebar](https://wingo-ui.com/r/meta/bounce-sidebar.json): A vertical navigation list with a small dot that hops along an arc to the active item.
- [Breadcrumb](https://wingo-ui.com/r/meta/breadcrumb.json): Where you are in the hierarchy and a one-tap way up: a trail that folds its middle into “…”, sibling switchers and a back link on phones. (Pro)
- [Command Menu](https://wingo-ui.com/r/meta/command-menu.json): The ⌘K palette: search and run anything with groups, shortcuts, nested pages, async results and recents, and a full-height sheet on phones. (Pro)
- [Global Search](https://wingo-ui.com/r/meta/global-search.json): The search field of an app header: grouped results from every entity as you type, scopes, recents and suggestions, full-screen on phones. (Pro)
- [Gooey Nav](https://wingo-ui.com/r/meta/gooey-nav.json): A gooey navigation bar that pulls the selected item away from the rest of the group.
- [Hook Sidebar](https://wingo-ui.com/r/meta/hook-sidebar.json): A vertical navigation list with a dashed rail that hooks into the active item.
- [Nav Menu](https://wingo-ui.com/r/meta/nav-menu.json): A website's horizontal navigation: links and dropdown panels (lists or mega menus with a featured card) that morph through one shared panel. (Pro)
- [Nav Tabs](https://wingo-ui.com/r/meta/nav-tabs.json): Tabs that are links: the sections of a page or a record that change the URL, with the look of the tabs and the semantics of navigation. (Pro)
- [Pagination](https://wingo-ui.com/r/meta/pagination.json): Pages for tables and lists: numbers with ellipses, previous / next, page size, jump to page, a compact phone pager and load more. (Pro)
- [Proximity Sidebar](https://wingo-ui.com/r/meta/proximity-sidebar.json): A document minimap of thin dashes that swell near the pointer and pulse with the section you are reading.
- [Scroll Progress](https://wingo-ui.com/r/meta/scroll-progress.json): A scroll progress pill that tracks reading position and expands into a squircle menu of sections you can jump to.
- [Sidebar](https://wingo-ui.com/r/meta/sidebar.json): The admin sidebar: grouped links with icons, nested sections, badges, a sliding active pill, an icon rail with flyouts and a filter. (Pro)
- [Steps](https://wingo-ui.com/r/meta/steps.json): A stepper for checkouts, onboarding and KYC: circles, bars or dots, with complete, error and loading states and a compact phone header. (Pro)
- [Table Of Contents](https://wingo-ui.com/r/meta/table-of-contents.json): 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. (Pro)
- [Tabs](https://wingo-ui.com/r/meta/tabs.json): Switch between views of the same page with a sliding indicator: underline for sections, pill for filters, segmented for a compact switch.
- [Topbar](https://wingo-ui.com/r/meta/topbar.json): The app header: menu button, title or breadcrumb, a search in the middle and actions at the end, on a sticky glass bar. (Pro)
- [User Menu](https://wingo-ui.com/r/meta/user-menu.json): The signed-in person's menu: a profile header, a theme switch, account links, other accounts and sign out, as a bottom sheet on phones. (Pro)
- [Workspace Switcher](https://wingo-ui.com/r/meta/workspace-switcher.json): Switch organizations, teams or projects: logos, plan badges, search, groups, mod+1…9 shortcuts and a create row; a sheet on phones. (Pro)

## Overlays

- [Alert Dialog](https://wingo-ui.com/r/meta/alert-dialog.json): A short modal question that must be answered, with an async confirm that loads, fails inline and shakes, plus an await confirm() API. (Pro)
- [Context Menu](https://wingo-ui.com/r/meta/context-menu.json): The action menu on right-click for grids and lists, and an iOS-style action sheet on a long press on phones and touch screens. (Pro)
- [Dialog](https://wingo-ui.com/r/meta/dialog.json): The modal for focused tasks: a spring-scaled card on desktop that becomes a bottom sheet on phones, with nesting and a scrolling body.
- [Drawer](https://wingo-ui.com/r/meta/drawer.json): The library's bottom sheet on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop.
- [Dropdown Menu](https://wingo-ui.com/r/meta/dropdown-menu.json): The action menu: icons, descriptions, shortcuts, badges, checkbox and radio items, submenus, and an iOS action sheet on phones.
- [Family Drawer](https://wingo-ui.com/r/meta/family-drawer.json): A floating bottom drawer that morphs smoothly between stacked views, inspired by the Family app.
- [Hover Card](https://wingo-ui.com/r/meta/hover-card.json): A rich preview of a person, listing or link that floats in on hover or focus, and opens as a bottom sheet with a tap on touch screens. (Pro)
- [Popover](https://wingo-ui.com/r/meta/popover.json): Rich floating content anchored to a trigger, like a quick filter, form or share panel, that becomes a bottom sheet on phones.
- [Sheet](https://wingo-ui.com/r/meta/sheet.json): A panel that slides in from any edge on a spring: filters, a cart, an inspector or the phone navigation menu, swipeable to close on touch. (Pro)
- [Shortcuts Dialog](https://wingo-ui.com/r/meta/shortcuts-dialog.json): The "?" overlay every keyboard-friendly app has: all shortcuts grouped and searchable, in the notation of the device. (Pro)
- [Tooltip](https://wingo-ui.com/r/meta/tooltip.json): A short inverted label for icon buttons and cut-off values: shortcut hints, toolbar groups that skip the delay, long press on touch.
- [Tour](https://wingo-ui.com/r/meta/tour.json): A product tour that dims the page around the real UI, explains each step in a card and docks at the bottom on phones, plus hotspots. (Pro)

## Feedback

- [Alert](https://wingo-ui.com/r/meta/alert.json): An inline message about a page or a section, from a failed payment to a maintenance banner, in three variants and six tones.
- [Banner](https://wingo-ui.com/r/meta/banner.json): A full-width announcement strip for the top of an app, a page or a panel, with tones, one action and a dismissal it remembers. (Pro)
- [Cookie Consent](https://wingo-ui.com/r/meta/cookie-consent.json): GDPR cookie consent: a bottom bar or card with Accept, Reject and Settings, per-category switches, and a gate for embeds. (Pro)
- [Emoji Reaction](https://wingo-ui.com/r/meta/emoji-reaction.json): A tapback-style reaction button that opens a bar of Apple emoji and sends copies of your pick floating up out of it.
- [Empty State](https://wingo-ui.com/r/meta/empty-state.json): What a list, table, search or page shows when there is nothing to show: an icon tile, a title, a description and actions. (Pro)
- [Notification Bell](https://wingo-ui.com/r/meta/notification-bell.json): An iOS-style notification bell with an unread count badge.
- [Notification Center](https://wingo-ui.com/r/meta/notification-center.json): The app's notification inbox: a bell with the unread count and a panel with filter tabs, day groups, inline actions and swipe to dismiss. (Pro)
- [Progress](https://wingo-ui.com/r/meta/progress.json): How far something has come: a bar, a bar in steps or a ring, determinate or indeterminate, with a label, value, tones and thresholds.
- [Route Progress](https://wingo-ui.com/r/meta/route-progress.json): The thin bar at the very top of the app while a page loads, started by in-app links and by hand for any async work. (Pro)
- [Skeleton](https://wingo-ui.com/r/meta/skeleton.json): Placeholders shaped like the content on its way: a shimmering block, text lines, and presets for cards, lists, tables and profiles.
- [Spinner](https://wingo-ui.com/r/meta/spinner.json): The loading indicator for anything without a known shape: six styles, from a quiet ring to the iOS spokes, in any size, tone or speed.
- [Toast](https://wingo-ui.com/r/meta/toast.json): Toast notifications: a Toaster mounted once and a toast() you call from anywhere, stacked, swipeable and paused while you read.

## Data Display

- [Approval Flow](https://wingo-ui.com/r/meta/approval-flow.json): A request's sign-off chain: who approved, who is next and who can still reject, with comments, reminders, history and a compact summary. (Pro)
- [Avatar](https://wingo-ui.com/r/meta/avatar.json): A person or organization as a photo that falls back to colored initials, with a status dot, five sizes, any shape and a stacking group.
- [Badge](https://wingo-ui.com/r/meta/badge.json): Status chips, removable filters and animated counts in three variants and six tones, plus an anchor that pins a count or dot to any corner.
- [Calendar View](https://wingo-ui.com/r/meta/calendar-view.json): A scheduler for appointments and meetings: month, week, day and agenda views with a now line, event details and drag to reschedule. (Pro)
- [Code Block](https://wingo-ui.com/r/meta/code-block.json): A syntax-highlighted code block that builds its entire theme from a single accent color.
- [Comment Thread](https://wingo-ui.com/r/meta/comment-thread.json): Discussions on a record: comments with replies, reactions, edit and delete, @mentions and a composer that sends optimistically with retry. (Pro)
- [Contact card](https://wingo-ui.com/r/meta/contact-card.json): A person or a company at a glance: avatar, role, status, call / email / WhatsApp buttons, tags, owner and last activity, in three layouts. (Pro)
- [Countdown](https://wingo-ui.com/r/meta/countdown.json): Time left until a moment, as rolling digit blocks, inline in a sentence or in words, with a finish callback and done content. (Pro)
- [Description List](https://wingo-ui.com/r/meta/description-list.json): The key-value grid of every detail page: client details, invoice summaries and profiles, with copy buttons, skeletons and iOS rows. (Pro)
- [Diff Viewer](https://wingo-ui.com/r/meta/diff-viewer.json): Shows what changed between two texts: split or unified, word highlights, collapsed context, syntax colors and jumps between changes. (Pro)
- [File List](https://wingo-ui.com/r/meta/file-list.json): Attachments and documents as rows, preview tiles or chips, with type icons, photo thumbnails, upload progress, selection and file actions. (Pro)
- [File manager](https://wingo-ui.com/r/meta/file-manager.json): The documents of a company or a record: folders and files in a grid or a list, with a folder tree, uploads, moves, renames and bulk actions. (Pro)
- [Folder](https://wingo-ui.com/r/meta/folder-component.json): An animated folder whose cards fan out on hover and lift open on click, behind a 3D-tilted glass flap.
- [Gantt](https://wingo-ui.com/r/meta/gantt.json): A project timeline: tasks as bars you drag and resize, progress, dependency arrows, milestones, folding groups and a phone task list. (Pro)
- [JSON Viewer](https://wingo-ui.com/r/meta/json-viewer.json): A collapsible JSON tree with type colors, search that opens the matching branches, copy value or path, and virtualization for huge payloads. (Pro)
- [Kbd](https://wingo-ui.com/r/meta/kbd.json): Keyboard keys and combos in the notation of the device: ⌘K on a Mac, Ctrl+K everywhere else.
- [Log Viewer](https://wingo-ui.com/r/meta/log-viewer.json): A streaming log console for 100.000 lines: level colors, level and text or regex filters, follow the tail, ANSI colors and JSON details. (Pro)
- [Markdown](https://wingo-ui.com/r/meta/markdown.json): Markdown in the library's look: tables that scroll in their own box, highlighted code, task lists, and a streaming mode that never flickers. (Pro)
- [Presence](https://wingo-ui.com/r/meta/presence.json): Who is here right now: an avatar stack with status rings and a who-is-here list, a typing indicator, live cursors and last seen. (Pro)
- [Scheduler](https://wingo-ui.com/r/meta/scheduler.json): Book rooms, cars and people on a resource timeline: drag to book, move and stretch bookings, conflicts refused, an agenda on phones. (Pro)
- [Tag](https://wingo-ui.com/r/meta/tag.json): Interactive chips: toggling filter chips, removable tags, chips with a dot, icon, avatar or count, and groups that wrap, scroll or fold. (Pro)
- [Timeline](https://wingo-ui.com/r/meta/timeline.json): Things that happened, in order: activity feeds, audit trails, changelogs and order tracking, with icons, relative times and day groups. (Pro)
- [Tree View](https://wingo-ui.com/r/meta/tree-view.json): Folders, categories or permissions as a tree: animated expand, selection, tri-state checkboxes, filter, lazy children, drag to move. (Pro)

## Tables & Lists

- [Audit Log](https://wingo-ui.com/r/meta/audit-log.json): Who did what, when and to which record: a filterable activity log with day groups, before / after diffs and a CSV export. (Pro)
- [Data Table](https://wingo-ui.com/r/meta/data-table.json): The admin table on TanStack Table v9: search, filters, sorting, bulk actions, pinning, resizing, virtualization and cards on phones. (Pro)
- [Deal Pipeline](https://wingo-ui.com/r/meta/deal-pipeline.json): The sales pipeline: stages with weighted totals, a forecast summary, drag between stages with a lost reason, and a list view. (Pro)
- [Editable Grid](https://wingo-ui.com/r/meta/editable-grid.json): A spreadsheet-like table: typed cells edited in place, range selection, copy and paste with Excel, undo, validation, 2,000 rows at 60fps. (Pro)
- [Kanban](https://wingo-ui.com/r/meta/kanban.json): A board of columns and cards for pipelines, orders and tasks: drag with mouse, touch or keyboard, WIP limits, inline add and a phone layout. (Pro)
- [List](https://wingo-ui.com/r/meta/list.json): Rows on a page for settings, contacts, inboxes and orders: iOS grouped panels, selection, row menus, swipe actions and drag to reorder. (Pro)
- [Members table](https://wingo-ui.com/r/meta/members-table.json): The team page of a B2B app: members with a role select per row, status, activity and 2FA, pending invitations, seats and an invite dialog. (Pro)
- [Permissions Matrix](https://wingo-ui.com/r/meta/permissions-matrix.json): Who can do what: roles as columns, permissions by module as rows, with dependencies, unsaved-change dots and a per-role list on phones. (Pro)
- [Table](https://wingo-ui.com/r/meta/table.json): The library's one table look: semantic table parts plus a props API for small read-only tables that turn into cards on phones. (Pro)
- [Task List](https://wingo-ui.com/r/meta/task-list.json): A checklist that strikes out completed tasks and moves them to the bottom of the list, with each row also exported as a standalone TaskItem.
- [Virtual List](https://wingo-ui.com/r/meta/virtual-list.json): Long and endless lists at 60fps: thousands of list rows virtualized, sticky group headers, infinite loading and scroll restoration. (Pro)

## Charts & Stats

- [Animated Counter](https://wingo-ui.com/r/meta/animated-counter.json): A number that counts to its new value on a wheel of digits, like an odometer.
- [Area chart](https://wingo-ui.com/r/meta/area-chart.json): Volumes over time as filled areas: overlapping gradients, stacked bands for parts of a total, or 100% stacked shares. (Pro)
- [Bar chart](https://wingo-ui.com/r/meta/bar-chart.json): Compares categories or periods as columns or horizontal bars, grouped, stacked or 100%, with negatives below a clear zero line. (Pro)
- [Donut chart](https://wingo-ui.com/r/meta/donut-chart.json): 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. (Pro)
- [Funnel chart](https://wingo-ui.com/r/meta/funnel-chart.json): A conversion funnel: each step's count, its conversion and the drop-off between steps, as aligned bars or a tapered funnel shape. (Pro)
- [Gauge](https://wingo-ui.com/r/meta/gauge.json): One value against a scale and its zones: a speedometer arc, needle or segmented dial with a target tick and a counting value. (Pro)
- [GitHub Activity](https://wingo-ui.com/r/meta/github-activity.json): A contribution heatmap with a footer panel that expands over the grid to rank your top repositories.
- [Heatmap calendar](https://wingo-ui.com/r/meta/heatmap-calendar.json): Activity by day over weeks or a year: a grid of day cells on a one-hue scale, with month and weekday labels, a total and a legend. (Pro)
- [Leaderboard](https://wingo-ui.com/r/meta/leaderboard.json): A ranked list of people, teams or products by one metric: medals, proportional bars, rank changes, a podium and a pinned "you" row. (Pro)
- [Line chart](https://wingo-ui.com/r/meta/line-chart.json): Trends over time as smooth lines, with a crosshair readout of every series, a dashed comparison period, target lines and direct end labels. (Pro)
- [Radial bar](https://wingo-ui.com/r/meta/radial-bar.json): Several goals at once as concentric activity rings or 270° radial bars, each filling toward its own target and lapping past 100%. (Pro)
- [Sparkline](https://wingo-ui.com/r/meta/sparkline.json): A word-sized chart for table cells, list rows, KPI tiles and running text: a line, an area, bars or win / loss ticks. (Pro)
- [Stat Card](https://wingo-ui.com/r/meta/stat-card.json): The KPI tile of a dashboard: a label, a big number that counts up, a delta pill that knows good from bad, a sparkline and a goal bar. (Pro)
- [Tracker](https://wingo-ui.com/r/meta/tracker.json): A row of status blocks over time, one per day, hour or deploy: uptime pages, sync health, delivery success and habit streaks. (Pro)
- [Trend badge](https://wingo-ui.com/r/meta/trend-badge.json): The delta chip for KPIs, table cells and leaderboards: an arrow, a signed change and a color that says whether the change is good. (Pro)

## Layout

- [Accordion](https://wingo-ui.com/r/meta/accordion.json): A stack of disclosures for FAQs, settings sections and order details, with four variants, icons, descriptions and one or many open.
- [App Shell](https://wingo-ui.com/r/meta/app-shell.json): The whole admin layout in one component: a collapsible, resizable sidebar, a top bar and the page; a drawer and a tab bar on phones. (Pro)
- [Card](https://wingo-ui.com/r/meta/card.json): The surface listings, stats, settings and plans sit on: media, header, body and footer parts, four variants and a lift-and-press mode.
- [Collapsible](https://wingo-ui.com/r/meta/collapsible.json): One section that opens and closes with a spring height animation, plus CollapsibleText, the show more clamp for long descriptions. (Pro)
- [Detail Layout](https://wingo-ui.com/r/meta/detail-layout.json): The page grid of a record (a client, a contact, an invoice): header, a main column of sections and a side panel, plus the section card. (Pro)
- [Entity Header](https://wingo-ui.com/r/meta/entity-header.json): The top of a record page (a client, a contact, a deal, an invoice): name, status, key facts, actions, favorite, follow and record pager. (Pro)
- [Page Header](https://wingo-ui.com/r/meta/page-header.json): The top of an admin page: breadcrumb, title with avatar and badges, description, meta, actions that fold into a menu, and tabs. (Pro)
- [Scroll Area](https://wingo-ui.com/r/meta/scroll-area.json): A scroll container with slim custom scrollbars, edge fades that ease out at the ends, snap scrolling and prev / next buttons for rails. (Pro)
- [Separator](https://wingo-ui.com/r/meta/separator.json): A thin divider between groups of content, horizontal or vertical, solid, dashed or dotted, with an optional label or icon in the line.
- [Settings Layout](https://wingo-ui.com/r/meta/settings-layout.json): A settings area like macOS and iOS: a section nav, grouped label and control rows, and a save bar that slides up when something changes. (Pro)
- [Split View](https://wingo-ui.com/r/meta/split-view.json): A list and its detail side by side on wide screens and a push / pop stack with swipe back on phones, as in CRMs and mail apps. (Pro)
- [Toolbar](https://wingo-ui.com/r/meta/toolbar.json): The bar above a list or table: search, filter chips, applied filters, sort, a list / grid switch, the count, actions and a bulk mode. (Pro)

## Media

- [Audio Player](https://wingo-ui.com/r/meta/audio-player.json): An audio player with a waveform you can see and scrub: a podcast card, a chat voice message or a thin call-log bar. (Pro)
- [Carousel](https://wingo-ui.com/r/meta/carousel.json): Swipeable rows of slides on embla: photos, listing cards, testimonials and onboarding, with peek, arrows, dots, thumbnails and autoplay. (Pro)
- [Image Cropper](https://wingo-ui.com/r/meta/image-cropper.json): Crop a photo before upload: aspect presets, pinch or wheel zoom, fine and 90° rotation, a thirds grid and a sized JPEG, PNG or WebP export. (Pro)
- [Image Lightbox](https://wingo-ui.com/r/meta/image-lightbox.json): A full-screen photo viewer that zooms out of its thumbnail: swipe between images, pinch and double-tap to zoom, swipe down to close. (Pro)
- [Location Map](https://wingo-ui.com/r/meta/location-map.json): A real map to pick or show a place: a pin you drag or drop, an optional radius with a towns count, offline search and a static fallback. (Pro)
- [QR Code](https://wingo-ui.com/r/meta/qr-code.json): A designed QR code: rounded or dotted modules, soft eyes, a center logo, any colors, a caption and one-tap PNG, SVG or image copy. (Pro)
- [Step Player](https://wingo-ui.com/r/meta/step-player.json): An iOS-style stepped progress track with a play, pause and replay button, whose active step fills as it plays.
- [Video Player](https://wingo-ui.com/r/meta/video-player.json): A video player with controls that hide while you watch, a chapter scrubber, captions, speed, picture in picture and full screen. (Pro)

## AI Kit

- [Agent Status Card](https://wingo-ui.com/r/meta/agent-status-card.json): An AI agent at work at a glance: orb, name, status, current step, progress, elapsed time, steps, logs and the controls that matter now. (Pro)
- [Chat Message](https://wingo-ui.com/r/meta/chat-message.json): One message of an AI conversation: the question in a bubble, the answer with its thinking, tools, markdown, sources and actions. (Pro)
- [Chat Thread](https://wingo-ui.com/r/meta/chat-thread.json): The scrolling conversation of an AI chat: pinned to the newest message while it streams, with day pills, follow-ups and a pinned composer. (Pro)
- [Conversation List](https://wingo-ui.com/r/meta/conversation-list.json): The chat history of an AI app: New chat, search, pinned chats and Today / Yesterday / older groups, with rename, pin, archive and delete. (Pro)
- [Fluid Orb](https://wingo-ui.com/r/meta/fluid-orb.json): An animated WebGL orb with drifting fluid shading, inspired by ChatGPT's voice mode.
- [Grid Reveal](https://wingo-ui.com/r/meta/grid-reveal.json): A loading state for AI images that turns into the real picture when it arrives.
- [Matrix Orb](https://wingo-ui.com/r/meta/matrix-orb.json): A dot-matrix orb that animates through idle, listening and thinking states.
- [Model Picker](https://wingo-ui.com/r/meta/model-picker.json): A model switcher for AI chats: a quiet trigger that opens grouped rich rows with capabilities, speed, cost and context. (Pro)
- [Prompt Input](https://wingo-ui.com/r/meta/prompt-input.json): The AI chat composer: a growing text box with attachments, tool chips, a model picker, dictation and one round send / stop button. (Pro)
- [Reasoning Indicator](https://wingo-ui.com/r/meta/reasoning-indicator.json): The model's thinking, kept out of the way: a shimmering live timer while it thinks, then a quiet "Thought for 12 s" to expand. (Pro)
- [Rule Builder](https://wingo-ui.com/r/meta/rule-builder.json): An if-this-then-that editor for automations: a trigger, conditions and ordered actions as sentence cards, read back as one sentence. (Pro)
- [Suggestion Chips](https://wingo-ui.com/r/meta/suggestion-chips.json): Prompt suggestions people tap instead of typing: pills under a composer, cards on a welcome screen, or follow-up rows under an answer. (Pro)
- [Tool Call Timeline](https://wingo-ui.com/r/meta/tool-call-timeline.json): What an AI agent did, step by step: each tool call with its status, time, input and output, plus approval and retry. (Pro)
- [Usage Meter](https://wingo-ui.com/r/meta/usage-meter.json): How much of a plan is used: tokens, messages, images, credits or money against their limits, with resets, warnings and an upgrade offer. (Pro)
- [Voice Input](https://wingo-ui.com/r/meta/voice-input.json): Talk instead of typing: a mic that grows into a recording pill with a live waveform and transcript, a full-width bar, or a voice orb. (Pro)
- [Workflow Canvas](https://wingo-ui.com/r/meta/workflow-canvas.json): A node editor for automations: a trigger, actions, AI steps and yes / no branches you connect, insert into, tidy up and watch run. (Pro)

## Text & Effects

- [Gravity Letters](https://wingo-ui.com/r/meta/gravity-letters.json): A playful gravity field where letters, numbers, emoji, or any components you pass fall and pile up like real objects.

## Mobile

- [Action Sheet](https://wingo-ui.com/r/meta/action-sheet.json): The iOS action sheet: a short list of actions about one thing, with a title, red destructive rows and a separate Cancel, plus await show(). (Pro)
- [Bottom Tab Bar](https://wingo-ui.com/r/meta/bottom-tab-bar.json): The phone's primary navigation: 3 to 5 tabs at the thumb with an animated pill, badges, a raised center action and hide on scroll. (Pro)
- [FAB](https://wingo-ui.com/r/meta/fab.json): The floating action button for a phone screen's main action, with a labelled or radial speed dial and a label that folds while you scroll. (Pro)
- [Haptic Button](https://wingo-ui.com/r/meta/haptic-button.json): A button that answers like a native control: spring press, touch ripple, a haptic tick, a long-press action and a hold-to-confirm mode. (Pro)
- [Hero Header](https://wingo-ui.com/r/meta/hero-header.json): The photo header of a phone detail page: a full-bleed image under the status bar with round glass buttons, parallax and a handover to a bar. (Pro)
- [Install Prompt](https://wingo-ui.com/r/meta/install-prompt.json): Invites people to install the web app: the browser's install dialog in Chrome and Edge, an Add to Home Screen guide on iPhone and Mac. (Pro)
- [Large Title Header](https://wingo-ui.com/r/meta/large-title-header.json): An iOS large title that scrolls with the page and hands over to a compact title in a glass bar, with back, actions and search. (Pro)
- [Notification Banner](https://wingo-ui.com/r/meta/notification-banner.json): iOS-style banners for incoming messages, orders and reminders that drop from the top, one at a time, with a queue and an expanded view. (Pro)
- [Onboarding Carousel](https://wingo-ui.com/r/meta/onboarding-carousel.json): First-run slides for an app or a PWA: swipe or tap Next, watch the dots, Skip any time, Get started on the last slide. (Pro)
- [Picker Wheel](https://wingo-ui.com/r/meta/picker-wheel.json): The iOS wheel picker for the web: columns that spin with native momentum and click into place on a 3D cylinder, inline or as a field. (Pro)
- [Pull To Refresh](https://wingo-ui.com/r/meta/pull-to-refresh.json): Pull a list down past its top to reload it, with rubberband resistance, an arrow, iOS spokes or a Material ring, and a haptic tick. (Pro)
- [Slide To Confirm](https://wingo-ui.com/r/meta/slide-to-confirm.json): A track whose thumb you slide to the end to confirm an irreversible action, like a payment or a delivery, with loading and success states. (Pro)
- [Sticky CTA Bar](https://wingo-ui.com/r/meta/sticky-cta-bar.json): The bottom action bar of product, listing and checkout pages on phones: the price on one side, the main action on the other. (Pro)
- [Swipe Deck](https://wingo-ui.com/r/meta/swipe-deck.json): A stack of cards you decide on one at a time: swipe right to accept, left to reject, optionally up for later, with undo. (Pro)
- [Swipeable Tabs](https://wingo-ui.com/r/meta/swipeable-tabs.json): Tabs whose pages sit side by side and follow your thumb: swipe and the indicator tracks the finger, tap a tab and the pages slide. (Pro)

## Commerce

- [Cart drawer](https://wingo-ui.com/r/meta/cart-drawer.json): The shop cart: a side panel on desktop and a bottom sheet on phones, with lines, undo, free delivery progress, a promo code and the totals. (Pro)
- [Category picker](https://wingo-ui.com/r/meta/category-picker.json): Browse and pick a category from a tree: icon tiles, drill-down rows with a back button, counts, search across levels and a field. (Pro)
- [Checkout steps](https://wingo-ui.com/r/meta/checkout-steps.json): A four step checkout: address and invoice, delivery with lockers, payment, then a review that places the order, beside a sticky summary. (Pro)
- [Coupon input](https://wingo-ui.com/r/meta/coupon-input.json): The promo code field of carts and checkouts: a link that opens it, Apply inside the box, async checks and applied codes as chips. (Pro)
- [Favorite button](https://wingo-ui.com/r/meta/favorite-button.json): The heart that saves a listing: fills with a spring pop and a burst, keeps a count, saves optimistically and rolls back on failure. (Pro)
- [Filter panel](https://wingo-ui.com/r/meta/filter-panel.json): Faceted marketplace filters: a sidebar that applies as you go on wide screens, a full-height sheet with a live result count on phones. (Pro)
- [Listing card](https://wingo-ui.com/r/meta/listing-card.json): The ad card of a marketplace: swipeable photos, the price, place and time, badges and a heart, in grid, list and compact layouts. (Pro)
- [Listing grid](https://wingo-ui.com/r/meta/listing-grid.json): The body of a results page: count, sort, view switch and filter chips over a listing grid that loads more as you scroll. (Pro)
- [Order tracker](https://wingo-ui.com/r/meta/order-tracker.json): Where an order is: number, status, arrival window, milestones, a route with the courier, the tracking number, the shipment history and the total. (Pro)
- [Price](https://wingo-ui.com/r/meta/price.json): A price written the way a shop writes it: a smaller currency, a struck old price with its discount chip, Negotiable, Free and Swap. (Pro)
- [Price range](https://wingo-ui.com/r/meta/price-range.json): The price filter: a histogram of the results over a two thumb slider, min and max inputs that stay in sync, preset chips and a live count. (Pro)
- [Pricing table](https://wingo-ui.com/r/meta/pricing-table.json): Plans side by side with a Monthly / Yearly switch whose prices roll, a featured plan, feature lists and a full comparison table. (Pro)
- [Product gallery](https://wingo-ui.com/r/meta/product-gallery.json): The photo gallery of a detail page: a swipeable stage that zooms under the mouse, thumbnails and a full-screen viewer. (Pro)
- [Quantity stepper](https://wingo-ui.com/r/meta/quantity-stepper.json): The minus, value, plus control of carts and product pages, with stock hints, hold to repeat, rolling digits and an Add to cart morph. (Pro)
- [Reviews](https://wingo-ui.com/r/meta/reviews.json): Product and seller reviews: the average, stars and a 5 to 1 breakdown that filters, then sortable reviews with photos, replies and votes. (Pro)
- [Seller card](https://wingo-ui.com/r/meta/seller-card.json): Who you are buying from: avatar, verified mark, stars, reply speed, a phone number you reveal, message, follow and more listings. (Pro)

## Blocks

- [Admin Dashboard Page](https://wingo-ui.com/r/meta/admin-dashboard-page.json): The home of a back office: greeting and period, four KPIs, revenue against the previous period, recent orders, alerts and team activity. (Pro)
- [Admin Shell](https://wingo-ui.com/r/meta/admin-shell.json): The back office layout of Summit CRM: a sidebar with workspaces, a top bar with search and notifications, a command menu and phone tabs. (Pro)
- [AI Chat Page](https://wingo-ui.com/r/meta/ai-chat-page.json): A full AI assistant screen: the conversation history, a streaming thread with reasoning and tools, a composer and the plan's usage. (Pro)
- [Automation Builder Page](https://wingo-ui.com/r/meta/automation-builder-page.json): The CRM automations screen: rules with on / off switches and run health, a visual workflow editor with a cron inspector, tests and run logs. (Pro)
- [Checkout Page](https://wingo-ui.com/r/meta/checkout-page.json): The Summit Market shop from the cart to Order placed: an editable cart, four checkout steps and the order confirmation. (Pro)
- [CRM Contact Page](https://wingo-ui.com/r/meta/crm-contact-page.json): A CRM company record page: header with facts and actions, tabs for overview, activity, deals, files and notes, and a details side panel. (Pro)
- [CRM Pipeline Page](https://wingo-ui.com/r/meta/crm-pipeline-page.json): A CRM deals pipeline page: pipeline switcher, search and filters, a board or list with totals, a deal sheet and a new deal dialog. (Pro)
- [Error Pages](https://wingo-ui.com/r/meta/error-pages.json): Five error screens in one block: not found, server error, scheduled maintenance, offline and no permission, full page or inside a shell. (Pro)
- [Inbox Page](https://wingo-ui.com/r/meta/inbox-page.json): Northwind Market messages: conversations about your listings and the ones you asked about, with the listing pinned on top, offers, photos, voice notes. (Pro)
- [Invoice Page](https://wingo-ui.com/r/meta/invoice-page.json): An invoice editor and viewer for Romanian B2B: client, series, dates, VAT lines, totals, an A4 preview, sending and e-Factura status. (Pro)
- [KPI Dashboard](https://wingo-ui.com/r/meta/kpi-dashboard.json): The first screen of a back office: KPI tiles with deltas, revenue against the last period, sources, funnel, top sellers, invoices, activity. (Pro)
- [Listing Detail Page](https://wingo-ui.com/r/meta/listing-detail-page.json): A listing on Northwind Market: photos, price, details, description, an approximate map, the seller, safety tips, contact actions and similar listings. (Pro)
- [Login Page](https://wingo-ui.com/r/meta/login-page.json): The sign-in screen of Northwind CRM: password, email link or code, Google / Apple / Microsoft, two-step codes and the whole password recovery. (Pro)
- [Marketplace Home Page](https://wingo-ui.com/r/meta/marketplace-home-page.json): The Northwind Market home: a search for what and where, category tiles, a promoted rail, new listings near you, trust points and an app band. (Pro)
- [Marketplace Search Page](https://wingo-ui.com/r/meta/marketplace-search-page.json): The Northwind Market results page: title and count, facets in a sidebar or phone sheet, filter chips, sort, grid or list and endless results. (Pro)
- [Marketplace Shell](https://wingo-ui.com/r/meta/marketplace-shell.json): The Northwind Market site layout: a header with one search for what and where, a category strip, the footer, phone tabs and cookie consent. (Pro)
- [Mobile App Home](https://wingo-ui.com/r/meta/mobile-app-home.json): The home screen of a marketplace phone app: large title, search, story circles, quick actions, recommended ads, feed tabs and a tab bar. (Pro)
- [Onboarding Flow](https://wingo-ui.com/r/meta/onboarding-flow.json): A marketplace app's first run: welcome slides, a calm ask for notifications and location, a short profile, preferences and a finish. (Pro)
- [Post Listing Wizard](https://wingo-ui.com/r/meta/post-listing-wizard.json): Posting an ad on a marketplace in seven steps: category, details, photos, price, place, contact and a preview, with an autosaved draft. (Pro)
- [Pricing Page](https://wingo-ui.com/r/meta/pricing-page.json): The pricing page of a SaaS: hero, plans with a monthly or yearly and dollar or euro switch, comparison, quotes, FAQ and a closing call. (Pro)
- [Register Page](https://wingo-ui.com/r/meta/register-page.json): The sign-up screen of a CRM: account with password rules, company details from the CUI, email code and a welcome step. (Pro)
- [Settings Page](https://wingo-ui.com/r/meta/settings-page.json): The account settings of a back office: profile, account, notifications, billing, security and a danger zone, with a save bar. (Pro)
- [Users Admin Page](https://wingo-ui.com/r/meta/users-admin-page.json): The team page of a back office: members and invitations with seats, roles with a permissions matrix and a save bar, and the audit log. (Pro)

## Hooks & Utilities

- [AI Chat](https://wingo-ui.com/r/meta/ai-chat.json): The AI kit's shared vocabulary: message, tool call and model types, token and duration formatting, live timers and a mock stream. (Pro)
- [Chart kit](https://wingo-ui.com/r/meta/chart-kit.json): The parts every chart is built from: palette, formatters, a measuring container, axes, crosshair, tooltip, legend and data table. (Pro)
- [Commerce](https://wingo-ui.com/r/meta/commerce.json): Money for shops and marketplaces: prices written like a shop writes them, discounts, unit prices, coupons and cart totals with VAT. (Pro)
- [Date utils](https://wingo-ui.com/r/meta/date-utils.json): Locale-aware date helpers: week start, month and weekday names, typed-date parsing, day matchers, month grids and presets. (Pro)
- [File export](https://wingo-ui.com/r/meta/file-export.json): Files out of the browser: download blobs, text and JSON, turn a canvas or an SVG into a PNG, copy an image and name files consistently. (Pro)
- [File types](https://wingo-ui.com/r/meta/file-types.json): What a file is from its name or mime type: kind, icon, tile colors, a short type label and a localized size. (Pro)
- [Filters](https://wingo-ui.com/r/meta/filters.json): The filter model of builders and saved views: typed fields, AND / OR groups, evaluation, a sentence per filter and url strings. (Pro)
- [Form validation](https://wingo-ui.com/r/meta/form-validation.json): Zod rules with one set of messages (English and Romanian), react-hook-form glue and a pretend request, for the forms of blocks. (Pro)
- [Haptics](https://wingo-ui.com/r/meta/haptics.json): Haptic feedback for the web in one call: short vibration ticks on Android and the system tick on iPhone, silent everywhere else. (Pro)
- [Invoicing](https://wingo-ui.com/r/meta/invoicing.json): Invoice math and the ids an invoice carries: VAT per rate the way e-Factura checks it, Romanian VAT rates, CUI, IBAN with its bank, CNP. (Pro)
- [Motion presets](https://wingo-ui.com/r/meta/motion.json): The shared springs, enter and exit presets, stagger helpers and reduced-motion hooks every animated component uses.
- [Navigation](https://wingo-ui.com/r/meta/navigation.json): Router-agnostic links, active-route matching, one NavItem shape and the app shell context that every nav component shares. (Pro)
- [Number format](https://wingo-ui.com/r/meta/number-format.json): Locale-aware number helpers: cached Intl formatting, parsing what people type, step math and currency affixes.
- [Relative time](https://wingo-ui.com/r/meta/relative-time.json): Hydration-safe timestamps for feeds and comments: "5 min. ago", day groups like Today / Yesterday, clocks and full dates. (Pro)
- [Romanian locations](https://wingo-ui.com/r/meta/ro-locations.json): Romania's counties, cities and neighbourhoods with coordinates, diacritic-free search, distances and within-radius lists. (Pro)
- [Spreadsheet](https://wingo-ui.com/r/meta/spreadsheet.json): Read CSV and Excel files in the browser, match their columns to your fields, and write CSV that Excel opens with diacritics intact. (Pro)
- [Text match](https://wingo-ui.com/r/meta/text-match.json): Search that ignores case and diacritics, ranks the best matches first and returns the ranges to highlight.
- [Tones](https://wingo-ui.com/r/meta/tones.json): One way to color a component: a tone or any CSS color becomes five CSS variables every variant paints with.
- [UIProvider](https://wingo-ui.com/r/meta/ui-config.json): App-wide configuration for UI Lab: default props for every component, the Intl locale and the reduced-motion policy.
- [useClipboard](https://wingo-ui.com/r/meta/use-clipboard.json): Copy text to the clipboard with a copied flag that resets itself, and a fallback for pages without the Clipboard API. (Pro)
- [useConsent](https://wingo-ui.com/r/meta/use-consent.json): Cookie consent as state: which categories a visitor allowed, when and under which policy version, shared by banner, links and scripts. (Pro)
- [useControllableState](https://wingo-ui.com/r/meta/use-controllable-state.json): A state hook that is controlled when you pass a value and keeps its own state when you do not.
- [useCooldown](https://wingo-ui.com/r/meta/use-cooldown.json): A resend or retry timer: wait N seconds before a code can be sent again, exact after the tab sleeps and kept across reloads. (Pro)
- [useDebounce](https://wingo-ui.com/r/meta/use-debounce.json): Debounced values and callbacks: search as you type without sending a request on every keystroke.
- [useKeyboardInset](https://wingo-ui.com/r/meta/use-keyboard-inset.json): How much of the screen the phone's on-screen keyboard covers, as a motion value, so bars pinned to the bottom can ride above it. (Pro)
- [useLocale](https://wingo-ui.com/r/meta/use-locale.json): The locale numbers, dates and prices are formatted with, the same on the server and in the browser.
- [useLongPress](https://wingo-ui.com/r/meta/use-long-press.json): Press and hold on touch screens: pointer handlers that fire after a delay, cancel on scroll and swallow the click that follows.
- [useMediaControls](https://wingo-ui.com/r/meta/use-media-controls.json): State and actions of an audio or video element for custom players: play, seek, volume, speed, buffering and a smooth playhead. (Pro)
- [useMediaQuery](https://wingo-ui.com/r/meta/use-media-query.json): SSR-safe hooks for media queries, phone widths, touch screens and the current Tailwind breakpoint.
- [useOverflowItems](https://wingo-ui.com/r/meta/use-overflow-items.json): Priority+ overflow for a row of items: shows as many as fit and moves the rest into a More menu, measured live as the row resizes. (Pro)
- [usePersistedState](https://wingo-ui.com/r/meta/use-persisted-state.json): useState that survives reloads in localStorage, sessionStorage or a cookie, syncs across components and tabs, and hydrates cleanly. (Pro)
- [useScrollEdges](https://wingo-ui.com/r/meta/use-scroll-edges.json): Knows which edges of a scroll container have more content, and fades them out with a mask that eases in as you scroll.
- [useScrollState](https://wingo-ui.com/r/meta/use-scroll-state.json): Scroll offset, progress and hide-on-scroll state for the window or any container, as motion values that move bars without re-renders. (Pro)
- [useSelection](https://wingo-ui.com/r/meta/use-selection.json): Selection state for lists and grids: single or multiple, shift-click ranges, select all with an indeterminate state. (Pro)
- [useShortcut](https://wingo-ui.com/r/meta/use-shortcut.json): Keyboard shortcuts in mod+k notation: bind them, match events and show them as ⌘K on a Mac or Ctrl+K elsewhere.
- [useStickToBottom](https://wingo-ui.com/r/meta/use-stick-to-bottom.json): Keeps a chat, a log or streaming output pinned to its bottom while it grows, and lets go the moment the reader scrolls up. (Pro)