Designed for mobile

Start with a small screen. Try the interactions, choose your open-source components, and take a clear design brief into your project.

Find components

Give the story the first word.

For magazines, communities, and reading apps. Lead with one story, then keep saving and discovery within easy reach.

One lead story and a single-column reading feed
Persistent bottom navigation with a clear current destination
Immediate save feedback and a useful empty saved state

Pair with: Mobile Editorial

This is a StyleKit-authored web prototype with local data, not an official demo of the libraries below.

FIELD NOTES6 MIN READ

A city, read in the rain

A quiet walk through the streets and the small ways weather changes what we notice.

Lin Zhixia · Oct 4

Rain softens the edges of a street. Cyclists pause beneath the eaves; reflections give a familiar route a different color.

Sometimes, slowing down is how we arrive.

Following the water line, I notice a handwritten note about today’s soup outside a shop I usually pass.

Choose the right building blocks.

Choose web, React Native, and SwiftUI tools separately. Compare useful components, project fit, and integration constraints.

Sources checked 2026-10-04

12 recommended projects

ChunUI

MIT

SwiftUI / iOS

A SwiftUI design system extracted from a shipped iOS app, centered on grayscale hierarchy, one brand color, native sheets, and tactile feedback.

Theme tokens, type, and spacingButtons, forms, and native sheetsToasts, skeletons, and Metal effects

Choose it for: SwiftUI apps that need a consistent native iOS visual system for controls, forms, sheets, and motion.
Before you integrate: An emerging project requiring iOS 18.6+ and Swift tools 6.2. Its README uses the main branch, so pin a revision and verify compatibility before production use.

Documentation GitHub

ShipSwift

MIT

SwiftUI / iOS

A SwiftUI component and recipe library spanning animation, charts, form feedback, and common app flows.

SwiftUI motion and Metal backgroundsLine, bar, and ring chartsSheets, search, feedback, and tabs

Choose it for: iOS apps that need inspectable source for charts, onboarding, search, feedback, or paywall screens.
Before you integrate: The MIT repository includes components that can be copied locally, while its README also describes Pro recipes served online. Check each source file, dependency, and service requirement before reuse.

Documentation GitHub

Blossom Carousel

Apache-2.0

Web / H5 / React Web / Vue Web

A carousel built on native browser scrolling, preserving touch gestures while adding pointer dragging for mouse and pen.

Native scrolling with CSS scroll snapPointer drag enhancementPrevious/next and dot navigation

Choose it for: Reading galleries, product imagery, and horizontal card rails where native browser scrolling should remain the default.
Before you integrate: This is a web carousel, not a native iOS or Android component; cyclical scrolling is still marked experimental.

Documentation GitHub

Ant Design Mobile

MIT

React Web

A React component library designed for mobile web, with building blocks for forms, pickers, lists, and feedback.

Buttons, forms, and inputsPickers, dates, and action sheetsLists, tabs, and feedback

Choose it for: React H5 pages that need ready-made mobile controls, form states, and consistent touch details.
Before you integrate: It targets React in the browser, not React Native. Its default visual language is strong, so adopt selectively to preserve the product's visual identity.

Documentation GitHub

Vant

MIT

Vue Web

A lightweight, customizable Vue component library for mobile web, with practical controls for phone-sized forms and commerce flows.

Forms, cells, and pickersCalendar, date, and action sheetsLists, tags, and toast feedback

Choose it for: Vue 3 H5 sites, mobile commerce, signup, and data-entry flows.
Before you integrate: Vant components cannot be used directly in React projects. The current line targets Vue 3; legacy Vue 2 projects need the matching version.

Documentation GitHub

Ionic Framework

MIT

Web / H5 / React Web / Vue Web

A Web Components mobile UI toolkit with React and Vue integrations for mobile web, PWAs, and hybrid apps.

Navigation bars, tab bars, and listsAction sheets, modals, and toastsTouch gestures and platform themes

Choose it for: Teams that need a full mobile app shell, adaptive themes, navigation, and access to device capabilities.
Before you integrate: It is an app toolkit, not just a few controls. Native deployment usually pairs with Capacitor; a project adding only one control can borrow its patterns without adopting the full stack.

Documentation GitHub

Framework7

MIT

Web / H5 / React Web / Vue Web

A mobile web and hybrid app framework with iOS and Material-style controls, routing, and app structure.

Navigation bars, toolbars, and tabsDialogs, action sheets, and search barsAdaptive iOS and Material themes

Choose it for: Standalone mobile SPAs that need an app-like structure plus a complete set of screens and navigation controls.
Before you integrate: It owns much of the app structure and routing, so it is better as a pattern reference or a separate prototype inside an existing Next.js product.

Documentation GitHub

Swiper

MIT

Web / H5 / React Web / Vue Web

A mature touch slider and carousel library with React, Vue, and optional navigation and pagination modules.

Slider and slidesPagination and next/previous navigationTouch and pointer dragging

Choose it for: Mobile product galleries, horizontal content rails, and carousels that need pagination or richer slide behavior.
Before you integrate: Its feature set is broader than a basic carousel. Prefer native horizontal scrolling for simple rails and add Swiper when its gesture or module features are needed.

Documentation GitHub

Radix UI Dialog

MIT

React Web

An unstyled React dialog primitive that handles modal layers, focus management, keyboard dismissal, and screen-reader semantics.

Root, trigger, portal, and overlayContent, title, and descriptionFocus trapping, Escape dismissal, and screen-reader semantics

Choose it for: React web dialogs, filter panels, and mobile bottom panels that need a custom visual design.
Before you integrate: It provides an accessible dialog structure, but no drawer dragging or snap points; the app still needs to add bottom-sheet gestures.

Documentation GitHub

React Native Paper

MIT

React Native

A React Native component library following Material Design 3, with iOS and Android support and theme customization.

Buttons, cards, and listsInputs, pickers, and menusApp bars, dialogs, and themes

Choose it for: React Native apps that need a coherent Material-style set of buttons, forms, and navigation.
Before you integrate: Its components run in React Native and cannot be used directly in a regular browser DOM; use PaperProvider and configure a theme.

Documentation GitHub

React Native Bottom Sheet

MIT

React Native

A native bottom sheet with snapping, gestures, and keyboard handling for filters and detail flows on iOS and Android.

Multi-snap bottom sheetModal sheet and dynamic sizingCoordinated lists, keyboard, and scrolling

Choose it for: React Native apps that need filter sheets, purchase options, task actions, or scrollable detail panels.
Before you integrate: It requires Reanimated and Gesture Handler with their native setup steps; it is not a drawer that can be dropped into a Next.js DOM page.

Documentation GitHub

Tamagui

MIT

Web / H5 / React Native

A universal React design system for web and React Native that can share components, themes, and responsive styles.

Universal Box, Stack, and textThemes, tokens, and responsive variantsForm, menu, and overlay controls

Choose it for: Teams maintaining both a Next.js site and Expo app that want to share design tokens and UI components.
Before you integrate: Cross-platform reuse brings configuration and theming decisions; native projects require React Native 0.81+ with the New Architecture. It is substantial overhead for styling one existing web page.

Documentation GitHub

Go beyond how it looks.

Touch targets

These web examples aim for primary targets of at least 44 × 44 CSS px. WCAG 2.2 AA specifies 24 × 24 CSS px with exceptions including spacing; check platform-specific pt / dp guidance for native apps.

WCAG 2.2

Insets and keyboards

Leave space for bottom safe-area insets and keep the focused field and submit action visible. Test the software keyboard on a real device as well as in the browser.

MDN

Sheets and focus

Move focus into an open modal, provide an explicit close action, and restore focus to the trigger. Keep a clickable alternative to drag-only interactions.

WAI-ARIA APG

Take the brief with you.

Your selected scenario and platform shape the structure, acceptance checks, and library candidates. Share it with a developer or coding assistant.

Reading / Platform to confirm

Read the full brief

# Mobile design brief — Reading

Target platform: Confirm web or native before choosing a library.
For magazines, communities, and reading apps. Lead with one story, then keep saving and discovery within easy reach.

## Structure
- One lead story and a single-column reading feed
- Persistent bottom navigation with a clear current destination
- Immediate save feedback and a useful empty saved state

## Acceptance checks
- Headlines wrap; long text and larger type retain essential information.
- Saved state stays consistent across feed and saved views.
- Bottom navigation contains destinations; saving remains a separate action.
- Check 360px, 390px, and 430px viewports without horizontal overflow.
- Check safe areas, software keyboards, keyboard focus, dark mode, and reduced motion.
- Add loading, empty, success, and error states for real data; local demo state is not a connected service.

## Library candidates (choose a compatible combination)
- ChunUI (swiftui; MIT): https://github.com/liseami/ChunUI#readme
An emerging project requiring iOS 18.6+ and Swift tools 6.2. Its README uses the main branch, so pin a revision and verify compatibility before production use.
- ShipSwift (swiftui; MIT): https://github.com/signerlabs/ShipSwift#readme
The MIT repository includes components that can be copied locally, while its README also describes Pro recipes served online. Check each source file, dependency, and service requirement before reuse.
- Blossom Carousel (web, react, vue; Apache-2.0): https://www.blossom-carousel.com
This is a web carousel, not a native iOS or Android component; cyclical scrolling is still marked experimental.
- Ant Design Mobile (react; MIT): https://mobile.ant.design/
It targets React in the browser, not React Native. Its default visual language is strong, so adopt selectively to preserve the product's visual identity.
- Vant (vue; MIT): https://vant-ui.github.io/vant/
Vant components cannot be used directly in React projects. The current line targets Vue 3; legacy Vue 2 projects need the matching version.
- Ionic Framework (web, react, vue; MIT): https://ionicframework.com/docs
It is an app toolkit, not just a few controls. Native deployment usually pairs with Capacitor; a project adding only one control can borrow its patterns without adopting the full stack.
- Framework7 (web, react, vue; MIT): https://framework7.io/docs/
It owns much of the app structure and routing, so it is better as a pattern reference or a separate prototype inside an existing Next.js product.
- Swiper (web, react, vue; MIT): https://swiperjs.com/react
Its feature set is broader than a basic carousel. Prefer native horizontal scrolling for simple rails and add Swiper when its gesture or module features are needed.
- React Native Paper (react-native; MIT): https://callstack.github.io/react-native-paper/
Its components run in React Native and cannot be used directly in a regular browser DOM; use PaperProvider and configure a theme.
- Tamagui (web, react-native; MIT): https://tamagui.dev/docs/intro/installation
Cross-platform reuse brings configuration and theming decisions; native projects require React Native 0.81+ with the New Architecture. It is substantial overhead for styling one existing web page.

Visual reference: https://www.stylekit.top/en/styles/mobile-editorial
SwiftUI / React Native components do not run directly in Next.js; web previews do not replace native-device verification.