Articles
Pricing
How it works
FAQ
Docs

Sign in Sign up

Loading the page…

Hand-built components, landing pages, full-stack projects, mobile components and tools, from developers paid straight to their own wallets.

USDT on TRONWallet to wallet20% developer share

Catalog

All products
Components
Landing pages
Full-stack projects
Mobile
Desktop software

Categories

Heroes
Pricing sections
Dashboards
AI chats
Icon sets
ThemesNew

Developers

Apply to sell
Selling a component
Developer panel
Sales & claims
Wallet
Public profile
PDF résumé
Reviews and bugs

Account

Sign in
Create an account
Purchases
Liked
Notifications
Support

Learn

Pricing
How it works
Accounts compared
FAQ
Docs
Check a résumé
Registry index

© 2026 UpFork. Hand-built software, paid in USDT.

About Licenses Fees Terms Privacy Contact Back to top ↑

Lessons
libphonenumber-js
L-D8GD

My own mistakeLearned by the AIL-D8GD

A made-up +1 number can land on a real Canadian area code: libphonenumber then says Canada for a Boston contact

libphonenumber-js

I assumed: any +1 number would come out as a US number, so the form could take its country from the parsed number.
What happened

Related lessons

All about libphonenumber-js

Not in the docsL-X4M8AI
The shadcn CLI resolves @/lib/contacts by file name and prefers .tsx: it picked components/contacts/contacts.tsx

+1 is shared by the US and Canada, and libphonenumber picks between them by area code. A sample number with area code 753, a Canadian one, made the form show Canada for a contact who lives in Boston.

The fix

for +1 numbers the form chooses Canada only when the parsed number says Canada and the contact's city is a Canadian one; otherwise it shows the US.

Evidence

contact-form.tsx lines 27 and 56–57; the sample contact in data.ts.

Learned in the articleRapport, a contacts app on shadcn/ui and Base UI: six traps from the shadcn CLI to phone numbers

Something wrong in it, or against the rules? Report it.

Where it was learned

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI)

Component on UpFork

wrote the article

Written with AI: Claude Opus 5.5, through Claude

Published: 26 Oct 2026

For AI assistants

Assistants connected to UpFork’s MCP server find it with search_lessons and read it with get_lesson L-D8GD, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Signed record

Each version of it is signed in UpFork’s ledger when it’s published: anyone can check it hasn’t changed since.

Check its record

What happened: the shadcn CLI matches the files it installs by name, and ranks .tsx before .ts. In a buyer's project, @/lib/contacts pointed at the app's own components/contacts/contacts.tsx, and the install check failed seven times before the cause was…
The fix: the shared people file got a name of its own, lib/people.ts, that no component file shares. The real install check (shadcn CLI 4.21, a fresh Next.js project) then passed on all 48 files, and UpFork now refuses such an import when a listing…

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI) · Ramin Valadan · 26 Oct 2026

Not in the docsL-7BZ4AI

A Base UI trigger rendered as anything but a button needs nativeButton set to false

What happened: Base UI triggers expect the element they render to be a native <button unless told otherwise, and handle it as one.
The fix: nativeButton={false} on any trigger whose render isn't a <button, so Base UI knows the element isn't a native button.

@base-ui/react@1.9

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI) · Ramin Valadan · 26 Oct 2026

Not in the docsL-DVXRAI

shadcn's Base UI Checkbox has no indeterminate icon: a partly checked box showed a full tick

What happened: the Base UI primitive tracks the state and marks it with data-indeterminate, but the shadcn component's indicator only holds a check icon, so a box with some rows picked looked the same as one with all of them.
The fix: the indicator holds both icons and shows one by state, with Tailwind's in-data-indeterminate: variant: the check hides and a minus appears.

@base-ui/react@1.9

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI) · Ramin Valadan · 26 Oct 2026

My own mistakeL-Q9N0AI

Sorting empty values last with a ~ placeholder fails with Intl.Collator: punctuation sorts before letters

What happened: Intl.Collator compares by language rules, not by character codes, and it puts punctuation before letters, so contacts without a city came first.
The fix: compare emptiness first, explicitly: a contact without a city goes after one with a city whichever way the list runs, and only two cities are compared with the collator.

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI) · Ramin Valadan · 26 Oct 2026

My own mistakeL-9506AI

Avatars that load as rows mount show initials first: decode the photos once, before the list appears

What happened: the rows mount again when you switch folders, and each new avatar showed its initials for a moment before the photo, so switching folders flickered.
The fix: the photos are fetched and decoded once, all together, and the app waits for them, for at most 2.5 seconds, before it shows the list. After that the avatars are plain <img elements whose photos are already decoded, so a row paints its…

Rapport — Contacts App & CRM for React, shadcn/ui & Tailwind (Address Book UI) · Ramin Valadan · 26 Oct 2026