# Konsta UI v5 Component Patterns (React) Load when building screens. Vue (`konsta/vue`) and Svelte (`konsta/svelte`) expose the same component names; Svelte 5 uses snippets instead of slots/render props. Exports used below: `App, Page, Navbar, NavbarBackLink, Block, BlockTitle, List, ListItem, ListInput, ListButton, Button, Toggle, Tabbar, TabbarLink, Sheet, Dialog, DialogButton, Popup, Toast, Actions, ActionsGroup, ActionsButton, Glass, Segmented, SegmentedButton, Searchbar, Preloader` from `konsta/react`. ## Page ```tsx navigate(-1)} />} /> Account navigate('/profile')} /> setOn(!on)} />} /> ``` `Page` is the scroll container. Navbar `large`/`medium` collapse on scroll of the page (`scrollEl` to point at a custom scroller). ## Forms ```tsx setEmail('')} value={email} onChange={(e) => setEmail(e.target.value)} /> ``` Keep input font size >= 16px on iOS (Konsta defaults are fine). ## Tabbar ```tsx setTab('home')} icon={} label="Home" /> setTab('me')} icon={} label="Me" /> ``` With `App safeAreas`, Tabbar includes bottom safe area. Pages behind a fixed Tabbar need bottom padding: `pb-safe-16` (v5 `pb-safe-*` utility = calc(spacing + bottom safe area)). ## Overlays ```tsx setOpen(false)} className="pb-safe"> ... setConfirm(false)} title="Delete item?" content="This cannot be undone." buttons={<> setConfirm(false)}>Cancel Delete } /> setFull(false)}> setFull(false)}>Close} /> setToast(false)}>OK}>Saved ``` Close overlays on Android back: ```ts import { App as CapApp } from '@capacitor/app'; CapApp.addListener('backButton', ({ canGoBack }) => { if (sheetOpen) return setSheetOpen(false); canGoBack ? window.history.back() : CapApp.exitApp(); }); ``` ## Theme-specific styling ```tsx
...
``` Component color props per theme exist as `colors={{ ... }}` and `bgIos` / `bgMaterial` style props; prefer `--color-brand-*` and utilities first. ## Glass (iOS 26 look) `` renders a liquid-glass surface (`bgIos`, `shadowIos`, `highlight` props; colors customizable since 5.2). Use sparingly over content, test contrast in light and dark. ## Material color schemes Add `k-md-vibrant` or `k-md-monochrome` to ``/``; ignored in iOS theme.