Konsta UI Alternative for React: Ionic vs Wingo UI

You picked Konsta UI because it gives you iOS and Material components as Tailwind classes, and now something does not fit: you need a wheel picker it does not have, a sheet you can swipe away, keyboard support, or a layout that also works on a desktop. This guide compares the three realistic options when you look for a Konsta UI alternative for a React web app: Konsta UI itself, Ionic React, and source-owned mobile components you copy into your project. Every fact below was checked on November 6, 2026, with a link to its source.

We build Wingo UI, the source-owned option here, so read that part with this in mind. We also say plainly where Konsta and Ionic are the better choice. For the wider field, see our comparison of nine React libraries for mobile and the comparisons category.

What is Konsta UI, and why look for an alternative?

Konsta UI (opens in a new tab) is a free, MIT licensed library of "pixel perfect mobile UI components built with Tailwind CSS", for React, Vue and Svelte. Version 5.5.0, published on npm on September 28, 2026, brings what its site calls an "iOS 26 and Material Design 2025 look and feel". It comes from the author of Framework7, and its homepage says it is "mostly designed to be used with 'parent' frameworks like Ionic or Framework7": the parent handles routing, navigation and native APIs, and Konsta draws the page UI.

The React sidebar lists about 40 components: action sheet, navbar, tab bar, toolbar, list, list input, segmented control, sheet modal, popup, dialog, toast, stepper, range, messages and a few more. That is a lot of polish for free. People still look for an alternative for a few recurring reasons:

• Missing pieces. There is no wheel picker, no swipeable tabs, no pull to refresh and no swipe actions in the component list.
• No swipe gestures. Overlays open and close through an opened prop and a backdrop tap. You cannot drag a sheet down to close it or swipe between pages.
• Phone only. The components look like a phone app at every width. On a 1440px screen, an action sheet still slides up from the bottom.
• No app shell. Without Ionic or Framework7, you bring your own routing and page transitions.

How do Konsta UI, Ionic and Wingo UI compare?

Here is the short version: Konsta is the lightest and cheapest, Ionic covers the most phone behavior, and Wingo UI is the one built for a responsive web app. Checked on November 6, 2026, from each project's npm page, GitHub repository and docs.

Konsta and Ionic both sit in node_modules and update with npm update. Wingo UI copies the component source into components/ui/, so the code is yours to change, and npx wingo-ui@latest update merges our changes into your edits.

Konsta UI vs Ionic: which look and theming model fits?

Both give you a convincing iOS and Material look. The difference is how you change it.

Konsta UI is plain Tailwind. You wrap the app once and pick a theme:

// app/konsta-shell.tsx
"use client";

import { App } from "konsta/react";

export function KonstaShell({ children }: { children: React.ReactNode }) {
  return (
    <App theme="ios" safeAreas>
      {children}
    </App>
  );
}

Its theme.css declares the palette as Tailwind theme variables (--color-primary maps to --k-color-primary, plus the Material tokens), so you can recolor it in your own CSS and keep using utility classes on any component. The dark prop on App (on by default) keeps the components' dark: classes, so dark mode follows Tailwind's dark variant. Most components also take a colors object and per-theme props like bgIos and bgMaterial for finer control.

Ionic is themed with CSS variables (--ion-color-primary and friends) and, for components that render inside a shadow root, with CSS shadow parts (opens in a new tab). That works well, but it means Tailwind classes stop at the shadow boundary: you cannot put rounded-2xl on the inside of an ion-picker column. Ionic picks the ios or md mode from the platform automatically, which is exactly what you want in a Capacitor build and a bit odd on a desktop browser.

Wingo UI reads semantic tokens from your globals.css (bg-surface, text-muted-foreground, border-border) and exposes every visual choice as a prop: size, tone, radius, color, variant and classNames for the inner parts. There is no theme switch between iOS and Material for the whole library. A few mobile parts have both shapes, like the Action Sheet with variant="ios" or variant="material".

Which one is the best Tailwind v4 option?

All three work with Tailwind CSS v4 today, in different ways. Konsta's install page sets it up with v4 syntax:

@import "tailwindcss";
@import "konsta/react/theme.css";

That is the most direct fit if you think in utility classes and want Tailwind mobile UI components out of the box. Ionic does not depend on Tailwind at all. You can use Tailwind for your own layout next to Ionic's CSS, but the two styling systems stay separate. Wingo UI is written for Tailwind v4 from the start: the components use the same tokens your app uses, so a color change in globals.css reaches every component and every page.

Which one handles gestures?

