---
title: "Framer Developers: Examples"
description: Common Override use-cases
published: "Sep 18, 2026, 4:28 PM UTC"
---

# [Override Examples](#override-examples)

There are a few common use cases for Overrides, below you’ll find examples on how to implement them. The code will vary slightly in your specific usage.

### [Custom IDs and Attributes](#custom-ids-and-attributes)

You can also use overrides to add custom IDs and data attributes to elements. For example if you want to add a `data-xx` or `id` tag to elements.

```
import { forwardRef, type ComponentType } from "react"

export function withTags(Component): ComponentType {
    return forwardRef((props, ref) => {
        return <Component ref={ref} {...props} id="SomeID" data-framer="5678" />
    })
}
```

We don’t recommend to override core attributes like `class` or `className` as Framer relies on those and it will result in breaking styling. If you must, we recommend concatenating with the existing `class` value. 

### [Click Tracking](#click-tracking)

A popular use-case for Overrides is click tracking, you can do this quite simply. This depends on your tracking setup, but generally includes a call to a tracking API on click. Another way to do tracking is to add a data attribute to the layer (see above example) and adding a head script to your page in the Custom Code that performs the tracking.

```
import type { ComponentType } from "react";

export function withButtonTracking(Component): ComponentType {
    return forwardRef((props, ref) => {
      
        const handleClick = () => {
          // Call to tracking API
          void fetch("api.example.com/tracking/button")

          // Call normal onClick event if exists
          props?.onClick() 
        }
      
        return <Component ref={ref} {...props} onClick={handleClick} />
    })
}
```

### [Text Content](#text-content)

Sometimes you want to dynamically replace text contents for any text element. You can use the `text` property to pass in any text content. The preview or published site will now show “Hello World”. However in many cases you can use [Fetch](./fetch-introduction) for this instead.

```
import type { ComponentType } from "react";

export function withText(Component): ComponentType {
    return forwardRef((props, ref) => {
        return <Component ref={ref} {...props} text="Hello World" />
    })
}
```

## [Application State](#application-state)

Application state refers to the data flow within your app, specifically how elements communicate with each other. This example has two Overrides to connect a button to a counter. Create an Override file with the following code and set up a similar layout. Then, connect the two overrides: attach withIncrement to the button and withCount to the text field of the counter. Please note that if you want to build a "real app" that creates, updates, and lists dynamic data, consider using a simple React application or a no-code app builder if you don't know how to code.

```
import type { ComponentType } from "react"
import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

const useStore = createStore({ count: 0 })

export const withCount = (Component): ComponentType => {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()
        return <Component ref={ref} {...props} text={`${store.count}`} />
    }
}

export const withIncrement = (Component): ComponentType => {
    return forwardRef((props, ref) => {
        const [store, setStore] = useStore()
        const onTap = () => setStore({ count: store.count + 1 })
        return <Component ref={ref} {...props} onTap={onTap} />
    })
}
```

[Previous Introduction](./overrides-introduction)

[Next Introduction](./fetch-introduction)

---

## Navigation

- [Enterprise](../enterprise/)
- [Pricing](../pricing)
- [Log in](https://framer.com/r/login)
- [Sign up](https://www.framer.com/r/signup/)
- [Brand guidelines](../brand)
- [AI New](../ai/)
- [Agents New](../agents/)
- [External Agents New](../agents/external/)
- [Design](../design/)
- [Collaborate New](../collaborate/)
- [CMS](../cms/)
- [Hosting](../hosting/)
- [Performance](../performance/)
- [SEO](../seo/)
- [Convert](../convert/)
- [Publish](../publish/)
- [Updates New](../updates)
- [Academy](../academy/)
- [Guides](../guides)
- [Desktop app](../downloads/)
- [Blog](../blog/)
- [Newsletter](../newsletter)
- [Stories](../stories/)
- [Creators](../creators)
- [Experts](../expert/apply/)
- [Students](../education/students/)
- [Ambassadors](../education/ambassadors/)
- [State of Sites](https://www.framer.com/state-of-sites-2026/)
- [Stack Score New](../stack-score/)
- [Help Articles](../help/)
- [Contact](../contact/)
- [Startups](../startups/)
- [Agencies](../agencies/)
- [Switch](../switch/)
- [Careers](../careers/)
- [Brand](../brand)
- [Store](../store)
- [Security](../legal/security)
- [Abuse](mailto:abuse@framer.com)
- [Legal](../legal/community-terms)
- [Trust](https://app.eu.vanta.com/framer.com/trust/ow67ujg7iav0t6qtd1o6r2)
- [Designers](../solutions/designers/)
- [Agencies](../solutions/agencies/)
- [Marketers](../solutions/marketers/)
- [Growth](../solutions/growth/)
- [Builders](../solutions/builders/)
- [Engineers](../solutions/engineers/)
- [Site Teams](../solutions/site-teams/)
- [Founders](../solutions/founders/)
- [AI website builder](../solutions/ai-website-builder/)
- [AI design agent](../solutions/ai-designer/)
- [Website builder](../solutions/website-builder/)
- [Landing pages](../solutions/landing-pages/)
- [Portfolio maker](../solutions/portfolio-website/)
- [UI/UX design](../solutions/ui-ux-design/)
- [No-code](../solutions/no-code-website-builder/)
- [Overview](../compare)
- [Webflow](../compare/framer-vs-webflow)
- [Figma](../compare/framer-vs-figma)
- [Wix](../compare/framer-vs-wix)
- [Squarespace](../compare/framer-vs-squarespace)
- [WordPress](../compare/framer-vs-wordpress)
- [Readymag](../compare/framer-vs-readymag)
- [Ceros](../compare/framer-vs-ceros)
- [Unbounce](../compare/framer-vs-unbounce)
- [Lovable](../compare/framer-vs-lovable)
- [Claude Code](../compare/framer-vs-claude-code)
- [ChatGPT](../compare/framer-vs-chatgpt)
- [Codex](../compare/framer-vs-codex)
- [Contentful](../compare/framer-vs-contentful)
- [Sanity](../compare/framer-vs-sanity)
- [AEM](../compare/framer-vs-adobe-experience-manager)
- [Replit](../compare/framer-vs-replit)
- [v0](../compare/framer-vs-v0)
- [Marketplace](https://www.framer.com/community/marketplace/)
- [Templates](https://www.framer.com/community/marketplace/templates/)
- [Components](https://www.framer.com/community/marketplace/components/)
- [Plugins](https://www.framer.com/community/marketplace/plugins/)
- [Vectors](https://www.framer.com/community/marketplace/vectors/)
- [Feed](https://www.framer.com/community/feed/)
- [Hype](https://www.framer.com/community/hype/)
- [Gallery](https://www.framer.com/community/gallery/)
- [Contests](https://www.framer.com/community/contests/)
- [Members](https://www.framer.com/community/members/)
- [Meetups](../meetups/)
- [Updates](../updates/community/)
- [Figma to HTML](../solutions/figma-to-html/)
- [AEO scanner](../aeo)
- [Meta Tags](https://www.linkpreview.app/)
- [Free domains](../domains/)
- [CanvasBench](../canvasbench/)
- [Shortcuts](../shortcuts)
- [Checking status](https://www.framerstatus.com/)
- [504,616,418,546 tokens processed this week](https://openrouter.ai/apps/framer)