A language-learning flashcard component for Compose Multiplatform (Android & iOS).

CuteCard handles the full interaction lifecycle of a single flashcard - 3D flip animation, settled-lock delay, confirm/dismiss exit animations, and audio button visuals - so you can focus on your deck logic and data.

• 3D card flip (horizontal or vertical axis)
• Two exercise modes — see the word, recall the translation, or vice versa
• Confirm and dismiss exit animations (slide, scale-fade, fade)
• Audio button with idle/playing visual states, or your own custom button
• "I don't know" button — built-in, custom, hidden, or your own control placed anywhere
• Unflip button — flip back to the front face without dismissing, above the card or in its corner
• Programmatic flip — drive the card from code for onboarding and tutorials
• Ghost card stack for a physical deck feel, with configurable inset, offset and opacity
• Layered shadows — several shadows per card, separate for the top card and each deck card
• Configurable word placement and per-side word text style
• Language indicator pill — small 2-3 character code (e.g. "EN", "ES") in the card corner
• Fully customizable colors, shapes, typography, labels and timing, with a built-in dark style

implementation("site.llinsoft:cutecard:0.5.1")

var isPlaying by remember { mutableStateOf(false) }

CuteCard(
    content = CuteCardContent(
        word = "hierro",
        translation = "iron",
        phonetics = "[ˈje.ro]",
        wordClass = "noun",
        audioUrl = "https://example.com/hierro.mp3"
    ),
    onKnown = { /* advance to next card */ },
    onUnknown = { /* re-queue or move on */ },
    isPlaying = isPlaying,
    onAudioRequested = {
        isPlaying = true
        player.play(content.audioUrl) { isPlaying = false }
    }
)

• Tap the card to flip it, tap the back to mark it as known, or tap "I don't know".
• onKnown and onUnknown are called after their exit animations complete — replace the card there.
• Playback is yours: the library only draws the audio button and calls onAudioRequested. Pass null to hide the button.

config = CuteCardConfig(frontSide = CardFrontSide.Translation)

Word (default) shows the word first and reveals translation, phonetics, word class and audio. Translation reverses it.

style = CuteCardDefaults.style().copy(
    cardBackgroundColor = Color(0xFFFFF8F0),
    wordTextColor = Color(0xFF2C2C2C)
)

style = CuteCardDefaults.darkStyle()

Start from the defaults and override only what you need.

// Hide it
CuteCard(content = content, onKnown = { ... }, dismissButton = null)

// Or place your own control anywhere
val cardState = rememberCuteCardState()

CuteCard(content = content, state = cardState, dismissButton = null, onKnown = { ... }, onUnknown = { ... })

Button(onClick = { cardState.dismiss() }, enabled = cardState.canDismiss) { Text("I don't know") }

config = CuteCardConfig(unflipButtonPosition = UnflipButtonPosition.CardTopEnd)

Off by default. AboveCard or CardTopEnd shows a rewind button that flips the card back without dismissing it.

Upgrading? See the changelog for breaking changes and migration notes.

Everything else is in the full documentation:

MIT — see LICENSE for details.

# Build all targets
./gradlew :cutecard:build

# Run common tests
./gradlew :cutecard:allTests

# Build Android artifact
./gradlew :cutecard:assemble

# Build iOS frameworks
./gradlew :cutecard:linkDebugFrameworkIosArm64 \
          :cutecard:linkDebugFrameworkIosSimulatorArm64