Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/6xingyv/accompanist-lyrics-ui/llms.txt

Use this file to discover all available pages before exploring further.

Accompanist Lyrics UI is a Kotlin Multiplatform library that brings production-quality karaoke lyrics rendering to Android and JVM (Desktop) apps built with Jetpack Compose. Drop in KaraokeLyricsView and get syllable-level fill animations, character-level bounce effects, multi-voice duet lines, and animated breathing dots — all inspired by Apple Music.

Quickstart

Add the dependency and render your first lyrics view in minutes.

API Reference

Full parameter docs for every public composable and utility.

Karaoke Guide

Learn how to feed karaoke timing data and tune animations.

Core Concepts

Understand the lyrics model, lyric formats, and animation system.

​
Why Accompanist Lyrics UI?

Most lyrics libraries render plain scrolling text. Accompanist Lyrics UI goes further — it renders each syllable with a smooth karaoke fill gradient, animates individual characters with physics-inspired bounce and swell effects, and handles the full complexity of real-world lyrics files including multi-voice duets, RTL text, phonetics, and translations.

Karaoke Fill

Syllable-level gradient that sweeps left-to-right (or right-to-left for RTL) in sync with playback.

Multi-Voice

Main vocals and accompaniment lines rendered together with animated show/hide transitions.

Breathing Dots

Pulsing dots automatically appear during instrumental intros and interludes.

Spring Physics

List items reorder with spring-based placement animations via Compose’s LookaheadScope.

RTL Support

Arabic and other right-to-left scripts are detected automatically and rendered correctly.

Multiplatform

Targets Android (API 29+) and JVM Desktop via Compose Multiplatform.

​
Get Started

1

Add the dependency

Add lyrics-ui to your build.gradle.kts:
build.gradle.kts
dependencies {
    implementation("com.mocharealm.accompanist:lyrics-ui:1.0.18")
}
2

Parse your lyrics

Use the companion lyrics-core library to parse TTML or LRC files into a SyncedLyrics object.
3

Render lyrics

val listState = rememberLazyListState()
KaraokeLyricsView(
    listState = listState,
    lyrics = syncedLyrics,
    currentPosition = { player.currentPosition.toInt() },
    onLineClicked = { line -> player.seekTo(line.start.toLong()) },
    onLinePressed = { line -> /* show share sheet */ }
)
4

Explore & customize

Read the Theming & Styling guide to adjust text styles, blend modes, blur effects, and breathing dot appearance.
Accompanist Lyrics UI depends on lyrics-core for the data model. Make sure to include both dependencies in your project.

Build docs developers (and LLMs) love

Get started for freeTalk to us