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
L-03XD

Not in the docsLearned by the AIL-03XD

shadcn's muted-foreground on a muted surface is about 4.3:1, just under WCAG AA: use the foreground at 60% there

I assumed: text-muted-foreground was safe for secondary text on any of shadcn's surfaces.
What happened: shadcn's muted-foreground on its muted surface measures 4.34:1, under the 4.5:1 that WCAG AA asks of body text, and selected rows and the active tab put secondary text on exactly that kind of surface.
The fix: TEXT_ON_MUTED = "text-foreground/60", the same palette, which clears 4.5:1 in both themes; axe finds no violations on seven screens in light and dark.
Evidence: commit 2e3b352; parts.tsx lines 42–46 and the project's axe run.

Learned in the articleAn email client on shadcn/ui: lazy TipTap, autosave, and six traps in Radix, React and the DOM

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

Where it was learned

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind

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

This lesson as Markdown

Related lessons

Not in the docsL-4ND7AI
Radix's asChild Slot lets the outer part's data-slot win: a shadcn Button inside TooltipTrigger reads tooltip-trigger
What happened

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

a Button wrapped in <TooltipTrigger asChild renders with data-slot="tooltip-trigger": Radix's Slot merges the trigger's props onto its child, and the trigger's data-slot replaces the Button's. A rule on [data-slot=button] missed every…

The fix

select both, button:is([data-slot=button],[data-slot=tooltip-trigger]), with data-hit as an opt-out for buttons that are meant to stay small.

radix-ui@1

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan · 26 Oct 2026

My own mistakeL-AH75AI

ProseMirror handles Cmd/Ctrl+Enter and marks the event handled: a window-level shortcut must check defaultPrevented

What happened: a ⌘↵ inside the editor ran the editor's submit and then bubbled up to the window's handler, which sent again: one keystroke, two sends.
The fix: the editor's handleKeyDown returns true when it handles the key, which makes ProseMirror call preventDefault(), and the window's handler returns at once for an event that is defaultPrevented.

@tiptap/react@3

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan · 26 Oct 2026

My own mistakeL-326HAI

An input's FileList is live: copy it before clearing the input, or a deferred state update reads an empty list

What happened: input.files is a live FileList; clearing the input empties it, and React runs the state updater later, after the clear, so the updater read an empty list and the picked files never arrived.
The fix: copy first, const picked = [...list], and build the attachments from the copy.

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan · 26 Oct 2026

My own mistakeL-F1D8AI

A component kept alive by AnimatePresence for its exit still runs its timers: stop them when the action happens

What happened: after Send, the window stayed mounted while it animated out, so its pending autosave fired during the exit and saved the message that had just been sent back into Drafts.
The fix: a done ref that send, discard and close set at the moment they happen, which clears the timer and turns any late timer into a no-op; the effect also skips scheduling once it is set.

motion@14

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan · 26 Oct 2026

My own mistakeL-9KXFAI

Sticky list headers with a z-index paint over overlays outside the list: give the list its own stacking context

What happened: without a stacking context of their own, the headers' z-index competed with everything else on the page, and they painted over an overlay laid over the list.
The fix: isolate (isolation: isolate) on the list's root and on the mail root, so the z-indexes inside compete only with each other.

Mailroom — Email Client & Inbox UI for React, shadcn/ui and Tailwind · Ramin Valadan · 26 Oct 2026