React hooks and TypeScript utilities
Hooks & Utilities are the shared pieces the components import, published so you can use them in your own code too. The hooks cover state (useControllableState, usePersistedState and useSelection), the device (useMediaQuery with phone, touch and breakpoint variants, and useKeyboardInset), input (useShortcut, useLongPress, useClipboard and useDebounce) and scrolling (useScrollState, useScrollEdges and useStickToBottom). Media players and cookie banners have their own hooks, useMediaControls and useConsent.
All Hooks & Utilities[36]
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
The parts every chart is built from: palette, formatters, a measuring container, axes, crosshair, tooltip, legend and data table.
Commerce
Money for shops and marketplaces: prices written like a shop writes them, discounts, unit prices, coupons and cart totals with VAT.
Date utils
Locale-aware date helpers: week start, month and weekday names, typed-date parsing, day matchers, month grids and presets.
File export
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.
File types
What a file is from its name or mime type: kind, icon, tile colors, a short type label and a localized size.
Filters
The filter model of builders and saved views: typed fields, AND / OR groups, evaluation, a sentence per filter and url strings.
Form validation
Zod rules with one set of messages (English and Romanian), react-hook-form glue and a pretend request, for the forms of blocks.
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 and the ids an invoice carries: VAT per rate the way e-Factura checks it, Romanian VAT rates, CUI, IBAN with its bank, CNP.
Motion 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.
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.
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 component: a tone or any CSS color becomes five CSS variables every variant paints with.
UIProviderFree
App-wide configuration for Wingo UI: default props for every component, the Intl locale and the reduced-motion policy.
useClipboardFree
Copy text to the clipboard with a copied flag that resets itself, and a fallback for pages without the Clipboard API.
useConsent
Cookie consent as state: which categories a visitor allowed, when and under which policy version, shared by banner, links and scripts.
useControllableStateFree
A state hook that is controlled when you pass a value and keeps its own state when you do not.
useCooldown
A resend or retry timer: wait N seconds before a code can be sent again, exact after the tab sleeps and kept across reloads.
useDebounceFree
Debounced values and callbacks: search as you type without sending a request on every keystroke.
useKeyboardInset
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.
useLocaleFree
The locale numbers, dates and prices are formatted with, the same on the server and in the browser.
useLongPressFree
Press and hold on touch screens: pointer handlers that fire after a delay, cancel on scroll and swallow the click that follows.
useMediaControls
State and actions of an audio or video element for custom players: play, seek, volume, speed, buffering and a smooth playhead.
useMediaQueryFree
SSR-safe hooks for media queries, phone widths, touch screens and the current Tailwind breakpoint.
useOverflowItems
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.
usePersistedState
useState that survives reloads in localStorage, sessionStorage or a cookie, syncs across components and tabs, and hydrates cleanly.
useScrollEdgesFree
Knows which edges of a scroll container have more content, and fades them out with a mask that eases in as you scroll.
useScrollState
Scroll offset, progress and hide-on-scroll state for the window or any container, as motion values that move bars without re-renders.
useSelection
Selection state for lists and grids: single or multiple, shift-click ranges, select all with an indeterminate state.
Guides
Tutorials and guides from the blog that use these hooks and utilities.
Mobile UI in React
100vh Mobile Fix: When to Use dvh, svh or lvh in Tailwind
The 100vh mobile bug explained: why h-screen hides your bottom bar, when to use dvh, svh or lvh in Tailwind, and how to keep a bar above the keyboard.
11 min read
Building UI with AI agents
AGENTS.md vs CLAUDE.md vs Cursor Rules for React
AGENTS.md vs CLAUDE.md vs Cursor rules for React and Tailwind: which agent reads which file in October 2026, and a rules file that keeps agents on your tokens.
14 min read
Build it: screens and apps
E-Factura VAT Calculation in TypeScript and React
E-Factura VAT calculation in TypeScript: Romania's 21% and 11% rates, VAT rounded once per rate, the totals ANAF checks to the cent and a React line editor.
11 min read
Component guides
How to Update shadcn Components Without Losing Edits
Update shadcn components without losing edits: what shadcn diff and add --diff show, why a 2-way diff hides whose change is whose, and how a 3-way merge works.
10 min read
Component guides
IBAN Validation JavaScript: Mod 97, Regex and a React Field
IBAN validation JavaScript that catches typos: mod 97 in TypeScript, why a regex is not enough, a React field that formats as you type and Romanian banks.
12 min read
Mobile UI in React
Minimum Touch Target Size: WCAG, iOS, Android and Tailwind
Minimum touch target size per WCAG 2.2 (24 and 44px), iOS (44pt) and Android (48dp), and how to get 44px taps in React and Tailwind without desktop bloat.
11 min read
About Hooks & Utilities
The libraries hold the logic behind whole categories: Motion presets for springs and reduced motion, Tones for coloring any component, UIProvider for app-wide defaults and the locale, Chart kit for the charts, Date utils, Number format and Relative time for formatting, Form validation for zod rules, and Filters, File types, File export, Spreadsheet, Commerce, Invoicing and Haptics. They install on their own with any component that needs them, so you rarely add one by hand, and they are safe to render on the server. 14 of the 36 hooks and utilities are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 22 are part of Pro.