Compose Components Demo

Core Components

Web Showcase

ℹ️ Compose Components Demo: This interactive playground showcases the 24 Compose UI components bundled in the Kolt suite. These components are supplied by the two Compose libraries in the suite: compose-kmp (KMP Compose tokens and squircles) and compose-utils (Android-only scaffolds and dropdowns).

Buttons & Actions

Themed button states supporting primary, secondary, icons, images, and text alignments.

AppsButton

Standard primary filled button

AppsTonalButton

Filled Tonal button style using secondary container colors

AppsOutlinedButton

Outlined button style using outline borders

AppsIosButton

iOS-style button with smooth opacity fade feedback and multiple style modes

AppsIconButton

Icon-only clickable triggers without text

AppsImageButton

Buttons containing aligned leading images/icons with text

AppsTextButton & AppsLinkButton

Plain text actions and hyperlinked styles

Link Button

Button Settings

Enable All Buttons

iOS Button Style Mode

Button Color Intent

Button Shape Style

Text Helpers & Components

KMP

Specialized text widgets supporting click-to-copy, ellipses with "read more" expansions, and image alignment.

AppspirimentText

Basic text wrapper supporting selectable text containment & offset

This is a custom AppspirimentText component. You can toggle its selectability or change its styles from the configuration panel!

AppsCopyableText

Click text block to copy to clipboard

support@appspiriment.com 📋

AppsExpandableText

Limits text lines with click to expand toggle

Appspiriment provides high-quality convention plugins and utility libraries for Kotlin Multiplatform developers. By consolidating build logic, it enables teams to share structured setups easily and upgrade dependencies via standard version catalogs without rebuilding plugins.

AppsImageText

Perfectly centered inline icon/image alignment

🏠 Appspiriment System Settings

KeyValuePairText & PrefixedText

Formatted text fields for summary views

Status Active

Amount USD $149.00

Text Settings

AppspirimentText Config

Text Content

Selectable Text

Text Style Preset

Text Color Preset

AppsCopyableText Config

Copyable Text Value

Show Copy Icon

Feedback Duration

AppsExpandableText Config

Collapsed Line Limit

Toggle Accent Color

Show More Label

Show Less Label

AppsImageText Config

Image/Text Gap

Spacing size 8px

Icon Placement

Highlight Search Text

KMP

Text view that highlights instances matching the search query. Try typing in the search bar below.

AppsHighlightText

Highlighted matching terms inside target text block

Kotlin Multiplatform (KMP) simplifies cross-platform sharing of business logic. Developers write common code once, and compile to Android, iOS, Desktop, and Web. Appspiriment's convention plugins make KMP project builds consistent.

Highlight Settings

Search Term

Case Sensitive Match

Highlight Style

Images & Avatars

Images, icons, and initials avatars supporting high-contrast tints.

AppsIcon

Standalone static system icon component

🔔

AppsImage

Standalone static graphic image component wrapper

⚠️

AppsAvatar

Circular name initials avatar badge

CircleIconBox

Centered icon tile with automatic contrast background

🏠

Avatar & Icon Settings

Avatar Initials

Icon Color Theme

CircleIconBox Size

Dimensions 48px

Themed Form Fields

Premium form text field inputs with full focus borders, clear functionality, and validation feedback.

AppsTextField

Standard text field for single line entries (Active & Disabled)

Active Input

Floating Label Input

Enter your full name...

Disabled Input

AppsPasswordTextField

Input text with visibility eye action toggle (Active & Disabled)

Interactive Password

Disabled Password

AppsSearchTextField

Search field with leading lens and trailing clear action

Interactive Search

🔍

AppsValidatedTextField

Input field with validation states (Success & Error feedback)

Interactive Validator

Form Field Settings

Custom Placeholder

Interactive Validator State

Field Shape Style

Focus Border Color

AppsSlider (Value Controls)

Premium custom slider controls supporting interactive value drags.

AppsSlider

Drag active thumb handle to adjust numerical settings

Current Value: 50

Slider Settings

Minimum Value

Maximum Value

Step Size

Disable Slider

AppsRatingBar (Star Rating)

Interactive star ratings supporting fractional parameters.

Interactive Rating Bar

Click/Tap stars to assign a rating value

★ ★ ★ ★ ★

Current Rating: 3.5 / 5.0

Read-only Display

Static star rating containing half filled values

★ ★ ★ ★ ★

Rating Settings

Allow Half Selection

Star Count (Max Value)

Rating Icon Character

AppsStatusTag (Semantic Tags)

Pill-shaped badges driven by primary, secondary, and semantic error/warning intents.

Active Status Tags

Click status pills to trigger dynamic toast feedback

Success Warning Error Info Primary Neutral

Tag Settings & Creator

Tag Label

Tag Intent

Shape Style

Border Style

Show Status Icon

AppsBadge & AppsTooltip

Count indicators and inline help prompts showing on interaction.

AppsBadge

Notification count pill badge

Inbox

AppsTooltip

Interactive inline information popups

Badge Config

Badge Count

Badge Alignment

Tooltip Config

Tooltip Position

Tooltip Message

Long-press Hold Delay

Progress & Loaders

Themed linear progress, circular progress, and indeterminate states.

AppsProgressBar

Linear progress bar (Determinate value)

AppsCircularProgress

Indeterminate circular spinner

AppsLinearProgress

Indeterminate linear loading animation

Progress Settings

Determinate Value 50%

Animation Speed

Bar Thickness 6px

Shimmer Skeleton & Empty States

Smooth loading placeholders with moving gradients and clean empty-state templates.

ShimmerBox Loading State

