---
title: "Text Underline — Framer component · Best of Framer"
description: "$4.00 · Framer component · by Nabeel · Text. About This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO."
canonical: "https://framer.elliotli.dev/component/text-underline"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Text Underline

# Text Underline

[View on Framer](https://framer.com/marketplace/components/text-underline/?via=elliot-li)

![Text Underline preview image 1](https://framer.elliotli.dev/og/component/text-underline/c354c3608542f1b7/1600x1200.jpg)

## Summary

About This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO.

## Description

## About

This component a part of the 400+ components, layouts, templates, UI Kits and code overrides from SegmentUI PRO. Click [here](https://segmentui.com/uikit) to see the full library

## Instructions

1.  Copy and paste the component into your project file
    
2.  Add your desired text in the Text field
    
3.  Choose between full text or selected words underlining using the Select Words toggle
    
4.  For full text underlining:
    
    -   Select the Global Style (solid, double, dotted, dashed, or wavy)
        
    -   Choose the Global Underline Color and Font Color
        
5.  For selected words:
    
    -   Click the + button in Highlighted Phrases
        
    -   Enter the exact phrase you want to highlight
        
    -   Customize the Font Color, Style, and Underline Color for each phrase
        
6.  Adjust the font properties using the Font control
    

## How It Works

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-u1621jqn-YA5yNI8aj5fFzAUqXbZvbsjkJjFwZr)

The component comes with customizable properties including text content, font styling, underline style, colors, and the ability to highlight specific phrases. You can control whether the underline effect applies to the entire text or selected words, and customize the appearance of individual highlighted phrases

## Support

For any queries and help setting up the component, contact [hello@segmentui.com](mailto:hello@segmentui.com)

## Rank history [How rankings work →](/terms#rankings)

-   All · #7052

## Details

- **Author**: Nabeel
- **Price**: $4.00
- **Published**: 2025-09-18
- **Updated**: 2025-09-18
- **Added**: 2025-09-16
- **Categories**: Text

## More like this

-   [Text Reveal Effect](/component/text-reveal-effect) — Lera · $4 — Text reveal effect over "ghost" layer.
-   [Soft Heading](/component/soft-heading) — Kaisa A · Free — Animated Soft Heading in 2 colors
-   [Curved Text Marquee](/component/curved-text-marquee) — Ahmet Loca · Free — Animated Bend
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing