One codebase. Four platforms. Each one at home.

Pantrix UI is a design system for Compose Multiplatform: 100 components on Compose Foundation, with no Material dependency, and one theme that follows the conventions of Android, iOS, the desktop and the web.

›

implementation("com.pantrixui:components:0.1.0-alpha03")

platform = PlatformType.Ios

iOS: touch targets of 44pt, rounded buttons that press in to 97%, fields 44pt tall.

100

components

Kotlin targets, from Android to Wasm

platform presets in one theme

languages, right-to-left included

Material dependencies

ONE THEME, FOUR SETS OF MANNERS

The same button is not the same everywhere.

A theme knows the platform it runs on. Touch targets, the shape of a button, the way it answers a press and the height of a field follow that platform, and PantrixTheme(platform = …) asks for another one in a preview or a test.

WRITE IT ONCE

Kotlin you would write anyway.

Every component takes a state, a label and a tagKey. The tag finds it in a test and in a Maestro flow; the label is read by the screen reader; the rest comes from the theme.

Text areas that grow, then scroll, with a count of what may still be typed

A tap outside puts the keyboard away on iOS

Tags like TextArea_comment, never from visible text

commonMain
@Composable
fun ReviewForm(onSend: (String) -> Unit) {
    val comment = rememberTextFieldState()
    PantrixTheme(preset = PantrixPreset) {
        Column(Modifier.clearFocusOnTap(), verticalArrangement = Arrangement.spacedBy(16.dp)) {
            PantrixTextArea(
                state = comment,
                label = stringResource(Res.string.comment),
                maxLength = 280,
                tagKey = "comment"
            )
            PantrixButton(
                text = stringResource(Res.string.send),
                onClick = { onSend(comment.text.toString()) },
                tagKey = "send"
            )
        }
    }
}

WHAT COMES WITH IT

The problems every Compose Multiplatform app meets, solved once.

FOR CODING ASSISTANTS

Your assistant writes Pantrix, not Material.

The documents are written from the library's own sources at every build. An assistant reads them through the MCP server, the skill or llms.txt, and every page here has a "Copy page" button for the rest.

MCP server

Skill

llms.txt

pantrix-ui.json

Terminal
$ claude mcp add -t http pantrix-ui https://pantrixui.com/mcp

> A comment box under each order, 280 characters at most
  search_components("comment, several lines")
  get_component("PantrixTextArea")
  PantrixTextArea(state = comment, label = …, maxLength = 280, tagKey = "comment")

YOUR BRAND

A brand's look in one DesignPreset.

Colours for light and dark, the type scale, the shapes and any component's overrides. This site wears one called Pantrix. Build your own in the theme builder and take it away as Kotlin.

primary

#2264FF

primary.container

#ECF3FE

textPrimary

#05070A

success

#1A8556

warning

#B95D15

danger

#C42A55

Pantrix blue, 50 to 700

Start with one line in Gradle.

Android 11 and newer, iOS, the desktop's JVM and the browser's Wasm and JavaScript, from one source set.

Pantrix UI

A design system and adaptive UI library for Compose Multiplatform.

Docs

Components

Resources

Apache License 2.0

English