Tags Organizer from CMS Plain Text Field for Framer

Introduction

Create a streamlined system for organizing and displaying tags with this Tags Organizer Component for Framer. Designed for CMS-driven projects, this component transforms a plain text field (e.g., "Tag1, Tag2, Tag3") into individual, fully customizable label tags. Ideal for blogs, product filters, or portfolios, it ensures seamless integration with Framer’s CMS while maintaining design consistency.

Don’t have the component yet? Purchase it here.

Getting Started

Click on the remix link you received from Lemon Squeezy which will open the project in Framer. Grab the component from the canvas by copying and pasting it into your own project. Replace the content with your own, and you're all set!

Component Features

Flex-Wrap Alignment & Layout

Control how tags flow and align:

• Alignment: Choose Left, Center, or Right alignment for labels.

• Gap Control: Adjust spacing between labels.

• Responsive Wrapping: Labels wrap to new lines while maintaining alignment.

Customizable Label Styling

Design labels to match your brand:

• Border & Radius: Set border width, color, and radius.

• Inner Stroke: Add a 1px inner border with color control for depth.

• Padding: Fine-tune padding for each side (top, right, bottom, left).

• Font & Colors: Customize text styles, background fill, and text color.

Tag Links

You can set individual tag links through the built in controls, either by inserting links manually or creating a CMS field where you delimit the links the same way as you would with the tags. The links are automatically applied to their respective tag order and if no links are present then the tags simply don't have the link attribute.

If you want to use external links in your tags you have to use http:// or https:// otherwise they will be interpreted as internal links.

SEO-Friendly Structure

Labels are rendered as semantic HTML elements, improving accessibility and search engine visibility.

How to Use

1. Create a Text field in your Framer CMS (e.g., "Tags")

2. Enter tags as a comma-separated string (e.g., "Webdesign, Framer, Responsive")

3. Add the Tags Organizer component to your CMS template or page

4. Bind the CMS field to the component’s Source property

5. Done, that's it