FAQ
How to add CMS to a Kompa section
Follow these steps to connect a Kompa section to your Framer CMS and replace the sample content with real data.
Before doing the following, make sure you have a CMS collection in your project.
Step 1 · Insert your Kompa component
Open the Kompa plugin
Insert any Kompa component on to the breakpoint that you want to use.
Step 2 · Insert the CMS collection into the component
Open the Insert panel → Collections.
Drag the Articles collection onto the primary breakpoint above your Kompa blog section.
Step 3 · Match the design
Select the new CMS stack.
Copy the layout settings from the Kompa stack (direction, gap, width, etc.).
Set the item limit to match your design (for example, 3 items).
Step 4 · Replace the default CMS item with a Kompa card
Delete the default CMS item inside the stack.
Copy one Kompa card from your section and paste it into the CMS stack.
Framer will automatically duplicate it for the remaining items.
Step 5 · Connect content using variables
For each element in the card:
Select the layer (image, title, text, etc.).
Go to Styles → Fill / Content → Set Variable.
Choose the matching CMS field (Image, Title, etc.).
Step 6 · Add categories (nested collection)
From Insert → Collections, drag in Categories.
Match its layout to your category stack.
Paste your category pill/badge component inside.
Set the text field’s variable to the category name.
Set width to Fit Content if needed.
Step 7 · Add dates
Select the date text layer.
Go to Content → Set Variable and choose Created or Updated.
Click Format and style the date as you like.
Step 8 · Add article links
Select the card or main container.
Set the link to the CMS Item Page (first link option).
This ensures each card links to the correct article.
Step 9 · Preview
Open preview and click different cards to confirm:
Content is dynamic
Links go to the correct article pages
Now your Kompa section is now fully connected to your CMS.
Still need help?
Our team can provide the answers you're looking for.
FAQ
How to add CMS to a Kompa section
Follow these steps to connect a Kompa section to your Framer CMS and replace the sample content with real data.
Before doing the following, make sure you have a CMS collection in your project.
Step 1 · Insert your Kompa component
Open the Kompa plugin
Insert any Kompa component on to the breakpoint that you want to use.
Step 2 · Insert the CMS collection into the component
Open the Insert panel → Collections.
Drag the Articles collection onto the primary breakpoint above your Kompa blog section.
Step 3 · Match the design
Select the new CMS stack.
Copy the layout settings from the Kompa stack (direction, gap, width, etc.).
Set the item limit to match your design (for example, 3 items).
Step 4 · Replace the default CMS item with a Kompa card
Delete the default CMS item inside the stack.
Copy one Kompa card from your section and paste it into the CMS stack.
Framer will automatically duplicate it for the remaining items.
Step 5 · Connect content using variables
For each element in the card:
Select the layer (image, title, text, etc.).
Go to Styles → Fill / Content → Set Variable.
Choose the matching CMS field (Image, Title, etc.).
Step 6 · Add categories (nested collection)
From Insert → Collections, drag in Categories.
Match its layout to your category stack.
Paste your category pill/badge component inside.
Set the text field’s variable to the category name.
Set width to Fit Content if needed.
Step 7 · Add dates
Select the date text layer.
Go to Content → Set Variable and choose Created or Updated.
Click Format and style the date as you like.
Step 8 · Add article links
Select the card or main container.
Set the link to the CMS Item Page (first link option).
This ensures each card links to the correct article.
Step 9 · Preview
Open preview and click different cards to confirm:
Content is dynamic
Links go to the correct article pages
Now your Kompa section is now fully connected to your CMS.
Still need help?
Our team can provide the answers you're looking for.
FAQ
How to add CMS to a Kompa section
Follow these steps to connect a Kompa section to your Framer CMS and replace the sample content with real data.
Before doing the following, make sure you have a CMS collection in your project.
Step 1 · Insert your Kompa component
Open the Kompa plugin
Insert any Kompa component on to the breakpoint that you want to use.
Step 2 · Insert the CMS collection into the component
Open the Insert panel → Collections.
Drag the Articles collection onto the primary breakpoint above your Kompa blog section.
Step 3 · Match the design
Select the new CMS stack.
Copy the layout settings from the Kompa stack (direction, gap, width, etc.).
Set the item limit to match your design (for example, 3 items).
Step 4 · Replace the default CMS item with a Kompa card
Delete the default CMS item inside the stack.
Copy one Kompa card from your section and paste it into the CMS stack.
Framer will automatically duplicate it for the remaining items.
Step 5 · Connect content using variables
For each element in the card:
Select the layer (image, title, text, etc.).
Go to Styles → Fill / Content → Set Variable.
Choose the matching CMS field (Image, Title, etc.).
Step 6 · Add categories (nested collection)
From Insert → Collections, drag in Categories.
Match its layout to your category stack.
Paste your category pill/badge component inside.
Set the text field’s variable to the category name.
Set width to Fit Content if needed.
Step 7 · Add dates
Select the date text layer.
Go to Content → Set Variable and choose Created or Updated.
Click Format and style the date as you like.
Step 8 · Add article links
Select the card or main container.
Set the link to the CMS Item Page (first link option).
This ensures each card links to the correct article.
Step 9 · Preview
Open preview and click different cards to confirm:
Content is dynamic
Links go to the correct article pages
Now your Kompa section is now fully connected to your CMS.
Still need help?
Our team can provide the answers you're looking for.
Design like a pro. Ship like a team.
Kompa gives you the largest, fastest-growing UI system for Framer. Built for serious scale. Try it free.
Design like a pro. Ship like a team.
Kompa gives you the largest, fastest-growing UI system for Framer. Built for serious scale. Try it free.
Design like a pro. Ship like a team.
Kompa gives you the largest, fastest-growing UI system for Framer. Built for serious scale. Try it free.