---
title: "Tag Splitter"
canonical_url: "https://framerhub.io/components/tag-splitter"
last_updated: "2026-06-15T14:46:31.784Z"
---

## Tag Splitter

Turn any comma-separated list into stylish tag pills instantly. Perfect for displaying categories, skills, or features without manually creating dozens of text layers.

## Features

**Auto-Split Logic**
Simply type your tags separated by commas (e.g., "Design, Code, Art") and watch them transform into individual pills.

**Flexible Layouts**
Choose between a wrapping layout that flows naturally or a horizontal scroll layout for compact spaces.

**Custom Styling**
Full control over colors, typography, spacing, and hover effects to match your brand perfectly.

## Use Cases

**Blog Categories** — Display post categories or tags.

**Skill Lists** — Showcase skills on a portfolio or resume.

**Feature Lists** — List product features in a compact, readable format.

![Tag Splitter Preview](/framerhub/img/components/control/tag-splitter.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find Tag Splitter in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

**Tags List**
Enter your tags here. By default, use commas to separate them. You can change the separator if needed.

**Layout**

- **Wrap**: Tags will flow to the next line when they run out of space.
- **Scroll**: Tags will stay in a single line and scroll horizontally if they overflow.

**Styling**
Customize the gap, padding, border radius, and colors. Enable "Hover Effect" to add interactivity.

### Quick Tips

**Custom Separator** — You can use any character as a separator, such as "|" or ";". Just update the "Separator" control.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

It saves time! Instead of creating 10 separate text layers and auto-layout frames, just drop this component and type your list. It's that simple.

---

**Need Help?** Visit framerhub.io/support for documentation and video tutorials.