Showcase Layout Compose

https://github.com/tahaak67/showcaselayoutcompose
Admin
Showcase Layout Compose is a Kotlin Multiplatform library for creating beautiful animated showcase...
Tokens:8,214
Snippets:69
Trust Score:8.3
License:Apache-2.0
Update:5 months ago
Show doc for...
Tokens:
Raw
### Implement ShowcaseLayout for Onboarding

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Use ShowcaseLayout to create a full-screen overlay for showcasing app features. Configure its appearance, animation, and behavior. Targets for showcasing must have their index starting at 1 and incrementing by 1.

```kotlin
@Composable
fun OnboardingScreen() {
    var isShowcasing by remember { mutableStateOf(true) }

    ShowcaseLayout(
        isShowcasing = isShowcasing,
        isDarkLayout = false,               // true = white overlay (for dark UIs)
        initIndex = 0,                      // 0 = show greeting first; 1 = skip greeting
        animationDuration = 800,            // ms for transition between targets
        onFinish = { isShowcasing = false },
        greeting = ShowcaseMsg(
            text = "Welcome! Let us show you around.",
            textStyle = TextStyle(color = Color.White, textAlign = TextAlign.Center)
        ),
        lineThickness = 4.dp,
        targetShape = TargetShape.ROUNDED_RECTANGLE,
        cornerRadius = 12.dp
    ) {
        Column(modifier = Modifier.fillMaxSize().padding(16.dp)) {
            // index must start at 1 and increment by 1
            Text(
                modifier = Modifier.showcase(
                    index = 1,
                    message = ShowcaseMsg(
                        "This is your profile section.",
                        textStyle = TextStyle(color = Color.White),
                        msgBackground = Color(0xFF1A237E),
                        roundedCorner = 8.dp,
                        gravity = Gravity.Bottom
                    )
                ),
                text = "Profile"
            )
            Button(
                modifier = Modifier.showcase(
                    index = 2,
                    message = ShowcaseMsg(
                        "Tap here to start a new session.",
                        textStyle = TextStyle(color = Color.White),
                        msgBackground = Color(0xFF388E3C),
                        roundedCorner = 8.dp,
                        gravity = Gravity.Top
                    )
                ),
                onClick = {} 
            ) { Text("New Session") }
        }
    }
}
```

--------------------------------

### showcaseItem

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Highlights a single registered target programmatically on demand, useful for guiding users to specific UI elements without starting a full tour.

```APIDOC
## showcaseItem — single-item showcase

`showcaseItem(index)` is a suspend function on `ShowcaseScope` that highlights a single registered target programmatically, without running the full sequential tour. Must be called from a coroutine.

```kotlin
ShowcaseLayout(isShowcasing = false, onFinish = {}) {
    val scope = rememberCoroutineScope()

    Button(
        modifier = Modifier.showcase(index = 1, message = ShowcaseMsg("This is your inbox!")),
        onClick = {} // Button action
    ) { Text("Inbox") }

    Button(
        onClick = {
            scope.launch {
                showcaseItem(1)   // highlight only index 1 on demand
            }
        }
    ) { Text("Show hint") }
}
```
```

--------------------------------

### Registering Targets with Modifier.showcase

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Use Modifier.showcase to register composable targets within a ShowcaseLayout or TargetShowcaseLayout. Indices must start at 1 and increment sequentially. An optional ShowcaseMsg can be attached.

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.material3.Icon
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import com.github.tahaak67.showcaselib.ShowcaseLayout
import com.github.tahaak67.showcaselib.ShowcaseMsg
import com.github.tahaak67.showcaselib.showcase