This is where the three differ most, and where Konsta is weakest. A text search of Konsta UI 5.5.0's React source found no swipe or drag code; the only pointer tracking is the iOS tab bar highlight that follows your finger across the tabs. Its Sheet and Actions components take opened and onBackdropClick, and that is how they close. The one scroll-driven effect is the navbar: with large, the big title collapses into the bar as the page scrolls, close to iOS.

Ionic has the gestures. Its sheet modal (opens in a new tab) snaps between breakpoints and swipes closed, ion-segment-view lets the user swipe between segment contents (opens in a new tab), the refresher handles pull to refresh, ion-item-sliding reveals swipe actions, and ion-picker is a real wheel with ArrowUp, ArrowDown, PageUp, PageDown, Home and End on the keyboard. The collapsing large title (opens in a new tab) (collapse="condense") only applies in iOS mode.

Wingo UI ships the same phone patterns as separate components. The Picker Wheel spins with the phone's own momentum and snaps on a 3D cylinder; the value changes once, when the wheel stops.

"use client";

import { useState } from "react";
import { PickerWheel, pickerRange } from "@/components/ui/picker-wheel";

const hours = pickerRange(8, 19, { pad: 2 });
const minutes = pickerRange(0, 55, { step: 5, pad: 2 });

export function AppointmentTime() {
  const [time, setTime] = useState(["10", "30"]);

  return (
    <PickerWheel
      aria-label="Appointment time"
      loop
      value={time}
      onValueChange={setTime}
      columns={[
        { id: "hour", label: "h", options: hours },
        { id: "minute", label: "min", options: minutes },
      ]}
    />
  );
}

The Swipeable Tabs put the pages side by side and move the indicator with your thumb. Vertical scrolling inside a page never changes the tab, which is the bug most hand-rolled versions have.

The Large Title Header does the iOS large title handover in any browser, and the Bottom Tab Bar adds badges, a raised center action and hide on scroll. Our wheel picker guide and native feel guide go deeper on how these behave on real phones.

How do the action sheets compare in code?

An action sheet is a good test because all three have one. In Konsta UI you own the open state and close it from each button:

"use client";

import { useState } from "react";
import { Actions, ActionsButton, ActionsGroup, ActionsLabel, Button } from "konsta/react";

export function ListingActions() {
  const [open, setOpen] = useState(false);
  const close = () => setOpen(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Listing actions</Button>
      <Actions opened={open} onBackdropClick={close}>
        <ActionsGroup>
          <ActionsLabel>2-bedroom apartment, Brooklyn</ActionsLabel>
          <ActionsButton onClick={close}>Share</ActionsButton>
          <ActionsButton onClick={close}>Delete listing</ActionsButton>
        </ActionsGroup>
        <ActionsGroup>
          <ActionsButton onClick={close} bold>
            Cancel
          </ActionsButton>
        </ActionsGroup>
      </Actions>
    </>
  );
}

We found no Escape key handling or focus management in Konsta's Actions, Sheet, Dialog or Popup source, so a keyboard user cannot close the sheet and focus stays behind it. Add that yourself if desktop users matter.

Ionic describes the sheet with button roles and handles focus and Escape for you:

import { IonActionSheet, IonButton } from "@ionic/react";

export function ListingActions() {
  return (
    <>
      <IonButton id="listing-actions">Listing actions</IonButton>
      <IonActionSheet
        trigger="listing-actions"
        header="2-bedroom apartment, Brooklyn"
        buttons={[
          { text: "Delete listing", role: "destructive" },
          { text: "Share" },
          { text: "Cancel", role: "cancel" },
        ]}
        onDidDismiss={({ detail }) => console.log(detail.role)}
      />
    </>
  );
}

The Wingo UI Action Sheet takes the actions as data, shows a spinner in a row whose onSelect returns a promise, and becomes a compact dialog from 768px (or a menu anchored to the trigger with desktop="popover"):

"use client";

import { MoreHorizontal, Share, Trash2 } from "lucide-react";
import { ActionSheet } from "@/components/ui/action-sheet";
import { Button } from "@/components/ui/button";

export function ListingActions({ onDelete }: { onDelete: () => Promise<void> }) {
  return (
    <ActionSheet
      title="2-bedroom apartment, Brooklyn"
      trigger={
        <Button variant="ghost" size="icon" radius="full" aria-label="Listing actions">
          <MoreHorizontal />
        </Button>
      }
      actions={[
        { id: "share", label: "Share", icon: <Share /> },
        { id: "delete", label: "Delete listing", icon: <Trash2 />, tone: "danger", onSelect: onDelete },
      ]}
    />
  );
}

