Showcase Scaffold

A screen that stands outside the app's shell: sign in, sign up, a password reset, an invitation, a welcome, a page not found. A showcase stands on one side, a picture, a quote or slides, and the form on the other; in a narrow room only the form is left.

import com.pantrixui.components.container.showcase.PantrixShowcaseScaffold

• Showcase. showcase stands beside the form once the scaffold is as wide as showcaseFrom, Expanded by default; showcaseSide says which side it stands on. In a narrower room it is not composed at all: its slides do not turn and its pictures are not loaded. The scaffold goes by its own width, not the window's.
• The showcase's background. showcaseBackground fills the showcase to its edges, a picture or a gradient, under the system's bars; what showcase holds keeps clear of them. scrim deepens the background so that what is written on it reads. The showcase is drawn in its own colours (ShowcaseScaffoldColors).
• Form. content is the form, in the middle of its side and no wider than the style's form width. header stands above it, a heading; footer under it, a way to sign up. formLayout keeps the three together in the middle of the side's height, or apart: the header at the top, the footer at the foot.
• Bars. topBar is a row across the top of the form's side, a logo at its start and a language at its end; bottomBar a row across its foot, a line of copyright. They stay where they are as the form scrolls between them. Where the showcase is not shown, a line parts each bar from the form; a bar with nothing in it takes no room. Each knows whether the showcase is shown (showcaseShown): the logo the showcase carries in a wide window moves to the start of the top bar in a narrow one.
• Frame. With ShowcaseFrame.Adaptive, from Large on, the scaffold is a card in the middle of backdrop; a card with no showcase is the form's width and as tall as what it holds. In a narrower window, and with ShowcaseFrame.Edge at every width, it reaches the window's edges.
• Foldable. At an upright fold the showcase is in one half and the form in the other; the two meet at the fold. At a fold lying across only the form is left.
• What it remembers. The form and the showcase are each composed in one place whatever the layout: what is typed in a field and a slide's place stay as a phone is turned on its side or the window widens into a card. Type in a field and switch the window picker from "Narrow" to "Wide".

Examples

Signing in to an admin panel

An admin panel's sign-in screen. The showcase is navy and reaches the edges (frame = ShowcaseFrame.Edge): the logo at the top, a customer's words in the middle, the figures and the copyright line at the bottom. The language menu stands at the end of the form side's top bar (topBar); the chosen language has a check beside it (PantrixMenuItem's selected). Switch the window picker to "Short" or "Wide": the showcase comes beside the form. In "Narrow" the showcase goes; the logo moves to the start of the top bar and the copyright line into the bottom bar (bottomBar), each looking at whether the showcase is shown (showcaseShown), and a line parts each bar from the form. "Sign in" is enabled once both fields are filled.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { AdminShowcase() },
        title = "Sign in",
        topBar = {
            if (!showcaseShown) Logo()
            Spacer(Modifier.weight(1f))
            LanguageMenu()
        },
        footer = { SignUpInstead() },
        bottomBar = { if (!showcaseShown) Copyright(inABar = true) },
        frame = ShowcaseFrame.Edge,
        // The example is not a window but a box in the page: the room of the system's bars is the app's.
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcase = NAVY, showcaseContent = Color.White),
        tagKey = "admin_sign_in"
    ) {
        SignInForm()
    }
}