// Register multiple items with sequential indices inside any ShowcaseLayout/TargetShowcaseLayout
ShowcaseLayout(isShowcasing = isShowcasing, onFinish = { isShowcasing = false }) {
    Row(modifier = Modifier.fillMaxWidth()) {
        Text(
            modifier = Modifier.showcase(index = 1, message = ShowcaseMsg("Step 1: Read the title")),
            text = "Dashboard"
        )
        Icon(
            modifier = Modifier.showcase(index = 2, message = ShowcaseMsg("Step 2: Check the icon")),
            imageVector = Icons.Default.Settings,
            contentDescription = null
        )
    }
    Button(
        modifier = Modifier.showcase(index = 3, message = ShowcaseMsg("Step 3: Press this button")),
        onClick = {} // TODO: implement click action
    ) { Text("Go") }
}
```

--------------------------------

### Apply Showcase Modifier to Composable

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Use the Modifier.showcase() to apply a showcase effect to a specific composable. Assign a unique index starting from 1 and provide a ShowcaseMsg for the message and styling.

```kotlin
Text(
    modifier = Modifier.showcase(
        // should start with 1 and increment with 1 for each time you use Modifier.showcase()
        index = 1,
        message = ShowcaseMsg(
            "This is a showcase message",
            textStyle = TextStyle(color = Color.White)
        )
    ),
    text = "ShowcaseLayout Test 1"
)
```

--------------------------------

### Implement ShowcaseLayout as Root Composable

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Create a ShowcaseLayout and place all your screen composables inside it. Control the showcasing state with the isShowcasing boolean and handle the completion of the showcase sequence via the onFinish callback.

```kotlin
var isShowcasing by remember {
    mutableStateOf(true)
}
ShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false }
) {
    // screen content here
    Column(
        modifier = Modifier
            .fillMaxSize()
    ) {
        Text(text = "ShowcaseLayout Test 1")
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = "ShowcaseLayout Test 2")
        Spacer(modifier = Modifier.height(16.dp))
        Text(text = "ShowcaseLayout Test 3")
    }
}
```

--------------------------------

### Use TargetShowcaseLayout

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Demonstrates how to implement TargetShowcaseLayout to highlight UI elements with customizable shapes. Ensure `isShowcasing` is managed to control the showcase's visibility.

```kotlin
var isShowcasing by remember { mutableStateOf(true) }

TargetShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    targetShape = TargetShape.ROUNDED_RECTANGLE, // CIRCLE, RECTANGLE, or ROUNDED_RECTANGLE
    cornerRadius = 8.dp, // Only used with ROUNDED_RECTANGLE
    animateToNextTarget = true, // Smooth animation between targets
    greeting = ShowcaseMsg(
        "Welcome to TargetShowcaseLayout!",
        textStyle = TextStyle(color = Color.White)
    )
) {
    // Your UI content here
    Column {
        Text(
            modifier = Modifier.showcase(
                index = 1,
                message = ShowcaseMsg(
                    "This element is highlighted with TargetShowcaseLayout",
                    textStyle = TextStyle(color = Color.White)
                )
            ),
            text = "Target Showcase Example"
        )
    }
}
```

--------------------------------

### ShowcaseMsg Configuration

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Demonstrates how to configure the message display for showcased items, including text, styling, background, positioning, arrow, and animations.

```APIDOC
## ShowcaseMsg

`ShowcaseMsg` is a data class that configures the message displayed when a target is being showcased. It supports plain strings, `AnnotatedString`, text styling, a colored background card, message positioning (`Gravity`), an optional arrow, and enter/exit animations.

