Guide to using Konsta UI for pixel-perfect iOS and Material Design components in Capacitor apps. Works with React, Vue, and Svelte. Use this skill when users want native-looking UI without Ionic, or prefer a lighter framework.

Konsta UI Design Guide Build pixel perfect iOS and Material Design apps with Konsta UI. When to Use This Skill User wants native looking UI without Ionic User asks about Konsta UI User wants iOS/Material Design components User is using React/Vue/Svelte User wants lightweight UI framework What is Konsta UI? Konsta UI provides: Pixel perfect iOS and Material Design components Works with React, Vue, and Svelte Tailwind CSS integration ~40 mobile optimized components Small bundle size (~30KB gzipped) Getting Started Installation Tailwind Configuration Setup (React) Setup (Vue) Core Components Page Structure Lists Forms Buttons Cards Dialogs and Sheets Tabbar Navigation Theming Theme Selection Dark Mode Custom Colors with Tailwind Component Level Styling With Capacitor Safe Area Handling Capacitor Integration Comparison: Konsta vs Ionic Feature Konsta UI Ionic Bundle Size ~30KB ~200KB Components ~40 ~100+ Tailwind Integration Native Possible Routing External Built in Framework Support React, Vue, Svelte React, Vue, Angular Native Features UI only UI + Plugins Choose Konsta when: You want Tailwind first approach You need smaller bundle size You're using Svelte You want simpler setup Choose Ionic when: You need comprehensive component library You want built in routing You need more complex components You prefer all in one solution Best Practices Performance Accessibility Resources Konsta UI Documentation: https://konstaui.com/ Konsta React Docs: https://konstaui.com/react Konsta Vue Docs: https://konstaui.com/vue Konsta Svelte Docs: https://konstaui.com/svelte GitHub: https://github.com/konstaui/konsta

konsta-ui