@Composable
private fun AdminShowcase() {
    Column(modifier = Modifier.fillMaxSize()) {
        Logo()
        Spacer(Modifier.weight(1f))
        PantrixText(
            text = "“Pantrix changed how we understand our mobile users. The insights we gained helped us increase " +
                "retention by 40 percent in three months.”",
            style = PantrixTheme.typography.title.copy(fontStyle = FontStyle.Italic)
        )
        PantrixText(text = "— Head of product, a game studio", modifier = Modifier.padding(top = 12.dp))
        Spacer(Modifier.weight(1f))
        Row(horizontalArrangement = Arrangement.spacedBy(32.dp)) {
            Figure(value = "10M+", label = "Events tracked")
            Figure(value = "500+", label = "Active projects")
            // How a percentage is written depends on the language; with no letters in it, the translation file does not know it.
            Figure(value = said(tr = "%99,9", en = "99.9%"), label = "Uptime")
        }
        Copyright(modifier = Modifier.padding(top = 24.dp))
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Copyright(
    modifier: Modifier = Modifier,
    inABar: Boolean = false
) {
    PantrixText(
        text = "© 2026 Pantrix. All rights reserved. by @developersancho.",
        modifier = modifier,
        style = PantrixTheme.typography.footnote,
        color = if (inABar) PantrixTheme.colors.textSecondary else Color.Unspecified,
        textAlign = if (inABar) TextAlign.Center else null
    )
}

@Composable
private fun LanguageMenu() {
    var open by remember { mutableStateOf(false) }
    var language by rememberSaveable { mutableStateOf("tr") }
    PantrixMenu(
        visible = open,
        onDismissRequest = { open = false },
        anchor = {
            PantrixIconButton(
                imageVector = DemoIcons.Globe,
                contentDescription = "Language",
                onClick = { open = true },
                tagKey = "language"
            )
        },
        alignment = PopoverAlignment.End,
        tagKey = "language"
    ) {
        PantrixMenuItem(text = "Türkçe", onClick = { language = "tr" }, tagKey = "tr", selected = language == "tr")
        PantrixMenuItem(text = "English", onClick = { language = "en" }, tagKey = "en", selected = language == "en")
    }
}

@Composable
private fun ColumnScope.SignInForm() {
    val report = LocalExampleEvents.current
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    var keep by rememberSaveable { mutableStateOf(false) }
    Heading(title = "Welcome back", line = "Sign in to your account to continue")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(
        state = email,
        modifier = Modifier.fillMaxWidth(),
        label = "Email",
        placeholder = "name@example.com",
        leadingIcon = { PantrixIcon(DemoIcons.Mail, contentDescription = null) },
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
        tagKey = "email"
    )
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(
        state = password,
        modifier = Modifier.fillMaxWidth(),
        label = "Password",
        leadingIcon = { PantrixIcon(DemoIcons.Lock, contentDescription = null) },
        tagKey = "password"
    )
    PantrixLink(
        text = "Forgot your password?",
        onClick = { report("A password reset was asked for") },
        modifier = Modifier.align(Alignment.End).padding(vertical = 12.dp),
        tagKey = "forgot"
    )
    PantrixCheckbox(checked = keep, onCheckedChange = { keep = it }, label = "Remember me", tagKey = "remember")
    Spacer(Modifier.height(16.dp))
    PantrixButton(
        text = "Sign in",
        onClick = { report("Signed in: ${email.text}") },
        enabled = email.text.isNotEmpty() && password.text.isNotEmpty(),
        fullWidth = true,
        shape = PantrixTheme.shapes.full,
        tagKey = "sign_in"
    )
}

@Composable
private fun SignUpInstead() {
    Column(verticalArrangement = Arrangement.spacedBy(16.dp)) {
        PantrixHorizontalDivider(label = "DON'T HAVE AN ACCOUNT?")
        PantrixButton(
            text = "Sign up",
            onClick = {},
            variant = ButtonVariant.Outline,
            fullWidth = true,
            shape = PantrixTheme.shapes.full,
            tagKey = "sign_up"
        )
    }
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val NAVY = Color(0xFF131F4B)

@Composable
private fun Figure(
    value: String,
    label: String
) {
    Column {
        PantrixText(text = value, style = PantrixTheme.typography.headline)
        PantrixText(text = label, style = PantrixTheme.typography.footnote)
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

Signing in beside slides

Slides that turn in the showcase (PantrixCarousel): each a heading and a sentence. With showcaseFrom = WindowWidthClass.Medium the showcase is shown from 600 dp on, in "Medium" too. In "Book" the showcase is in one half and the form in the other, and they meet at the fold; in "Tabletop" only the form is left. In "Narrow" the showcase is not composed at all: its slides do not turn.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { Highlights() },
        title = "Sign in",
        header = { Logo() },
        showcaseFrom = WindowWidthClass.Medium,
        windowInsets = WindowInsets(0),
        tagKey = "slides_sign_in"
    ) {
        ShortSignIn()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Highlights() {
    var page by rememberSaveable { mutableIntStateOf(0) }
    Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
        PantrixCarousel(
            pageCount = HIGHLIGHTS.size,
            currentPage = page,
            onPageChange = { page = it },
            loop = true,
            autoAdvanceMillis = 5000,
            contentDescription = "Highlights",
            tagKey = "highlights"
        ) { index ->
            val (title, line) = HIGHLIGHTS[index]
            Column(modifier = Modifier.fillMaxWidth().padding(24.dp)) {
                PantrixText(text = title, style = PantrixTheme.typography.headline)
                PantrixText(text = line, modifier = Modifier.padding(top = 8.dp))
            }
        }
    }
}

@Composable
private fun ColumnScope.ShortSignIn() {
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    Heading(title = "Sign in", line = "Your team is waiting for you")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "Email", tagKey = "email")
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(state = password, modifier = Modifier.fillMaxWidth(), label = "Password", tagKey = "password")
    Spacer(Modifier.height(24.dp))
    PantrixButton(text = "Sign in", onClick = {}, fullWidth = true, tagKey = "sign_in")
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

private val HIGHLIGHTS = listOf(
    "One design on every platform" to "Android, iOS, desktop and the web are drawn with the same components.",
    "A layout for the window" to "Screens grow simpler in a narrow window and open up as it widens.",
    "Accessible from the start" to "The screen reader, the keyboard and contrast are inside every component."
)

Signing up on a picture

Signing up on a picture. A gradient stands where the picture would: the showcase's background (showcaseBackground) and what the card stands on (backdrop). The showcase is at the end (showcaseSide = ShowcaseSide.End); scrim = ShowcaseScrim.Bottom deepens the background towards its foot so that the line at the bottom reads. The showcase stands in the card with corners of its own (showcaseInset). In "Wide" the layout is a card, which ShowcaseFrame.Adaptive draws from Large on; in "Short" it reaches the edges.

val picture = remember { Brush.linearGradient(SUNSET) }
ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = { PictureCaption() },
        showcaseBackground = { Box(Modifier.fillMaxSize().background(picture)) },
        title = "Sign up",
        header = { Logo() },
        footer = { SignInInstead() },
        backdrop = { Box(Modifier.fillMaxSize().background(picture)) },
        showcaseSide = ShowcaseSide.End,
        scrim = ShowcaseScrim.Bottom,
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcaseContent = Color.White),
        style = ShowcaseScaffoldStyle(showcaseInset = 12.dp),
        tagKey = "sign_up"
    ) {
        SignUpForm()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun ColumnScope.SignInInstead() {
    PantrixLink(
        text = "Have an account? Sign in",
        onClick = {},
        modifier = Modifier.align(Alignment.CenterHorizontally),
        tagKey = "sign_in_instead"
    )
}

@Composable
private fun PictureCaption() {
    Column(modifier = Modifier.fillMaxSize()) {
        Spacer(Modifier.weight(1f))
        PantrixText(text = "Bring your team together", style = PantrixTheme.typography.headline)
        PantrixText(text = "Your product, your data and your team in one place.", modifier = Modifier.padding(top = 8.dp))
    }
}

@Composable
private fun ColumnScope.SignUpForm() {
    val name = rememberTextFieldState()
    val email = rememberTextFieldState()
    val password = rememberTextFieldState()
    Heading(title = "Create an account", line = "Get started in a few steps")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = name, modifier = Modifier.fillMaxWidth(), label = "Name", tagKey = "name")
    Spacer(Modifier.height(16.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "Email", tagKey = "email")
    Spacer(Modifier.height(16.dp))
    PantrixSecureTextField(state = password, modifier = Modifier.fillMaxWidth(), label = "Password", tagKey = "password")
    Spacer(Modifier.height(24.dp))
    PantrixButton(text = "Sign up", onClick = {}, fullWidth = true, tagKey = "sign_up")
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val SUNSET = listOf(Color(0xFFF59E0B), Color(0xFFDB2777), Color(0xFF4C1D95))

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

Password reset

A screen with no showcase: the form alone. In "Wide" the form is a card of its own width in the middle of the backdrop; in a narrower window it reaches the edges. footer is the way back to signing in.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        title = "Password reset",
        header = { Logo() },
        footer = {
            PantrixLink(
                text = "Back to sign in",
                onClick = {},
                modifier = Modifier.align(Alignment.CenterHorizontally),
                tagKey = "back_to_sign_in"
            )
        },
        windowInsets = WindowInsets(0),
        tagKey = "reset"
    ) {
        ResetForm()
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun ColumnScope.ResetForm() {
    val email = rememberTextFieldState()
    var sent by rememberSaveable { mutableStateOf(false) }
    Heading(title = "Reset your password", line = "We will send a link to your email address")
    Spacer(Modifier.height(24.dp))
    PantrixTextField(state = email, modifier = Modifier.fillMaxWidth(), label = "Email", tagKey = "email")
    Spacer(Modifier.height(24.dp))
    PantrixButton(
        text = if (sent) "Link sent" else "Send the link",
        onClick = { sent = true },
        enabled = email.text.isNotEmpty() && !sent,
        fullWidth = true,
        tagKey = "send"
    )
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

A page not found

A page not found, with formLayout = ShowcaseFormLayout.Spread: the logo at the top, the words in the middle of the side, the help link under them and the copyright line in the bottom bar (bottomBar). The showcase is a large "404" in the theme's neutral colour: a colour that is the theme's brings the colour of what is written on it with it.

ShowcaseExampleFrame {
    PantrixShowcaseScaffold(
        showcase = {
            PantrixText(
                text = "404",
                modifier = Modifier.align(Alignment.Center),
                style = PantrixTheme.typography.display
            )
        },
        title = "Page not found",
        header = { Logo() },
        footer = { PantrixLink(text = "Help centre", onClick = {}, tagKey = "help") },
        bottomBar = { Copyright(inABar = true) },
        formLayout = ShowcaseFormLayout.Spread,
        windowInsets = WindowInsets(0),
        colors = ShowcaseScaffoldColors(showcase = PantrixTheme.colors.neutral.container),
        tagKey = "not_found"
    ) {
        PantrixText(
            text = "The page you are looking for is not here",
            style = PantrixTheme.typography.headline,
            role = TextRole.Heading(level = 1)
        )
        PantrixText(
            text = "The address may be mistyped, or the page may have moved.",
            color = PantrixTheme.colors.textSecondary
        )
    }
}

@Composable
private fun Logo() {
    Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
        Box(
            modifier = Modifier
                .size(40.dp)
                .background(PantrixTheme.colors.primary.color, PantrixTheme.shapes.md),
            contentAlignment = Alignment.Center
        ) {
            PantrixIcon(DemoIcons.Chart, contentDescription = null, tint = PantrixTheme.colors.primary.onColor)
        }
        PantrixText(text = "Pantrix", style = PantrixTheme.typography.title)
    }
}

@Composable
private fun Copyright(
    modifier: Modifier = Modifier,
    inABar: Boolean = false
) {
    PantrixText(
        text = "© 2026 Pantrix. All rights reserved. by @developersancho.",
        modifier = modifier,
        style = PantrixTheme.typography.footnote,
        color = if (inABar) PantrixTheme.colors.textSecondary else Color.Unspecified,
        textAlign = if (inABar) TextAlign.Center else null
    )
}

@Composable
private fun ColumnScope.Heading(
    title: String,
    line: String
) {
    PantrixText(
        text = title,
        modifier = Modifier.align(Alignment.CenterHorizontally),
        style = PantrixTheme.typography.headline,
        role = TextRole.Heading(level = 1)
    )
    PantrixText(
        text = line,
        modifier = Modifier.align(Alignment.CenterHorizontally).padding(top = 8.dp),
        color = PantrixTheme.colors.textSecondary
    )
}

@Composable
private fun ShowcaseExampleFrame(content: @Composable () -> Unit) {
    PantrixSurface(
        modifier = Modifier.fillMaxWidth().height(SHOWCASE_EXAMPLE_HEIGHT),
        border = PantrixTheme.colors.divider
    ) {
        Box { content() }
    }
}

private val SHOWCASE_EXAMPLE_HEIGHT = 640.dp

API

modifier

A screen that stands outside the app's shell: sign in, sign up, a password reset, an invitation, a welcome, a page not found. A showcase stands on one side, a picture, a quote or slides, and the form on the other; in a narrow room only the form is left.

ShowcaseScaffoldStyle

PantrixShowcaseScaffold's geometry: how the room is shared between the showcase and the form, how wide the form is, the rooms inside each side, and the card it stands as in a wide window.

ShowcaseScaffoldColors

What PantrixShowcaseScaffold is painted with: a colour that is set is used, and one that is left out is the theme's.

Accessibility

• Room and keyboard. The scaffold stands outside the shell, so it keeps clear of the system's bars and the display's cut-out itself (windowInsets). Only the form's side scrolls; it ends above the keyboard, and a field that takes the focus stays in view.
• The window's title, screen reader, event and tags. title is not drawn: it is the window's and the tab's name, and the screen's name for a screen reader. The form is read first, and takes the focus first, wherever the showcase stands. A screen given a tagKey reports a show event each time it opens; what is put in it is inside TestScope(tagKey).