```kotlin
ShowcaseMsg(
    text = buildAnnotatedString {
        append("Track your ")
        pushStyle(SpanStyle(fontWeight = FontWeight.Bold, color = Color(0xFF827717)))
        append("daily usage")
        pop()
        append(" from this screen.")
    },
    textStyle = TextStyle(color = Color(0xFF1A1A1A), fontSize = 14.sp),
    msgBackground = Color(0xFFFFF9C4),      // yellow card background
    roundedCorner = 10.dp,                  // card corner radius
    gravity = Gravity.Bottom,               // Top | Bottom | Auto
    arrow = Arrow(
        targetFrom = Side.Top,              // arrow points at the target from this direction
        color = Color(0xFFFFF9C4),
        head = Head.TRIANGLE,               // TRIANGLE | CIRCLE | SQUARE | ROUND_SQUARE
        headSize = 28f,
        animSize = true                     // animate head from 0 → headSize on enter
    ),
    enterAnim = MsgAnimation.FadeInOut(duration = 400),
    exitAnim = MsgAnimation.FadeInOut(duration = 300)
)
```
```

--------------------------------

### TargetShowcaseLayout Parameters

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Illustrates the parameters for TargetShowcaseLayout, including common parameters shared with ShowcaseLayout and specific ones like `targetShape` and `cornerRadius`.

```kotlin
TargetShowcaseLayout(
    // Common parameters (same as ShowcaseLayout)
    isShowcasing = isShowcasing,
    isDarkLayout = false,
    initIndex = 0,
    animationDuration = 1000,
    onFinish = { isShowcasing = false },
    greeting = ShowcaseMsg(
        "Welcome to TargetShowcaseLayout!",
        textStyle = TextStyle(color = Color.White)
    ),
    lineThickness = 5.dp,

    // TargetShowcaseLayout specific parameters
    targetShape = TargetShape.CIRCLE, // CIRCLE, RECTANGLE, or ROUNDED_RECTANGLE
    cornerRadius = 8.dp, // Only used with ROUNDED_RECTANGLE
    animateToNextTarget = true // Smooth animation between targets, otherwise shrink and expand on each target
) {
    // Your UI content here
}
```

--------------------------------

### ShowcaseLayout with Annotated String Greeting and Animation Duration

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Configure ShowcaseLayout with an annotated string for the greeting and specify the animation duration for transitions.

```kotlin
val greetingString = buildAnnotatedString {
    append("Welcome to ")
    pushStyle(SpanStyle(fontWeight = FontWeight.Bold))
    append("My App")
    pop()
    append(", let's take you on a quick tour!")
    pushStyle(SpanStyle(fontWeight = FontWeight.Bold))
    append("\n Tap anywhere")
    pop()
    append(" to continue")
}
ShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    isDarkLayout = isSystemInDarkTheme(),
    greeting = ShowcaseMsg(
        text = greetingString, // You can use an annotated string or a normal string here
        textStyle = TextStyle(color = Color.White, textAlign = TextAlign.Center)
    ),
    animationDuration = 1000
)
```

--------------------------------

### ShowcaseLayout with Greeting Message

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Use ShowcaseLayout to display a customizable greeting message. Configure the message text and text style.

```kotlin
ShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    isDarkLayout = isSystemInDarkTheme(),
    greeting = ShowcaseMsg(
        "Welcome to my app, lets take you on a quick tour!, tap anywhere to continue",
        textStyle = TextStyle(color = Color.White)
    )
)
```

--------------------------------

### Configure Message Animations

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Sets the enter and exit animations for the showcase message. Supports fade-in/out effects with customizable durations or no animation.

```kotlin
// FadeInOut — default, animates text and background opacity
ShowcaseMsg(
    text = "Fade in smoothly",
    enterAnim = MsgAnimation.FadeInOut(duration = 600),  // 600ms fade in
    exitAnim = MsgAnimation.FadeInOut(duration = 300)    // 300ms fade out
)
```

```kotlin
// None — message appears/disappears instantly
ShowcaseMsg(
    text = "No animation",
    enterAnim = MsgAnimation.None,
    exitAnim = MsgAnimation.None
)
```

--------------------------------

### showGreeting

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Displays a full-screen greeting overlay with a custom message, ideal for announcements or contextual tips without interacting with showcase targets.

```APIDOC
## showGreeting — standalone greeting

`showGreeting(message)` is a suspend function on `ShowcaseScope` that displays a full-screen greeting overlay with a custom message, without advancing through any showcase targets. Useful for contextual tips or announcements.

```kotlin
ShowcaseLayout(isShowcasing = false, onFinish = {}) {
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            showGreeting(
                ShowcaseMsg(
                    text = "👋 You've unlocked a new feature!\nSwipe left to explore.",
                    textStyle = TextStyle(color = Color.White, textAlign = TextAlign.Center)
                )
            )
        }
    }) {
        Text("What's new?")
    }
}
```
```

--------------------------------

### MsgAnimation Configuration

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Defines the enter and exit animations for the message text and background, offering fade-in/out effects or instant appearance.

```APIDOC
## MsgAnimation

