How to add a custom class to an element

How to manually modify an element’s class attribute in Framer by creating an override.

Steps to add a custom class

  1. Create an override:

    Use an override to modify the className property of an element. This method adds a custom class to the element.

  2. Write the code:

    Below is an example override that appends the class “test” to an element’s existing className. Ensure you include a space before “test” so it’s properly separated.

<div class="framer-abc123 test"> ... </div>

  1. Publish and inspect:

  • Publish your project in Framer.

  • Open the web inspector in your browser.

  • Verify that the element now includes the added class, as shown below:

import type { ComponentType } from "react";

export function withClass(Component): ComponentType {

	return (props) => {

	props.className += " test"; // Remember to add a space

	return <Component {...props} />;

	};

}

Important notes

  • This approach is ideal for minor adjustments.

  • Keep in mind that delving too deeply into manual modifications may limit the support Framer can provide.