WingoUI
ComponentsTemplatesDocsChangelogBlogAI agents
ThemePricing
  1. Home
  2. Blog
  3. Component guides
Blog

React component guides: props, accessibility and pitfalls

A component looks simple until it meets real users. An OTP input has to accept a pasted code and SMS autofill. A date picker has to work with a keyboard and on a small screen. A data table has to stay fast with thousands of rows. This category takes one component at a time and goes through everything that matters before you ship it.
FeaturedComponent guides

React Form Components: Accessible Fields, Zod and Mobile

React form components that share one anatomy (label, hint, error, counter), plug into react-hook-form and zod, and behave right on a phone, with full code.

SR
Serban Rusu
Oct 9, 2026 · 21 min read

All posts

/Slash
Component guides

dnd kit Mobile: Touch Drag That Lets the Page Scroll

Fix dnd kit mobile drag: a TouchSensor long press that still lets the page scroll, touch-action per element, the iOS Safari resize cancel and a tap path.

SRSerban Rusu·Oct 9, 2026·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.

SRSerban Rusu·Oct 9, 2026·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.

SRSerban Rusu·Oct 9, 2026·12 min read
Component guides

React Command Palette: Cmd+K, Nested Pages and Mobile

Build a React command palette that binds Cmd+K on a Mac and Ctrl+K elsewhere, with nested pages, async results, recents and a full-height sheet on phones.

SRSerban Rusu·Oct 9, 2026·9 min read
Component guides

React OTP Input: Paste, SMS Autofill and a Resend Timer

How to build a React OTP input that takes paste and SMS autofill, why autocomplete one-time-code fails silently, and how to add zod checks and a resend timer.

SRSerban Rusu·Oct 9, 2026·11 min read
Component guides

Romanian CNP Validator in TypeScript, Zod and React

Build a Romanian CNP validator in TypeScript: the weighted check digit, real birth dates, the new county code 70, a zod rule, a React field and safe storage.

SRSerban Rusu·Oct 9, 2026·13 min read
Component guides

Romanian CUI Validation in TypeScript, Zod and React

Romanian CUI validation in TypeScript: the 753217532 check digit step by step, the RO prefix, a zod rule, a React field and a company lookup at ANAF.

SRSerban Rusu·Oct 9, 2026·11 min read
Component guides

TanStack Table v9 Data Table: Filters, Bulk Actions, Mobile

Build an admin data table on TanStack Table v9: tableFeatures setup, column filters, bulk actions, start and end pinning, server pagination and phone cards.

SRSerban Rusu·Oct 9, 2026·12 min read

About Component guides

Each guide explains when the component is the right choice and when another one fits better, which props you will actually change, how it behaves with a keyboard and a screen reader, what it does on a phone, and the mistakes that show up in production. The code uses the real API of the Wingo UI component it describes, written in TypeScript for React 19 and Tailwind CSS v4, so you can copy it into a Next.js project and run it.

Most guides include a live demo in the page. Many of the components are free, and every guide says plainly whether the component needs a Pro plan, so you know what you can install before you start.

More topics

  • Mobile UI in React

    How to build React interfaces that feel native on phones: bottom sheets, touch targets, safe areas and tables that turn into cards.

    10 posts

  • Building UI with AI agents

    Practical guides for building React UI with Claude Code, Cursor and Codex: MCP servers, rules files, llms.txt and component registries.

    4 posts

  • Comparisons and alternatives

    Honest, dated comparisons of React component libraries and tools, with sources, prices and a clear pick for each use case.

    3 posts

  • Next.js and Tailwind CSS

    Guides to Next.js App Router, React 19 and Tailwind CSS v4 for people who build and maintain UI components and design systems.

    3 posts

  • Build it: screens and apps

    Step by step tutorials that build real React screens and apps, from sign in and settings to admin dashboards, with every screen working on phones.

    1 post

Newsletter

Get new posts by email

New guides, tutorials and comparisons from the Wingo UI blog, sent when they are published.

No spam. Unsubscribe at any time.

WingoUI

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

ComponentsTemplatesPricingBlogTheme

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
Wingo UI