`MsgAnimation` is a sealed class controlling the enter and exit animations of the message text and background. Two options are available: `FadeInOut` (animates alpha) and `None` (instant snap).

```kotlin
// FadeInOut — default, animates text and background opacity
ShowcaseMsg(
    text = "Fade in smoothly",
    enterAnim = MsgAnimation.FadeInOut(duration = 600),  // 600ms fade in
    exitAnim = MsgAnimation.FadeInOut(duration = 300)    // 300ms fade out
)

// None — message appears/disappears instantly
ShowcaseMsg(
    text = "No animation",
    enterAnim = MsgAnimation.None,
    exitAnim = MsgAnimation.None
)
```
```

--------------------------------

### TargetShowcaseLayout with Animated Highlights

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Use TargetShowcaseLayout to draw animated donut-shaped highlights around targets. Configure animation, shape, and transitions between targets.

```kotlin
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Add
import androidx.compose.material.icons.filled.Notifications
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.github.tahaak67.showcaselib.TargetShape
import com.github.tahaak67.showcaselib.TargetShowcaseLayout
import com.github.tahaak67.showcaselib.ShowcaseMsg

@Composable
fun FeatureTourScreen() {
    var isShowcasing by remember { mutableStateOf(true) }

    TargetShowcaseLayout(
        isShowcasing = isShowcasing,
        isDarkLayout = false,
        initIndex = 0,
        animationDuration = 1000,
        onFinish = { isShowcasing = false },
        greeting = ShowcaseMsg(
            "Welcome to the new features!",
            textStyle = TextStyle(color = Color.White, textAlign = TextAlign.Center)
        ),
        lineThickness = 5.dp,
        targetShape = TargetShape.CIRCLE,           // CIRCLE | RECTANGLE | ROUNDED_RECTANGLE
        cornerRadius = 8.dp,                        // used only with ROUNDED_RECTANGLE
        animateToNextTarget = true                  // smooth pan vs shrink-expand
    ) {
        Column(modifier = Modifier.fillMaxSize()) {
            IconButton(
                modifier = Modifier.showcase(
                    index = 1,
                    message = ShowcaseMsg(
                        "Tap the bell to view notifications.",
                        textStyle = TextStyle(color = Color.White)
                    )
                ),
                onClick = {} // TODO: implement click action
            ) { Icon(Icons.Default.Notifications, contentDescription = null) }

            FloatingActionButton(
                modifier = Modifier.showcase(
                    index = 2,
                    message = ShowcaseMsg(
                        "Create something new here!",
                        textStyle = TextStyle(color = Color.Black)
                    )
                ),
                onClick = {} // TODO: implement click action
            ) { Icon(Icons.Default.Add, contentDescription = null) }
        }
    }
}
```

--------------------------------

### ShowcaseLayout with Dark Mode

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Shows how to use the `isDarkLayout` parameter in ShowcaseLayout to adapt the showcase view to the system's dark theme. This is useful for maintaining UI consistency in dark mode applications.

```kotlin
ShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    isDarkLayout = isSystemInDarkTheme()
)
```

--------------------------------

### ShowcaseMsg Customization

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Customize the ShowcaseMsg with various parameters including text, style, background, corner radius, gravity, arrow, and animations.

```kotlin
ShowcaseMsg(
    // the message text to be displayed
    "Track your phone usage from here",
    // text style for the message text
    textStyle = TextStyle(color = Color(0xFF827717)),
    // a background color for the text
    msgBackground = MaterialTheme.colors.primary,
    // control corner radius of msgBackground
    roundedCorner = 15.dp,
    // determine if the message will be displayed above or below the target composable
    gravity = Gravity.Bottom,
    // adds an arrow to be displayed with the message
    arrow = Arrow(color = MaterialTheme.colors.primary),
    // starting from version 1.0.3 ShowcaseMsg will have an enter and exit animation of FadeInOut by default you can disable it by using MsgAnimation.None
    enterAnim = MsgAnimation.FadeInOut(),
    exitAnim = MsgAnimation.FadeInOut()
)
```

--------------------------------

### Add Showcase Layout Compose Dependency

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Add this dependency to your module's build.gradle file to include the library in your project. Ensure you are using version 1.0.5-alpha-8 or higher for Compose Multiplatform support.

```kotlin
implementation("ly.com.tahaben:showcase-layout-compose:1.0.9")
```

--------------------------------

### Configure TargetShape in Showcase Layout

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Controls the cutout/highlight shape for ShowcaseLayout. CIRCLE, RECTANGLE, and ROUNDED_RECTANGLE are available options.

```kotlin
ShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    targetShape = TargetShape.CIRCLE           // CIRCLE | RECTANGLE | ROUNDED_RECTANGLE
) { /* content */ }
```

--------------------------------

### Configure Showcase Message

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Defines the message content, styling, background, positioning, and optional arrow for a showcase tooltip. Supports rich text, custom colors, and animations.

```kotlin
ShowcaseMsg(
    text = buildAnnotatedString {
        append("Track your ")
        pushStyle(SpanStyle(fontWeight = FontWeight.Bold, color = Color(0xFF827717)))
        append("daily usage")
        pop()
        append(" from this screen.")
    },
    textStyle = TextStyle(color = Color(0xFF1A1A1A), fontSize = 14.sp),
    msgBackground = Color(0xFFFFF9C4),      // yellow card background
    roundedCorner = 10.dp,                  // card corner radius
    gravity = Gravity.Bottom,               // Top | Bottom | Auto
    arrow = Arrow(
        targetFrom = Side.Top,              // Top | Bottom | Left | Right
        color = Color(0xFFFFF9C4),
        head = Head.TRIANGLE,               // TRIANGLE | CIRCLE | SQUARE | ROUND_SQUARE
        headSize = 28f,
        animSize = true                     // animate head from 0 → headSize on enter
    ),
    enterAnim = MsgAnimation.FadeInOut(duration = 400),
    exitAnim = MsgAnimation.FadeInOut(duration = 300)
)
```

--------------------------------

### Show a Greeting Message Manually

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

You can also manually display a greeting message using showGreeting, passing a ShowcaseMsg object with the desired text and styling. This also requires a rememberCoroutineScope.

```kotlin
val coroutineScope = rememberCoroutineScope()

