Konsta Ui

If you're building a Capacitor app and want native iOS or Material Design components without pulling in the full weight of Ionic, this is worth looking at. It's a Tailwind-based component library that works with React, Vue, or Svelte and gives you about 40 mobile-optimized components at around 30KB gzipped. The components are pixel-perfect recreations of native UI patterns, so you get things like iOS-style lists, form inputs, action sheets, and navigation bars that actually look like they belong on the platform. It's opinionated about using Tailwind, which is either perfect or a deal-breaker depending on your stack.

skills.sh installs: 874
GitHub stars: 77
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add cap-go/capgo-skills --skill konsta-ui --agent claude-code

Installs into .claude/skills of the current project.

Files

Konsta UI for Capacitor

When to Use

TRIGGER when:

Adding Konsta UI to a Capacitor app or choosing it over Ionic
Upgrading Konsta v3/v4 (Tailwind v3 konstaConfig) to v5 (Tailwind v4)
Components unstyled, colors ignored, ios:/material: classes do nothing
Navbar / Tabbar under the status bar or gesture bar
Theme should follow platform (ios on iPhone, material on Android)

Do not use:

Ionic Framework components or theming: ionic-design
Tailwind install/config without Konsta: tailwind-capacitor
Android SystemBars / edge-to-edge native config: safe-area-handling
Keyboard overlap in forms: capacitor-keyboard

Versions (October 2026)

Konsta	Tailwind	Frameworks	Config style
5.x (`latest`, 5.5.0)	v4	React 19 (`ref` as prop), Vue 3, Svelte 5 (runes, snippets)	CSS: `@import 'konsta/<fw>/theme.css'` + `@theme`
4.x	v3	adds Svelte 5 types	JS: `konstaConfig()` in `tailwind.config.js`
3.x and below	v3		JS `konstaConfig()`