Free React components for Tailwind CSS
75 of the 374 Wingo UI items are free for personal and commercial projects: animated showcase components, essentials like button, input, dialog, tabs and toast, a few page sections and templates, and the hooks they build on. Each one is a single file for React 19 and Tailwind CSS v4 with a live, configurable preview, and you add it with the CLI or shadcn without an account.
Free Inputs[11]
All components in InputsSwitchFree
A React toggle switch for settings that apply at once: a spring thumb that stretches and drags, thumb icons, and async saves that roll back.
Segmented ControlFree
A React iOS-style segmented control with a raised thumb that slides and follows your finger.
CheckboxFree
A React checkbox that is on, off or mixed, with a check that draws itself, full-row labels, cards, and groups with select all.
InputFree
A React text input: icons and addons inside the box, a clear button, a loading spinner, a character counter and floating labels.
ListboxFree
A React listbox: a searchable list of options for single or multiple choice, with groups, async loading, create-new and virtualized rows.
Radio GroupFree
A React radio group to pick one of a few visible options: rows with a dot that springs in, or cards with icons, prices and a sliding ring.
Search InputFree
A React search input with debounced search, a focus shortcut, a spinner, a results count, recent searches and suggestions.
SelectFree
A React select with search, groups, icons, virtualized rows and a hidden native select for forms.
TextareaFree
An auto-growing React textarea with a character counter, an optional resize handle, a toolbar slot and mod+enter to submit.
Free Forms[1]
All components in FormsFree Overlays[7]
All components in OverlaysTooltipFree
A React tooltip for icon buttons and cut-off text: shortcut hints, toolbar groups that skip the delay and a long press on touch.
Dropdown MenuFree
A React dropdown menu: icons, descriptions, shortcuts, badges, checkbox and radio items, submenus, and an action sheet on phones.
DialogFree
A React modal dialog for focused tasks: a spring-scaled card on desktop and a bottom sheet on phones, with nesting and scrolling.
DrawerFree
A React drawer and bottom sheet built on vaul: drag to dismiss, snap points, nesting, and a side panel or dialog on desktop.
Family DrawerBetaFree
A React bottom drawer that floats above the page and morphs its height between stacked views, inspired by the Family app.
Free Feedback[8]
All components in FeedbackEmoji ReactionFree
A React emoji reaction button in the chat tapback style: it opens a bar of Apple emoji and sends copies of your pick floating up.
AlertFree
A React alert for inline messages about a page or section, from a failed payment to a maintenance banner, in three variants and six tones.
ToastFree
React toast notifications: mount one Toaster and call toast() from anywhere, with stacking, swipe to dismiss and a pause while you read.
ProgressFree
A React progress bar, stepped bar or ring for uploads and quotas, determinate or indeterminate, with a label, value, tones and thresholds.
Empty StateFree
A React empty state for lists, tables, searches and pages with nothing to show yet: an icon tile, a title, a description and actions.
Notification BellFree
A React notification bell with an iOS-style unread badge that rolls its digits on new alerts.
Free Data Display[5]
All components in Data DisplayBadgeFree
A React badge for status chips, removable filters and animated counts in three variants and six tones, plus a count or dot on any corner.
AvatarFree
A React avatar: a photo that falls back to colored initials, with a status dot, five sizes, any shape and a stacked avatar group.
Code BlockFree
A React code block with syntax highlighting, line numbers, highlighted lines and a copy button, themed from a single accent color.
Free Tables & Lists[1]
All components in Tables & ListsFree Charts & Stats[2]
All components in Charts & StatsFree Layout[3]
All components in LayoutFree Media[1]
All components in MediaFree AI Kit[3]
All components in AI KitFree Text & Effects[1]
All components in Text & EffectsFree Marketing Sections[6]
All sections in Marketing SectionsCTA SectionFree
A React CTA section that closes a landing page: a title, two actions or an email signup, social proof and a short checklist on a band.
FAQ SectionFree
A React FAQ section for marketing pages: an accordion, a split layout, an open grid or expandable cards, with topics and live search.
Logo CloudFree
A React logo cloud of customer wordmarks under a quiet line, as a wrapping grid, an endless marquee with faded edges or a split grid.
Marketing FooterFree
The bottom of a SaaS website: brand and tagline, link columns, a newsletter signup, a status dot, legal links and social icons.
Free Templates[2]
All templates in TemplatesFree Hooks & Utilities[14]
All hooks and utilities in Hooks & UtilitiesMotion presetsFree
The shared springs, enter and exit presets, stagger helpers and reduced-motion hooks every animated component uses.
NavigationFree
Router-agnostic links, active-route matching, one NavItem shape and the app shell context that every nav component shares.
Number formatFree
Locale-aware number helpers: cached Intl formatting, parsing what people type, step math and currency affixes.
Text matchFree
Search that ignores case and diacritics, ranks the best matches first and returns the ranges to highlight.
TonesFree
One way to color a React component: a tone or any CSS color becomes five CSS variables every variant paints with.
UIProviderFree
A React config provider for Wingo UI: app-wide default props for every component, the Intl locale and a reduced-motion policy.
useClipboardFree
A React copy-to-clipboard hook with a copied flag that resets itself, and a fallback for pages without the Clipboard API.
useControllableStateFree
A React hook for controlled and uncontrolled state: it follows a value prop when you pass one and keeps its own state when you do not.
useDebounceFree
React debounce hooks for values and callbacks: search as you type without sending a request on every keystroke.
useLocaleFree
A React hook for the locale numbers, dates and prices are formatted with, the same on the server and in the browser.
useLongPressFree
A React long press hook for touch screens: handlers that fire after a hold, cancel on scroll and swallow the click that follows.
useMediaQueryFree
A React useMediaQuery hook that is SSR-safe, plus hooks for phone widths, touch screens and the current Tailwind breakpoint.
How the free tier works
Free items install without an account: run npx wingo-ui@latest add button or point shadcn at the item's registry URL, and the file lands in your project as source you own. The CLI also pulls in the hooks and helpers an item needs.
The MCP server for AI agents needs a free account key. Every free item may be used in personal and client projects under the Wingo UI license, and the installation guide covers the setup.
Need the rest?
Pro unlocks all 374 items, including data tables, charts, kanban boards, editors, dashboards and full page templates, plus every new release. It starts at $8 a month, and every Pro component can be opened and tried live before you buy.