coroutineScope.launch{
    showGreeting(
        ShowcaseMsg(
        text = "I like compose bro <3",
        textStyle = TextStyle(color = Color.White)
        )
    )
}
```

--------------------------------

### Register Event Listener for Logging

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Enable logging of showcase layout events by registering a listener. This is useful for debugging and understanding the flow of showcase interactions. Logs are disabled by default.

```kotlin
registerEventListener(object: ShowcaseEventListener {
    override fun onEvent(level: Level, event: String) {
        println("$level: $event")
    }
})
```

--------------------------------

### Arrow Customization for ShowcaseMsg

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Configure the Arrow for ShowcaseMsg to specify its position, curvature, and whether it has a head.

```kotlin
arrow = Arrow(
    // From where the arrow will point at the target, can be: Top, Bottom, Right or Left
    targetFrom = Side.Top,
    // animates a curved arrow from the message to the target(if true targetFrom is ignored)
    // might not work properly depending on the location of the target on the screen
    curved = true,
    // if false then just draw a line (an arrow without head :P)
    hasHead = false,
    // color of the arrow
    color = MaterialTheme.colors.primary
)
```

--------------------------------

### Display Standalone Greeting Message

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Uses `showGreeting(message)` within a coroutine to display a full-screen overlay with a custom message. Useful for announcements or contextual tips.

```kotlin
ShowcaseLayout(isShowcasing = false, onFinish = {}) {
    val scope = rememberCoroutineScope()

    Button(onClick = {
        scope.launch {
            showGreeting(
                ShowcaseMsg(
                    text = "👋 You've unlocked a new feature!\nSwipe left to explore.",
                    textStyle = TextStyle(color = Color.White, textAlign = TextAlign.Center)
                )
            )
        }
    }) {
        Text("What's new?")
    }
}
```

--------------------------------

### Customize Arrow Head Style and Animation

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

Configure the arrow head style, size, and animation. Supports CIRCLE, SQUARE, ROUND_SQUARE, and TRIANGLE head types. Set `animSize` to true to animate the head's size.

```kotlin
showcase(
    index = 5, 
    message = ShowcaseMsg(
        "A Circle !",
        textStyle = TextStyle(
            color = Color(0xFF827717),
            fontSize = 18.sp
        ),
        msgBackground = MaterialTheme.colors.primary,
        gravity = Gravity.Top,
        arrow = Arrow(
            color = MaterialTheme.colors.primary,
            targetFrom = Side.Top,
            head = Head.CIRCLE, // head style
            headSize = 30f, // the size of the circle
            animSize = true // animates the arrow head size
        )
    )
)
```

--------------------------------

### Configure TargetShape and Corner Radius in TargetShowcaseLayout

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Sets the cutout/highlight shape and corner radius for TargetShowcaseLayout. ROUNDED_RECTANGLE requires a cornerRadius parameter.

```kotlin
TargetShowcaseLayout(
    isShowcasing = isShowcasing,
    onFinish = { isShowcasing = false },
    targetShape = TargetShape.ROUNDED_RECTANGLE,
    cornerRadius = 16.dp
) { /* content */ }
```

--------------------------------

### Register Event Listener for Showcase Layout

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Attaches a listener to receive internal log events. Registering a listener re-enables logs which are disabled by default.

```kotlin
ShowcaseLayout(isShowcasing = isShowcasing, onFinish = { isShowcasing = false }) {
    registerEventListener(object : ShowcaseEventListener {
        override fun onEvent(level: Level, event: String) {
            when (level) {
                Level.INFO    -> println("INFO: $event")
                Level.DEBUG   -> println("DEBUG: $event")
                Level.VERBOSE -> println("VERBOSE: $event")
            }
        }
    })

    Text(
        modifier = Modifier.showcase(1, ShowcaseMsg("Hello!")),
        text = "Logged Target"
    )
}
```

--------------------------------

### Legacy Showcase Composable Wrapper

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

The Showcase composable is a legacy alternative to Modifier.showcase, wrapping content instead of using a modifier. It functions identically under the hood.

```kotlin
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Card
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.dp
import com.github.tahaak67.showcaselib.Showcase
import com.github.tahaak67.showcaselib.ShowcaseLayout
import com.github.tahaak67.showcaselib.ShowcaseMsg