Install it with npx wingo-ui@latest add action-sheet.

What do they cost in bundle size?

We measured this ourselves on November 6, 2026, because the npm "unpacked size" says little about what ships. Method: one small React 19 page per library, bundled with esbuild 0.25 (minified, production), JavaScript only, minus the 69 KB gzipped that React and React DOM take alone.

Read it with care. Konsta's package.json has no sideEffects flag, so the bundler kept all of konsta/react even though the page imported ten components; that 45 KB is close to the whole library. Ionic adds its CSS on top (core.css alone is about 2.6 KB gzipped, and its docs recommend several more files). Our five components are the heaviest: about 137 KB of the minified total is their own source, which is large because each one carries its gestures, keyboard handling, reduced-motion paths and desktop fallback, and about 135 KB is the motion library. If your app already uses motion, Radix and tailwind-merge, most of that second part is already in your bundle, and Next.js only loads each component on the routes that use it. If raw bytes on a phone page are what you optimize, Konsta wins this round clearly.

Which one works best with the Next.js App Router?

Konsta's Next.js page (opens in a new tab) still shows the Pages Router (pages/_app.js). Its files have no "use client" directive and use hooks, so in the App Router you import them from your own client component, as in the KonstaShell above. Ionic's React overview lists Next.js next to Vite as possible tooling, but the v9 docs we read have no App Router or server rendering guide, and Ionic's components are Stencil web components that hydrate on the client. In practice most Ionic React apps are client-rendered single page apps, often wrapped with Capacitor. Each of the five Wingo UI components in this post starts with "use client" and avoids window during render, so you drop it into a server-rendered page as is.

When are Konsta UI or Ionic the better choice?

Stay with Konsta UI when the app lives inside Ionic, Framework7 or Capacitor, you want the newest iOS and Material styling for free, and you do not need a picker, swipeable pages or keyboard support. It is the smallest option here and the MIT license has no strings.

Pick Ionic React when the product is mobile-only, you plan to ship to the app stores, and you want routing, page transitions, platform modes and every common gesture from one maintained framework. It is the most complete free mobile web UI library in this comparison. If you were really looking for an Ionic React alternative, the better answer for a mobile-only product is often Ionic itself plus a few custom pieces.

Pick source-owned components like Wingo UI when the same Next.js app is used on phones and desktops, when you want the action sheet to turn into a dialog on a laptop, and when you or your coding agent will edit the components. The five mobile parts in this post are Pro. The Drawer that the picker and action sheet open in is free, and so is the Segmented Control.

How do you try the source-owned option?

Start with a free account, copy the free pieces, and open the Mobile App Home block to see the large title, tabs and tab bar working together in one screen. If those patterns fit your app, the Pro components install with the same command. The shadcn alternatives guide covers the rest of the copy-the-source field.

npx wingo-ui@latest add picker-wheel swipeable-tabs bottom-tab-bar

FAQ

What is the best Konsta UI alternative for React?

Ionic React if your app is mobile-only and you want a full framework with routing, transitions and gestures. Wingo UI if your app runs on phones and desktops and you want the source in your repository. Framework7 React is the closest in spirit, since it is Konsta's parent framework from the same author.

Konsta UI vs Ionic: which should I use?

Konsta UI is a component layer: styled Tailwind components without routing or gestures, MIT licensed, about 45 KB gzipped in our test. Ionic is a full app framework with its own routing integration, sheet modals, a picker and swipe gestures, also MIT, about 91 KB gzipped in the same test. Konsta's own site says it is mostly meant to run inside Ionic or Framework7.

Does Konsta UI work with Tailwind CSS v4?

Yes. As of November 2026, Konsta UI 5.5.0 installs with @import 'tailwindcss' followed by @import 'konsta/react/theme.css' in your main CSS file, which is the Tailwind v4 setup. Its colors are Tailwind theme variables you can override.

Does Konsta UI support swipe gestures?

Not for sheets or pages. A text search of Konsta UI 5.5.0's React source found no swipe or drag handling: sheets and action sheets open and close through the opened prop and a backdrop tap. The only touch tracking is the iOS tab bar highlight, and the large title navbar collapses on scroll.

Is Konsta UI free for commercial use?

Yes. Konsta UI is MIT licensed and has no paid tier; its site asks for sponsorship instead. Ionic Framework is MIT as well. Wingo UI has 75 free items, and its mobile pieces such as the picker wheel and action sheet are part of Pro.