Skip to content

thatrebeccarae/framer-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

9 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Framer Components

Open-source code components and packages for Framer — built for designers who ship.

Framer Website GitHub stars License

Packages · LinkTree Replacement · Eye Tracker · Getting Started · License


Why I Built This

Framer is incredible for shipping fast, but the code component ecosystem is still young. I kept building the same patterns across client projects — link-in-bio pages, interactive flourishes, analytics integrations — and decided to open-source the ones worth sharing.

These components are designed for non-technical Framer users. Each one comes with wizard-style documentation so you can drop it into your project without touching code. If you do want to customize, everything is a single .tsx file with clean props and no external dependencies.

The goal is simple: give Framer builders production-ready components that respect user privacy by default and just work.

Packages

Package Description Status
LinkTree Replacement Complete link-in-bio page with wizard docs, themes, and optional analytics Ready
Eye Tracker Animated eyes that follow cursor with blinking and easter eggs Ready

LinkTree Replacement

A privacy-first LinkTree alternative built entirely in Framer.

Features:

  • 5 code components — LinksHeader, SocialIconLinks, LinkCard, LinksContainer, EyeTracker
  • 6 pre-built themes — Minimal, gradient, playful, and professional options
  • 12 wizard docs — Step-by-step guides for non-technical users
  • GA4/GTM integration — With Framer SPA-specific workarounds
  • 100% private — No tracking unless you explicitly add analytics

Get Started →

Eye Tracker

Animated eyes that follow your cursor around the page — with blinking and hidden easter eggs.

Features:

  • Smooth cursor-tracking animation
  • Natural blinking behavior
  • Easter egg interactions
  • Lightweight, single-file component

Get Started →

Getting Started

Each package has its own installation instructions. Generally:

  1. Navigate to the package folder
  2. Copy the .tsx file from components/ or src/
  3. Paste into a new Code Component in your Framer project
Detailed setup notes
  • Each component is a single .tsx file — no build step, no dependencies
  • Framer's Code Component editor accepts the file contents directly
  • Theme and configuration options are exposed as Framer property controls
  • See each package's README for component-specific props and customization

Contributing

Pull requests welcome. If you build something useful on top of these components, I'd love to see it.

License

All components are MIT licensed.


About

Open-source Framer code components

Resources

License

Stars

Watchers

Forks

Packages

 
 
 

Contributors