ShowcaseLayout(isShowcasing = isShowcasing, onFinish = { isShowcasing = false }) {
    Showcase(
        index = 1,
        message = ShowcaseMsg(
            text = "This card shows your statistics.",
            textStyle = TextStyle(color = Color.White),
            msgBackground = Color(0xFF6A1B9A),
            roundedCorner = 12.dp
        )
    ) {
        Card(modifier = Modifier.fillMaxWidth().padding(16.dp)) {
            Text("Statistics", modifier = Modifier.padding(16.dp))
        }
    }
}
```

--------------------------------

### Programmatically Highlight Single Target

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Uses `showcaseItem(index)` within a coroutine to programmatically highlight a specific target by its index. Requires `rememberCoroutineScope`.

```kotlin
ShowcaseLayout(isShowcasing = false, onFinish = {}) {
    val scope = rememberCoroutineScope()

    Button(
        modifier = Modifier.showcase(index = 1, message = ShowcaseMsg("This is your inbox!")),
        onClick = {} // Target button
    ) { Text("Inbox") }

    Button(
        onClick = {
            scope.launch {
                showcaseItem(1)   // highlight only index 1 on demand
            }
        }
    ) { Text("Show hint") }
}
```

--------------------------------

### CSS Loading Indicator Styles

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/composeApp/src/wasmJsMain/resources/index.html

Defines the styles for a full-screen loading indicator and a spinning animation. Use this CSS to create a visual cue while content is loading.

```css
#loading-indicator { display: flex; justify-content: center; align-items: center; width: 100%; height: 100vh; background-color: #f0f0f0; position: fixed; top: 0; left: 0; z-index: 9999; }
.spinner { border: 4px solid rgba(0, 100, 105, 1); 
/* Color set to 0xFF006971 */
border-left-color: rgba(0, 100, 105, 0.1);
border-radius: 50%;
width: 50px;
height: 50px;
animation: spin 1s linear infinite;
}
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
```

--------------------------------

### Set Message Gravity to Top

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Configures the message box to be drawn above the highlighted target using Gravity.Top.

```kotlin
ShowcaseMsg(
    text = "See the details above.",
    gravity = Gravity.Top     // Top | Bottom | Auto (default)
)
```

--------------------------------

### Showcase a Single Item Manually

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/README.md

After attaching the index and showcase message to your components, you can manually trigger the showcase for a specific item using showcaseItem(i), where i is the item's index. This requires a rememberCoroutineScope.

```kotlin
val coroutineScope = rememberCoroutineScope()

