Skip to Content
← Back to UI Components

Cupertino UI Components

iOS-style components that follow Apple's Human Interface Guidelines. Build beautiful native-looking interfaces with WebF.

Try In WebF Go →View on GitHub →

Theme & Colors

Cupertino color system and iconography

Cupertino Colors

Static and dynamic Cupertino colors following iOS design guidelines

View Docs

Cupertino Icons

iOS SF Symbols icon set with 1000+ icons

View Docs

Navigation, Tabs & Pages

Navigation components for app structure

Tab Scaffold

TabScaffold · TabBar · TabView · Controller for iOS-style tabbed navigation

View Docs

Dialogs, Sheets & Menus

Modal overlays and contextual menus

Cupertino Alert Dialog

Native iOS-style alert dialogs with customizable actions

View Docs

Cupertino Action Sheet

Bottom-anchored action sheet with multiple options

View Docs

Cupertino Modal Popup

Bottom sheet style modal popup for iOS

View Docs

Cupertino Context Menu

Long-press context menu with peek and pop animations

View Docs

Lists & Forms

Structured lists and form components

CupertinoListSection

Grouped list sections with header and footer

View Docs

CupertinoListTile

iOS-style list tiles with leading, title, subtitle, and trailing widgets

View Docs

CupertinoFormSection

Form sections with rows for grouped settings

View Docs

Text Input & Search

Text input and search components

CupertinoTextField

Single-line iOS-style text input with customizable styling

View Docs

CupertinoTextFormFieldRow

Inline text field row for form sections

View Docs

CupertinoSearchTextField

iOS-style search bar with clear button

View Docs

Pickers

Date and time selection components

CupertinoDatePicker

iOS-style date and time picker with spinning wheel interface

View Docs

Controls

Interactive buttons and input controls

Cupertino Buttons

iOS-style buttons with filled and outlined variants

View Docs

CupertinoSwitch

iOS-style toggle switch for boolean values

View Docs

CupertinoSlider

Value selection slider with iOS styling

View Docs

Sliding Segmented Control

Segmented control with smooth sliding thumb animation

View Docs

CupertinoCheckBox

iOS-style checkbox for multiple selection

View Docs

CupertinoRadio

iOS-style radio button for single selection

View Docs

Getting Started

Install and usage examples for React and Vue.

React

Install
1npm install @openwebf/react-cupertino-ui
Buttons.tsx
1import { FlutterCupertinoButton } from '@openwebf/react-cupertino-ui';
2
3export function ButtonsExample() {
4  return (
5    <FlutterCupertinoButton variant="filled" onClick={() => console.log('Clicked')}>
6      Continue
7    </FlutterCupertinoButton>
8  );
9}

Vue

Install
1npm install @openwebf/vue-cupertino-ui
Buttons.vue
1<template>
2  <flutter-cupertino-button variant="filled" @click="() => console.log('Clicked')">
3    Continue
4  </flutter-cupertino-button>
5</template>