Jenga

Jenga is a Kotlin Multiplatform + Compose Multiplatform design system: brandable design tokens and ready-made Jenga* blocks that render identically on Android, iOS, Desktop (JVM) and the Web (Wasm). Jenga is Swahili for "to build": you build screens out of Jenga blocks rather than raw Compose or Material primitives.

The public API is entirely JengaTheme.* (tokens) and Jenga* (blocks). Material 3 is bridged internally and never leaks into the surface.

Getting started

Wrap your UI once in io.github.joelkanyi.jenga.theme.JengaTheme, then read tokens and use blocks below it:

JengaTheme(
    content = {
        JengaScaffold(
            topBar = {
                JengaTopAppBar(
                    title = "Events",
                )
            },
            content = { padding ->
                JengaStack(
                    modifier = Modifier.padding(
                        paddingValues = padding,
                    ),
                    content = {
                        JengaText(
                            text = "Tonight",
                            style = JengaTheme.typography.headingMedium,
                        )
                        JengaButton(
                            text = "Scan a ticket",
                            onClick = { },
                        )
                    },
                )
            },
        )
    },
)
Content copied to clipboard

The three layers are tokens → blocks → patterns: primitive palette to semantic roles to each block's *Defaults, then organisms composed from blocks.

Packages

common

JengaAction: a label and its tap handler bundled together, taken by blocks that offer an optional action, so a label is never shown without something to tap.

common

JengaAvatar: initials or an image in a circle, in fixed sizes.

common

JengaBadge: a small count or label in a tone.

common

Page-level messages: JengaBanner in a tone, and JengaInfoBar, a button-shaped bar that says why no action is available.

common

Buttons and button-like actions: JengaButton, JengaIconButton, JengaFab, with their variants and *Defaults.

common

Dates: JengaDatePicker (optionally limited to a dateRange, with a year grid behind the title), JengaDatePickerDialog, and JengaCalendar, a paging month grid whose day cells are your own content.

common

Camera screens: JengaCaptureFrame, a guide over a camera preview for a face, card or page with hold progress, and JengaShutterButton.

Link copied to clipboard
common

JengaCard (filled, outlined, selectable) and JengaCardFooter.

common

JengaBarChart: vertical bars from a shared baseline, optionally selectable.

Link copied to clipboard
common

JengaChip: a selectable chip with an optional leading icon and trailing content.

common

JengaDivider: a hairline between content.

common

JengaExpandableRow: a row that reveals more content when tapped.

Link copied to clipboard
common

JengaFab and JengaExtendedFab: floating primary actions.

common

Overlays: JengaDialog, JengaBottomSheet (with rememberJengaSheetState, which can refuse a close), JengaListSheet, JengaSideSheet, and snackbars (JengaSnackbar, JengaSnackbarHost).

Link copied to clipboard
common

JengaIcon and the bundled JengaIcons line-icon set, shipped as Compose Resources vector drawables (no external icon dependency), tinted from tokens.

common

JengaImage: an image loaded from a URL, with a placeholder.

common

Layout primitives (JengaStack, JengaInline, JengaWrap, JengaGrid, JengaBox, JengaSection, JengaSpacer) that read spacing tokens so you never hand-roll gaps.

Link copied to clipboard
common

JengaLink: an inline text action.

Link copied to clipboard
common

List rows: JengaListItem, JengaKeyValueRow, and rows with a control (JengaCheckboxListItem, JengaRadioListItem).

common

JengaMediaHero and JengaImageViewer, a full-screen viewer for one image or several pages with zoom.

Link copied to clipboard
common

JengaDropdownMenu with JengaDropdownMenuItem and JengaDropdownMenuDivider.

common

JengaNavigationBar with its items, and JengaNavigationRailItem.

Link copied to clipboard
common

One-time codes: JengaOtpField, JengaOtpResend, JengaOtpVerification and rememberJengaCountdown.

common

Scroll-wheel and time entry: JengaWheelPicker, JengaDateOfBirthPicker, JengaTimeInput and JengaTimePickerDialog.

common

Progress: linear and circular (determinate and indeterminate), JengaLabelledProgress, JengaDotStrip and the shimmer modifier.

common

JengaReactionBar: a positive and a negative reaction button side by side.

common

JengaPullToRefresh.

common

Screen frame: JengaScaffold, JengaTopAppBar and JengaBottomBar.

common

Code scanning: JengaScannerViewfinder and JengaScanFeedback.

common

JengaSearchField and JengaSearchTrigger, which opens a search screen.

common

JengaToggle, JengaCheckbox and JengaRadioButton.

common

JengaImageShelf with JengaShelfCard, and JengaThumbnailStrip.

common

JengaSlider.

Link copied to clipboard
common

JengaStatTile: a figure with a label and tone.

common

JengaEmptyState and JengaErrorState.

common

JengaStatusPill: a status label with a dot or icon.

common

JengaStepIndicator: a row of steps (done, current, pending, locked) for a multi-step flow.

common

JengaStepper: a minus / plus quantity control.

common

JengaSwipeToDismiss.

Link copied to clipboard
common

JengaTabs and JengaSegmentedControl.

Link copied to clipboard
common

JengaText, the text block every other block uses.

common

JengaTextField, JengaTextArea (multi-line comments with an optional character counter) and JengaSelectField.

common

Timelines: JengaTimelineItem (fixed states, or your own marker and content), JengaTimelineMarker and JengaTimelinePosition.of.

common

JengaTooltip.

common

JengaVerdictBar: an amount with an eyebrow label, optional progress and captions, in a tone.

common

jengaBrand(seed = …): brand a whole light and dark theme from one color, with corner style, density and contrast.

common

The color system: the generated primitive palette, the semantic JengaColors roles (brand, surface, textPrimary, success…) that flip for dark mode, and withBrand, a lower-level helper that rebrands a single palette (prefer jengaBrand(seed = …) to brand a whole light+dark theme).

common

The elevation ladder (JengaElevation).

common

Durations and easing (JengaMotion).

common

Corner radii (JengaShapes).

common

Touch targets, icon sizes and control heights (JengaSizing).

common

The spacing scale (JengaSpacing).

common

The Outfit-based type scale (JengaTypography) and rememberJengaFontFamily. Swap the family to re-theme typography while keeping the scale.

Link copied to clipboard
common

Organisms composed from blocks: JengaTicketRow, JengaStatCard, JengaSectionHeader.

Link copied to clipboard
common

The theme entry point. JengaTheme wraps content, exposes every token set (JengaTheme.colors / typography / spacing / shapes / sizing / elevation / motion) through CompositionLocals, and bridges to Material 3 internally. Brand and typeface are injected here: brand the whole theme from one seed with JengaTheme(brand = jengaBrand(seed = Color(0xFF6D28D9))).

Generated by Dokka
Jenga: a Kotlin Multiplatform + Compose Multiplatform design system