Dynamic loading state toggle

AppsEmptyState

Centered dashboard block template for empty states

⚠️

No Tasks Found

You have completed all items in your workflow.

Skeleton & Empty State Settings

Loading Shimmer

Shimmer Speed 1.2s

Empty State Icon

Empty Title Text

Empty Desc Text

Empty Action Button Text

Banners & System Feedback

KMP

Themed alert banners, system snackbars, and toast alerts.

AppsBanner

Status alert banner with action triggers

Toasts & Snackbars

Dynamic alerts from the host controller

Feedback & Banner Settings

Banner Title

Banner Message

Banner Intent Style

Snackbar Action Label

Snackbar Message

AppsDivider & Spacers

Visual and layout helpers for separating components cleanly.

Divider & Spacer Layout

Render separation lines and adjustable spaces

Horizontal Divider (AppsDivider) + Vertical Spacer

Above Text Block

Below Text Block

Vertical Divider + Horizontal Spacers

Section Left

Section Right

Divider & Spacer Settings

Divider Thickness 1px

Divider Color

Spacer Size 16px

TextTitledCardView & Smooth Corners

Curvature continuity (G2) mathematically blended corners.

Smooth Corners Playground

Compare standard CSS borders against squircle curvatures

Standard Rounded Corners

SmoothCornerShape (G2)

Squircle Corner Settings

Smoothness 55%

Corner Radius 24px

🏠

Generic TitledCardView

Showcases TitledCardView using the custom title slot directly, allowing custom layouts in the title header block.

AppsAccordion (Collapsible panels)

Sleek expandable panels utilizing G2 smooth corners.

Collapsible Panels

Click headers below to slide open accordion items

Click to Expand Panel A

▼

This content expands and collapses with a premium ease-in-out height animation. It automatically manages rotation of the end chevron indicator.

Click to Expand Panel B With subtitle support

▼

Panel B contains nested interactive triggers, lists, or custom options.

Accordion Settings

Single Expand Mode

Panel A Title

Panel B Title

Scaffolds & Page Structures

Previews of PageScaffold (toolbar + view) and AppsDrawerScaffold (toolbar + sliding navigation drawer).

Page & Drawer Scaffold Layouts

Toggle the hamburger menu (☰) on the right scaffold to slide open/close the drawer

PageScaffold Structure

☰ App Title

🔍 ⚙️

Content Viewport

A simple scaffolding structure containing a standard action bar and full content container.

AppsDrawerScaffold Structure (Interactive)

App Workspace

Main content container

Toggle the hamburger menu (☰) above to slide open/close the navigation drawer.

SwipeableActionsBox (List Item Gestures)

Swipe left or right on list items to reveal context-specific actions (e.g. Archive, Delete).

Swipe Actions Preview

Drag the card items below horizontally to reveal green or red actions

📥 Archive

🗑️ Delete

Review KMP Convention Setup From: David Lee Kolt

📥 Archive

🗑️ Delete

Publish BOM to Maven Central From: Appspiriment Release Bot

Swipe Settings

Left Swipe Action Text

Left Swipe Icon

Right Swipe Action Text

Right Swipe Icon

Action Trigger Threshold 70px

AsyncStateBox State Machine

Renders dedicated slots depending on Idle, Loading, Success, or Error states of async operations.

Async Viewport State Controller

Displays correct slot depending on operational status

State: Idle

Select different states in the configuration card to transition...

Fetching dashboard data...

✓

Successfully fetched dashboard data!

⚠️

Failed to fetch data due to timeout.

Async State Settings

Select Active State

Custom Success Message

Custom Error Message

SmartPullToRefreshBox

Draggable viewport triggering suspending reload actions.

Pull to Refresh Feed

Drag down list below to trigger refreshing spinner

Pull to refresh

💡 Drag down here to reload simulation data...

✓ Database connection stable

✓ Remote repository sync: OK

Pull-To-Refresh Settings

Pull Resistance Damping: 5

Simulated Reload Delay 1.5s

Simulation Outcome

AppsStepper (Wizard Flows)

Flow-based progress layouts with node pulsing and transition lines.

Interactive Wizard Node Steps

Toggle back and next step buttons to slide active nodes

✓

Verification

Payment

Confirm

Current step task: Add payment details

Step 2 of 3

Stepper Settings

Total Step Nodes

Layout Direction

Native Overlay Controllers

KMP

Simulated native viewports and bottom sheet cards.

Overlays & Sheets

Trigger dialogs and sheet controllers — available on all KMP targets

Overlay Settings

Dialog Title

Dialog Body Message

Sheet Close Cross Icon

Dialog Corner Radius 12px

Dialog Corner Smoothness 55%

In-App Updates (update-utils)

Android Only

Simulated dialog prompts driven by Google Play In-App Update / Firebase configurations.

In-App Update Dialogue Simulation

Test Google Play Flexible and Immediate flows

In-App Update Settings

Target Update Version

Simulate Network Failure

LocationPicker (Map, Search & Coordinates)

KMP

All-in-one location picker component with autocomplete search, maps selection pin, current location tracking, and manual coordinates entry tabs.

✨ Key Features:

Search Tab: Autocomplete location query search via place APIs.
Map Tab: Drop map pins directly and resolve addresses (Reverse Geocoding).
Current Location: GPS coordinates resolution (with browser Geolocation on Web).
Manual Entry: Validation checks for latitude, longitude, and custom labels.

// Launch via Platform Expect/Actual API
LocationPicker.rememberLauncher(config) { result ->
    val latitude = result.latitude
    val longitude = result.longitude
    val address = result.label
    val timezoneId = result.timezoneId
}