coroutineScope.launch{
    showcaseItem(1)
}
```

--------------------------------

### Set Message Gravity to Bottom

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Configures the message box to be drawn below the highlighted target using Gravity.Bottom.

```kotlin
ShowcaseMsg(
    text = "Continue below.",
    gravity = Gravity.Bottom
)
```

--------------------------------

### Arrow Configuration

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Customizes the directional arrow from the message box to the highlighted target, supporting different shapes, curvature, and animations.

```APIDOC
## Arrow

`Arrow` customizes the directional arrow drawn from the message box to the highlighted target. Supports straight lines, curved bezier paths, and four head shapes. Arrow drawing is animated.

```kotlin
// Straight arrow from below the message card pointing up to the target
Arrow(
    targetFrom = Side.Top,      // arrow points at the target from this direction
    curved = false,             // true = quadratic bezier from card to target
    animationDuration = 800,    // ms to draw the arrow line
    head = Head.CIRCLE,         // TRIANGLE | CIRCLE | SQUARE | ROUND_SQUARE | null (no head)
    headSize = 30f,             // radius / half-size of the head shape
    color = Color(0xFF1976D2),  // arrow and head color
    animSize = true             // animate head size from 0 on enter
)

// Curved arrow pointing from right side of card to target
Arrow(
    targetFrom = Side.Right,
    curved = true,
    head = Head.ROUND_SQUARE,
    headSize = 20f,
    color = MaterialTheme.colorScheme.primary,
    animSize = false
)
```
```

--------------------------------

### Customize Arrow Appearance

Source: https://context7.com/tahaak67/showcaselayoutcompose/llms.txt

Configures the appearance and animation of the arrow connecting the message card to the target. Supports straight or curved paths and various head shapes.

```kotlin
// Straight arrow from below the message card pointing up to the target
Arrow(
    targetFrom = Side.Top,      // arrow points at the target from this direction
    curved = false,             // true = quadratic bezier from card to target
    animationDuration = 800,    // ms to draw the arrow line
    head = Head.CIRCLE,         // TRIANGLE | CIRCLE | SQUARE | ROUND_SQUARE | null (no head)
    headSize = 30f,             // radius / half-size of the head shape
    color = Color(0xFF1976D2),  // arrow and head color
    animSize = true             // animate head size from 0 on enter
)
```

```kotlin
// Curved arrow pointing from right side of card to target
Arrow(
    targetFrom = Side.Right,
    curved = true,
    head = Head.ROUND_SQUARE,
    headSize = 20f,
    color = MaterialTheme.colorScheme.primary,
    animSize = false
)
```

--------------------------------

### JavaScript to Hide Loading Indicator

Source: https://github.com/tahaak67/showcaselayoutcompose/blob/main/composeApp/src/wasmJsMain/resources/index.html

Hides the loading indicator element once the application is fully loaded. This script should be placed in a way that it executes after the 'app-loaded' event is dispatched.

```javascript
document.addEventListener("app-loaded", function() { document.getElementById("loading-indicator").style.display = "none"; });
```
Tokens:
Raw