SwiftUI Texts & Typography
Gradient typography, markdown links, localized inflection rules, typewriter animations, and SF font variants. (18 components available in Compot).
1 of 18Pro ComponentiOS 16.0+
Text with Uneven Background & Gradient
Stylized display text with asymmetrical corner radiuses and mesh gradient background.
TextWithUnevenBackgroundGradient.swiftPro
import SwiftUI
struct TextWithUnevenBackgroundGradient: View {
var body: some View {
Text("Hello, World!")
.foregroundStyle(.white)
.padding()
.background(.blue.gradient)
// ...
// Complete source code available in Compot Pro on the App Store.Compot Pro Component
Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
2 of 18Free ComponentiOS 16.0+
Text with Number Inflection Rules
Dynamic text demonstrating automatic localized pluralization syntax (^[(count) item](inflect: true)).
TextWithNumberInflectionRules.swift
import SwiftUI
struct TextWithNumberInflectionRules: View {
var num0: Int = 0
var num1: Int = 1
var num2: Int = 2
var body: some View {
VStack(spacing: 8) {
Text("^[\(num0) Apple](inflect: true)")
Text("^[\(num1) Apple](inflect: true)")
Text("^[\(num2) Apple](inflect: true)")
Text("^[\(num0) Person](inflect: true)")
Text("^[\(num1) Person](inflect: true)")
Text("^[\(num2) Person](inflect: true)")
Text("^[\(num0) Mouse](inflect: true)")
Text("^[\(num1) Mouse](inflect: true)")
Text("^[\(num2) Mouse](inflect: true)")
}
}
}
#Preview {
TextWithNumberInflectionRules()
}3 of 18Free ComponentiOS 16.0+
Text with Markdown Links
Rich text demonstrating inline markdown links, bolding, italics, and custom link styling.
TextWithMarkdownLinks.swift
import SwiftUI
struct TextWithMarkdownLinks: View {
var body: some View {
Text("**[Terms of Service](https://docs.google.com/document/d/1Elo7_XJlsED5jwCVNLUmVEtjOgkW0rcFsRYPtDuPLlg/view)** and **[Privacy Policy](https://docs.google.com/document/d/1qCqehg-XP7ap-5VgnUSl80q2N0tDd1Qix81ilc0l0uk/view)**")
.font(.footnote)
.foregroundStyle(Color.accentColor)
}
}
#Preview {
TextWithMarkdownLinks()
}4 of 18Pro ComponentiOS 16.0+
Text with Dashed Stroke
Decorative heading enclosed in a dashed border stroke.
TextWithDashedStroke.swiftPro
import SwiftUI
struct TextWithDashedStroke: View {
var body: some View {
VStack {
Text("Drop your weapons!")
}
.padding()
// ...
// Complete source code available in Compot Pro on the App Store.Compot Pro Component
Unlock full code & interactive preview
Interactive live preview and complete SwiftUI code available in the Compot App.
Available for macOS & iOS • 85+ free components included
5 of 18Free ComponentiOS 16.0+
Text System Default Variants
Showcase of standard San Francisco system font weights and designs.
TextSystemDefaultVariants.swift
import SwiftUI
struct TextSystemDefaultVariants: View {
var body: some View {
HStack(spacing: 16) {
VStack(alignment: .trailing) {
Text("Default")
.font(.system(size: 14, weight: .medium, design: .default))
Text("Upright")
.font(.system(size: 14, weight: .medium, design: .default))
.padding(.bottom, 4)
VStack(alignment: .trailing, spacing: 4) {
Text("Text")
.font(.system(size: 17, weight: .ultraLight, design: .default))
Text("Text")
.font(.system(size: 17, weight: .thin, design: .default))
Text("Text")
.font(.system(size: 17, weight: .light, design: .default))
Text("Text")
.font(.system(size: 17, weight: .regular, design: .default))
Text("Text")
.font(.system(size: 17, weight: .medium, design: .default))
Text("Text")
.font(.system(size: 17, weight: .semibold, design: .default))
Text("Text")
.font(.system(size: 17, weight: .bold, design: .default))
Text("Text")
.font(.system(size: 17, weight: .heavy, design: .default))
Text("Text")
.font(.system(size: 17, weight: .black, design: .default))
}
}
VStack(alignment: .trailing) {
Text("Default")
.font(.system(size: 14, weight: .medium, design: .default))
Text("Italic")
.font(.system(size: 14, weight: .medium, design: .default))
.padding(.bottom, 4)
VStack(alignment: .trailing, spacing: 4) {
Text("Text")
.font(.system(size: 17, weight: .ultraLight, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .thin, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .light, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .regular, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .medium, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .semibold, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .bold, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .heavy, design: .default))
.italic()
Text("Text")
.font(.system(size: 17, weight: .black, design: .default))
.italic()
}
}
}
}
}
#Preview {
TextSystemDefaultVariants()
}6 of 18Free ComponentiOS 16.0+
Text System Monospace Variants
Showcase of SF Mono typography for code, data, and numeric readouts.
TextSystemMonospaceVariants.swift
import SwiftUI
struct TextSystemMonospaceVariants: View {
var body: some View {
HStack(spacing: 16) {
VStack(alignment: .trailing) {
Text("Mono")
.font(.system(size: 14, weight: .medium, design: .default))
Text("Upright")
.font(.system(size: 14, weight: .medium, design: .default))
.padding(.bottom, 4)
VStack(alignment: .trailing, spacing: 4) {
Text("Text")
.font(.system(size: 17, weight: .ultraLight, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .thin, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .light, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .regular, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .medium, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .semibold, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .bold, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .heavy, design: .monospaced))
Text("Text")
.font(.system(size: 17, weight: .black, design: .monospaced))
}
}
VStack(alignment: .trailing) {
Text("Mono")
.font(.system(size: 14, weight: .medium, design: .default))
Text("Italic")
.font(.system(size: 14, weight: .medium, design: .default))
.padding(.bottom, 4)
VStack(alignment: .trailing, spacing: 4) {
Text("Text")
.font(.system(size: 17, weight: .ultraLight, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .thin, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .light, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .regular, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .medium, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .semibold, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .bold, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .heavy, design: .monospaced))
.italic()
Text("Text")
.font(.system(size: 17, weight: .black, design: .monospaced))
.italic()
}
}
}
}
}
#Preview {
TextSystemMonospaceVariants()
}More SwiftUI Texts & Typography Components (12)
Browse additional texts & typography components from our library. Click through to view standalone source code and usage examples.
Texts & TypographyiOS 16.0+
Text System Rounded Variants
Showcase of SF Pro Rounded typography for friendly, consumer-facing interfaces.
View Component & Code
Texts & TypographyiOS 16.0+
Text System Serif Variants
Showcase of New York serif typography for editorial and reading experiences.
View Component & Code
Texts & TypographyiOS 16.0+
Text Style Default Variants
Comprehensive typography hierarchy showcase (Large Title down to Caption 2).
View Component & Code
Texts & TypographyiOS 16.0+
Text Date Styling Options
Built-in date/time text formatting variants (relative, timer, date, offset).
View Component & Code
Texts & TypographyiOS 16.0+
Text Styling Default Options
Text transformation samples (strikethrough, underline, kerning, baseline offset).
View Component & Code
Texts & TypographyiOS 16.0+
Text Truncation Modes
Comparison of .head, .middle, and .tail text truncation behaviors.
View Component & Code
Texts & TypographyiOS 16.0+
Text with Gradient
Headline text masked with a multi-stop linear gradient fill.
View Component & Code
Texts & TypographyiOS 16.0+
Relative Date Text
Automatically updating relative time formatting (e.g. "2 hours ago", "in 3 days").
View Component & Code
Texts & TypographyiOS 16.0+
Text Sequence with Timer
Dynamic text that cycles through a sequence of strings automatically using a timer.
View Component & Code
Texts & TypographyiOS 16.0+
Text Typing & Retracting Animation
Typewriter effect that types out and deletes sentences with a blinking cursor.
View Component & Code
Texts & TypographyiOS 16.0+
Text Dissolve Animation
Smooth cross-fade transition cycling through different phrases.
View Component & Code
Texts & TypographyiOS 16.0+
Monospace Expandable Text
Monospaced code/log snippet with tap-to-expand card layout.
View Component & Code
Explore other SwiftUI categories
Buttons (34)Banners & Promos (10)Cards & Content Displays (8)Settings, Lists & Rows (9)Avatars & User Profiles (7)Charts & Gauges (5)Icons & Badges (7)Links & Sharing (5)Navigation Links & Banners (3)Onboarding & Welcome Screens (3)Paywalls & Subscriptions (3)Images & Effects (3)Labels (4)SF Symbols & Animations (4)Inputs & Text Editors (2)Shapes, Chat & Real-Time (2)Tiles & Selectables (2)Badges & Pills (1)Alerts & Modals (1)Toasts & Feedback (1)Developer Templates & Architecture (3)