Framer Component Library

These are interactive Framer components, built, reviewed, rejected, fixed and shipped. The discipline was turning every review rejection into a standing rule instead of a one-off fix.

The problem

The Framer Marketplace is full of components that look right in a demo and fall over the moment somebody else uses them. I wanted a library that survived review, and Framer's community review is unusually strict. It reads your code, not your video.

My first serious submission was rejected, and not for the design. It was rejected for loading fonts from a content network at runtime, and for running an animation loop that kept going when the component scrolled out of view.

What I did

I treated every rejection as a rule, not as a fix

Each review note became a standing rule applied to every component before its own submission, rather than a patch on the one that failed. That meant real buttons instead of clickable divs, bundled fonts instead of a network request, animation loops gated on visibility, and a clean static path so nothing runs on the canvas or during export.

I audited the components that already existed, not only the new ones

One component built before the rules existed broke six of them. Going back through it cost a day. Not going back through it would have cost a second rejection on a listing that then needs the same reviewer to restore it.

I found where the real constraint was, and it wasn't the effect

The hardest problem in the library is reading distinct images out of a Framer collection list. The obvious property is a shared placeholder on most rows, so the naive read collapses ten cards onto one image. Getting it right meant knowing which value is correct to read once and snapshot, and which value is wrong to match on later. The same property is right in one place and wrong in the other.

I made the library free rather than leave a broken checkout behind

When I could no longer take payment for the components, the choice was to hide the listings or convert them. Hiding them would have cost the thing they're actually worth, which is discovery. A dead buy button is the fastest way to get a listing reported. Making them free keeps them visible, delivers by copy and paste, and leaves nothing to break.

What shipped

What shipped is a published library on the Framer Marketplace, with every component carrying the same accessibility and performance floor, its own listing copy, and a dated change log that records why each decision was made, so the next component starts from the rules instead of from a rejection.

How the work ran

There was nobody else on this, which means I was the plan, the build and the release notes. The only way that survives twenty five components is writing things down.

One catalogue document holds every component, its build conventions, its identifiers and a dated log of every gotcha and why it bit. That file is the reason a component built weeks earlier could be brought up to the current rules in a day rather than rebuilt.

Every marketplace rejection became a standing rule applied to everything, rather than a fix applied to one thing. Six review rules were closed in a single audit pass, because they had been written down as rules and not remembered as incidents.

The design system

The library has no Figma file, by design. Each component is one typed file and its property controls are the interface, because in Framer the property panel is the design surface. The naming, the grouping and the defaults are the product.

Build and handover

There are no third party dependencies and no runtime network requests. The fonts are embedded, the styles are applied through constructable stylesheets rather than injected markup, and the effects are optional and gated on visibility. Where there's audio it's synthesised at runtime, so there's no file to host and nothing to fetch.