CMS Components: A Guide to Using Components in the Framer CMS
Last updated:
If you have been using Framer for a while, you will know that its CMS is a powerful tool for managing blogs, portfolios, and team pages.
However, until recently, your CMS content was mostly limited to "plain" elements like text, images, and tables. While these are essential, they can sometimes feel a bit static if you are trying to build a truly modern website.
Framer has just released a game-changing update: CMS Components.
This feature allows you to drop any component created on your canvas directly into your rich text content. Whether you want to add an interactive ticker, a newsletter signup, or an animated gallery, you can now do it without leaving your content editor.
In this guide, we’ll break down how this works, why it matters for your design workflow, and how to make sure your components look great on every device.
What are CMS Components?
Traditionally, rich text in a CMS is fairly restrictive. You can style your headings, add some bold text, and perhaps throw in a YouTube embed.
But what if you wanted a custom-designed "Call to Action" button or a specific interactive element you built on the Framer canvas?
With this new update, Framer has unlocked that freedom. You can now take any component from your project and place it right between your paragraphs.
This means your blog posts or case studies can now include:
Interactive site embeds.
Newsletter signup forms.
Animated image galleries.
Custom UI elements like tickers or status badges.
The goal is to make your detail pages feel much more modern and dynamic. Instead of a wall of text, your readers get an engaging, interactive experience.
How to Insert Components into the CMS
Framer has made the process of adding these components feel "fast and familiar".
There are two main ways to do it:
1. Using the Formatted Text Toolbar
When you are editing a CMS item, you will notice a new "Insert" button in the formatted text toolbar.
Place your cursor where you want the component to go.
Click the "Insert" button.
You will see a menu that includes the default blocks (like images and videos) and a new section for your project components.
The components are organised using the same folder structure as your Assets panel, so they are very easy to find.
2. The "Slash" Command Shortcut
If you prefer to work quickly on the canvas, you can edit your CMS content inline. By placing your cursor in the text and typing "/", a menu will appear. You can then type the name of the component you want to filter the list and hit enter to drop it in instantly.
Full Creative Control
One of the best things about this update is that the components aren't just static blocks; they remain fully flexible.
Once you have added a component to your text, you can click on it to adjust its properties directly from a popover.
For example, you can switch the width from "Fill" to "Fit" or use alignment controls to centre the element.
If your component has different variants (such as a "Compact" or "Ultra Wide" version) you can toggle between them right there in the CMS. You can even tweak specific editable properties, like border radius or text content, without having to go back to the original component on the canvas.
Making Your Components Responsive
A common worry when adding complex elements to a blog post is how they will look on a mobile phone. Framer has handled this with an "automatically responsive" system.
To make sure your component scales correctly:
Open the component in the primary canvas editor.
Create a new variant specifically for your smaller breakpoints.
Crucially, name the variant after the breakpoint it belongs to (e.g., "Phone").
As long as the variant name matches the breakpoint name, Framer will automatically pick the correct version to show when a user views your site on a mobile device. This ensures that your interactive content stays functional and beautiful regardless of screen size.
Why This is a Big Deal for Designers
This update bridges the gap between "content" and "design."
Usually, these two things live in separate worlds - you design the layout, and then you just "fill" it with text. Now, the content is the design.
By allowing interactive elements to live "naturally between paragraphs," you can create much more engaging stories. If you are writing a tutorial, you can embed the actual live demo of what you are building. If you are running a newsletter, you can place the signup form exactly where the reader is most likely to be convinced to join.
If you want to take your CMS even further, you should also check out our other guide for Framer Dynamic Filters, which explains how to organise all this new dynamic content for your users.
The introduction of CMS Components is a significant step forward for Framer. It removes the limitations of standard rich text and gives you the power to use your full design library within your content.
It is simple, flexible, and - most importantly - it makes your websites feel more alive. We are really excited to see how you use this to take your content to the next level.
Watch the video from Framer about thus update to see how these components look in practice.
