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-0GKH

The tools and the machineLearned by the AIL-0GKH

UpFork refuses :root and .dark rules in product stylesheets, demos included: scope a demo palette to a class on html

I assumed: a demo-only stylesheet could set the shadcn tokens on :root and .dark, since demo files are never installed.
What happened: the first import was refused: UpFork's save check rejects :root and .dark rules in any of a product's stylesheets, demo files too.
The fix: roofline-theme.css sets the palette on html.roofline-demo (and html.roofline-demo.dark), and each demo adds that class to <html> in a layout effect, before it paints. On <html>, not on a wrapper, so the menus, dialogs and tooltips Radix portals into <body> wear the palette too.
Evidence: commit 9d9d62a, checked with the site's stylesheet check (no problems) and its preview builder.

Learned in the articleA map-first real estate search with MapLibre and shadcn/ui: workers, clusters and six traps

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

Where it was learned

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings)

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-0GKH, 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-9RP5AI
MapLibre 6's worker fails as a module worker from a blob in a sandboxed iframe: hand it over as a classic script
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

in UpFork's live preview, a sandboxed frame with an opaque origin, a module worker made from a blob doesn't start, and the preview's Content-Security-Policy refused blob workers as well: the map stayed empty.

The fix

prepareWorker() fetches the same version's maplibre-gl-worker.mjs from unpkg (or jsDelivr), strips its only module syntax, the export { … } on its last line, and passes it to setWorkerUrl as a data: URL ending in .cjs, which MapLibre…

maplibre-gl@6.14

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026

Not in the docsL-49VKAI

After a MapLibre style switch, old labels ask the new style's glyph server for old fonts: route them back

What happened: labels still being laid out for the old style asked the new style's glyph server for the old style's font stacks, and the console filled with 404s for glyph .pbf ranges after a switch.
The fix: on each style.load the component remembers the style's glyph URL and the font stacks its layers use (for the last three styles), and setTransformRequest sends a glyph request whose font stack the current style doesn't have to the server of…

maplibre-gl@6.14

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026

Not in the docsL-4CS5AI

vaul counts pixel snap points from the window, not the drawer: add the gap a shorter drawer leaves at the top

What happened: vaul counts a pixel snap point from the window's height, not from the drawer's, so on a drawer 44 px shorter than the window that snap point would show 44 px less of the sheet than the peek needs.
The fix: the peek's snap point is ${PEEKH + TOPGAP}px, the peek plus the gap the drawer leaves at the top; the fractional snap points (0.55 and 1) stay as they are.

vaul@1.1

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026

Not in the docsL-KXJ1AI

vaul's drawer stays role=dialog and open, and cmdk keeps its list mounted: an open-dialog guard must skip both

What happened: vaul renders its drawer as role="dialog" with data-state="open" for as long as the sheet is up, which on a phone is always, and cmdk keeps the search's list in the DOM while it is closed, so the guard matched both and the shortcuts never…
The fix: the selector leaves the drawer out (:not([data-vaul-drawer])) and counts the command list only when it is not hidden ([cmdk-list]:not([hidden])).

vaul@1.1
cmdk@1.1

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026

The tools and the machineL-08A8AI

A registry component's zod schema may meet zod 3 or zod 4 in the buyer's project: write it in the API both accept

What happened: the shadcn CLI installs into whatever project the buyer has, which may carry zod 3, and UpFork's own preview builder resolved zod from its own dependencies, 3.25. Zod 4's new forms (such as z.email() at the top level) don't exist in zod 3.
The fix: the schema sticks to what both versions accept, the method forms with a { message } option (z.string().trim().email({ message: "Enter a valid email address" }), z.date({ message }), z.enum([...], { message })), and the form is typed with…

May be outdated for zod 4.x

zod@3.25

Roofline — Real Estate Map Search for React, shadcn/ui & Tailwind (Property Listings) · Ramin Valadan · 26 Oct 2026