kmp-shadcn-compose

Integrates the shadcn-compose component library into Compose Multiplatform projects with verified API signatures.

2|Updated Jun 6, 2026
One-click install
npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-shadcn-compose-ronjunevaldoz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kmp-shadcn-compose
Source: https://github.com/ronjunevaldoz/kmp-agent-skills/tree/main/skills/kmp-shadcn-compose
Command: npx skills add https://github.com/ronjunevaldoz/kmp-agent-skills --skill kmp-shadcn-compose-ronjunevaldoz

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires pillow, and includes scripts (resource) and references (resource) components.

What problem does it solve? Adopting the shadcn-compose library in a Kotlin Multiplatform project risks compile errors from hallucinated component parameters, silent mixing of two design systems, and unnoticed breakage from the experimental Compose Foundation Styles API. This Skill enforces verified-against-source component usage and makes the experimental-API risk explicit before the dependency is added. ## Core Features & Use Cases - Verified component usage: Fetches real Shadcn* composable signatures directly from the shadcn-compose GitHub repo with fetch_component_signature.py, preventing guessed parameters like a nonexistent singleLine on ShadcnTextField. - Theme and preset setup: Guides Maven Central Gradle setup, the ShadcnTheme wrapper, and preset/baseColor/accent selection matched to app type. - Design system audits: Bundled scripts audit component parity, WCAG 2.1 contrast ratios, Compose stability/recomposition issues, render quality, and pixel-level visual diffs. - Use Case: A user asks to add a settings screen with ShadcnCard and ShadcnItemGroup; the Skill confirms the experimental-API risk was accepted, verifies each component's real signature, and generates the screen without double-drawn separators or invented slot composables. ## Quick Start Ask the agent to add shadcn-compose to your KMP project and build a settings screen using ShadcnCard and ShadcnItem components.

Frequently Asked Questions about kmp-shadcn-compose

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add shadcn-compose to a Kotlin Multiplatform project?▼

Add io.github.ronjunevaldoz:shadcn-compose to your version catalog and commonMain dependencies, then wrap your app root in ShadcnTheme with a preset, baseColor, and accent. Files referencing a component's style parameter need @OptIn(ExperimentalFoundationStyleApi::class).

shadcn-compose vs kmp-compose-design-system, which should I use?▼

They are alternative component sources for the same layer and must never be combined in one project. shadcn-compose offers 70+ ready components but depends on an experimental Compose Foundation API; the owned scaffold stays on your own upgrade schedule.

Why does ShadcnTextField fail with a singleLine parameter error?▼

ShadcnTextField has no singleLine parameter; it is single-line by design. Use the separate ShadcnTextarea component for multi-line input, and verify any component's real signature with fetch_component_signature.py before calling it.

Does shadcn-compose bundle an icon library?▼

No icon set ships with the shadcn-compose dependency itself. Icons come from the separate heroicons-compose library (io.github.ronjunevaldoz:heroicons-outline on Maven Central) or a custom ImageVector generator.

What are the risks of using shadcn-compose in production?▼

The library hard-depends on ExperimentalFoundationStyleApi, which any Compose Multiplatform release can change or remove, breaking your build until an upstream fix ships. It also moves fast, so recheck Maven Central and the README before pinning a version.