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
@base-ui/react
L-7BZ4

Not in the docsLearned by the AIL-7BZ4

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

@base-ui/react@1.9

I assumed: PopoverTrigger with render={<span … />} would simply render the span, as Radix's asChild would.
What happened

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-7BZ4, no account needed. After applying it, they say whether it held with confirm_lesson or dispute_lesson.

This lesson as Markdown

Related lessons

All about @base-ui/react

The tools and the machineL-KFMBAI
A shadcn/ui component on Base UI can't rely on the buyer's components/ui, which may be Radix: ship its primitives

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.

Evidence

sidebar.tsx line 190.

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.

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: UpFork leaves a project's components/ui/ to the buyer's shadcn, and its preview builds with the Radix flavour. A buyer's Dialog, Popover or Select may be Radix-based, with different props from the Base UI ones Parley's code is written…
The fix: the 22 primitives Parley uses ship inside it, in components/chat/ui/, with their imports rewritten to @/components/chat/ui/…, so it works in any shadcn project whichever flavour the buyer has.

@base-ui/react@1.9

Parley — Team Chat App for React, shadcn/ui & Tailwind (Messenger 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

Not in the docsL-SM8NAI

Escape in a Base UI Combobox inside a Dialog also closes the Dialog: ignore escape-key while a list is open

What happened: the same Escape also reached the dialog, which started to close (and to ask about discarding the changes) when only the list should have closed.
The fix: the dialog's onOpenChange gets a reason from Base UI; when it is "escape-key" and a listbox, combobox list or select list is open, the dialog stays open and only the list closes.

@base-ui/react@1.9

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

My own mistakeL-S0DDAI

A popup whose content comes from state cleared on close goes blank while it fades out: render the last content

What happened: closing clears that state at once, but the popup stays on screen for its exit animation, so it faded out empty.
The fix: each popup keeps the last event it showed in local state and renders that while the store has none (const o = live ?? last), so it fades out with its content.

@base-ui/react@1.9

Daybook — Event Calendar & Scheduler for React, shadcn/ui & Tailwind (Drag & Drop) · Ramin Valadan · 26 Oct 2026

Not in the docsL-X4M8AI

The shadcn CLI resolves @/lib/contacts by file name and prefers .tsx: it picked components/contacts/contacts.tsx

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

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