Capability Matrix
Core components, web adaptations, and experimental capabilities.
SwiftUI.js carries SwiftUI's composition ideas into React. It is an evolving web library: native Apple rendering and complete SwiftUI API parity are outside its current contract.
Start with the core
Build everyday screens with Button, Text, TextField, SecureField, TextEditor, Toggle, Picker, Slider, Stepper, ProgressView, HStack, VStack, ZStack, Spacer, Divider, Grid, GridRow, List, Section, Form, DisclosureGroup, LabeledContent, Sheet, Alert, and ConfirmationDialog.
These are the priority acceptance surface. “Core” identifies development focus; it does not claim that every component has completed cross-browser, accessibility and visual acceptance.
| Area | Current behavior | Limit |
|---|---|---|
| Forms | Native HTML controls; ordinary React events and controlled props | Applications provide validation, labels and persistence |
| Modals | Portal, focus trap and restoration, background isolation, scroll lock, nested Escape handling | Handle supports pointer dragging, detent snapping and dismissal; content scrolls separately |
| Motion | Paired modal/menu transitions, sheet detent settling, disclosure expansion, content-update feedback and system Reduce Motion | Web timing curves approximate settling; native physics springs and text/number interpolation are not implemented. Motion guide |
| Adaptive layout | CSS stacks and grids; container-aware NavigationSplitView with compact column navigation | Two columns collapse below 768px; three below 1024px; compact overrides this |
| SSR | Client-marked package entries can be prerendered; navigation IDs are stable | Viewport hooks return null on the server; portal content appears after mounting |
| Packaging | Component CSS, strict consumer types and unused JavaScript removal are checked from the packed artifact | Import shared styles once; use component subpaths for the smallest CSS footprint |
Web adaptations
NavigationStack, TabView, menus, popovers, dates, charts and platform bridges retain web-specific behavior. Review each reference before relying on keyboard interactions, gestures, media permissions or fallback behavior.
ViewThatFits observes container width and selects children using data-min-width hints. It does not measure intrinsic SwiftUI layout proposals. Its first child renders during SSR; explicit width makes selection deterministic.
LazyVStack, LazyHStack, LazyVGrid, and LazyHGrid share measured viewport virtualization for overflow containers and page scrolling. Estimates are corrected as items resize, and focused rows remain mounted. Off-screen rows unmount, so keep editable state outside each item. SSR emits an initial window rather than the whole dataset.
Experimental capabilities
- Presentation, scroll and animation modifier wrappers may expose metadata without implementing the corresponding native system behavior.
- Maps, media and canvas bridges need application-specific integration checks.
Existing exports remain available. Experimental APIs may change as behavior is implemented. Component count is not an acceptance metric.
Release acceptance
The repository runs lint, type checks, tests and builds. The packed-consumer check additionally validates strict TypeScript declarations, client boundaries, SSR across separate processes, CSS retention and a 2 KiB gzipped JavaScript budget for an isolated Button (React excluded).
Production acceptance still requires browser interaction, responsive, accessibility and visual review for the components your application uses. The kitchensink provides a compact integrated form and modal workflow; Storybook covers the wider surface.