iOS UI Kit: iOS 27 and foldable components for prototyping and vibe coding
Stop redrawing iOS in every prototype.
iOS 27 components and foldable layouts for any AI agent.
- Plain HTML and CSSNo framework, no build step, works with any AI tool
- Built for iOS 27Liquid Glass settings, foldable layouts, light and dark
- Saves tokensFar fewer tokens than building from scratch
Made by AI UX Playground · Not affiliated with Apple
Foldable
How to use
- Step 1Copy the kit prompt below.
- Step 2Paste it into Cursor, Claude Code, or any AI agent.
- Step 3Ask for a screen, like “Settings with a tab bar.”
Use the iOS 27 kit for my prototype. It has 51 components in plain HTML and CSS. Setup - Add once to `<head>`: `<link rel="stylesheet" href="https://aiuxplayground.com/kits/ios-27/v1/ios.css">`. Don't read, copy, or rewrite ios.css. - Put components inside the phone screen, `<div class="ios-surface ios27">` (402px wide). Create one if it doesn’t exist. The `ios27` class turns on the iOS 27 look; without it you get iOS 26. - Dark mode: add class `dark` to `ios-surface`. Light is the default. How to use - Pick the components my screens need from the list below, or use the ones I asked for. - Before writing a component, fetch its doc. It lists the props, notes, and example HTML. Only fetch the ones you use. - If you can't open links, tell me which components you need and I'll copy them from https://aiuxplayground.com/kits/ios-27. System - Liquid Glass: The Liquid Glass material, retuned for iOS 27 with a transparency setting from clear to tinted. https://aiuxplayground.com/kits/ios-27/v1/docs/glass.md - Status Bar: The time, signal, Wi-Fi, and battery at the top of every screen. https://aiuxplayground.com/kits/ios-27/v1/docs/status-bar.md - Home Indicator: The bar at the bottom of the screen that takes you home. https://aiuxplayground.com/kits/ios-27/v1/docs/home-indicator.md - Keyboard: The iOS keyboard, with letters, numbers, and suggestions. https://aiuxplayground.com/kits/ios-27/v1/docs/keyboard.md - Notification: Notifications on the Lock Screen and as a banner. https://aiuxplayground.com/kits/ios-27/v1/docs/notification.md - Face ID: The Face ID animation for scanning, success, and failure. https://aiuxplayground.com/kits/ios-27/v1/docs/face-id.md - HUD: A short confirmation like Copied or Silent Mode that fades away. https://aiuxplayground.com/kits/ios-27/v1/docs/hud.md - Dynamic Island: Live Activities in the Dynamic Island and on the Lock Screen. https://aiuxplayground.com/kits/ios-27/v1/docs/dynamic-island.md - Widgets: Home Screen widgets in small, medium, and large. https://aiuxplayground.com/kits/ios-27/v1/docs/widget.md - Search or Ask: The Search or Ask pill that sits in the Dynamic Island and opens into a text field. https://aiuxplayground.com/kits/ios-27/v1/docs/assistant.md - Assistant answer: The dark translucent panel an assistant answers in, hanging under the pill. https://aiuxplayground.com/kits/ios-27/v1/docs/assistant-panel.md Navigation - Navigation Bar: The top bar with the screen title and buttons like Back, Edit, or Done. https://aiuxplayground.com/kits/ios-27/v1/docs/nav-bar.md - Tab Bar: The floating glass bar at the bottom, now with a prominent tab that takes the tint. https://aiuxplayground.com/kits/ios-27/v1/docs/tab-bar.md - Segmented Control: A row of options where you pick one, like Day, Week, Month. https://aiuxplayground.com/kits/ios-27/v1/docs/segmented.md - Search Bar: A search field, in glass or filled, with an optional Cancel button. https://aiuxplayground.com/kits/ios-27/v1/docs/search.md - Toolbar: A bottom bar of actions for the current screen, like compose or delete. https://aiuxplayground.com/kits/ios-27/v1/docs/toolbar.md - Bottom accessory: The mini player that sits on top of the tab bar while music plays. https://aiuxplayground.com/kits/ios-27/v1/docs/accessory.md - Hard scroll edge: The frosted bar and hairline that appear under the status bar when content scrolls. https://aiuxplayground.com/kits/ios-27/v1/docs/scroll-edge-hard.md - Sidebar: A tab bar shown as a sidebar, for landscape and wide screens. https://aiuxplayground.com/kits/ios-27/v1/docs/sidebar.md Controls - List: Grouped rows like the Settings app, with icons, switches, and checkmarks. https://aiuxplayground.com/kits/ios-27/v1/docs/list.md - Switch: The on and off toggle. https://aiuxplayground.com/kits/ios-27/v1/docs/switch.md - Button: Buttons in every iOS 26 style, from glass to filled, in three sizes. https://aiuxplayground.com/kits/ios-27/v1/docs/button.md - Text Field: Text inputs for forms, including email, password, and error messages. https://aiuxplayground.com/kits/ios-27/v1/docs/text-field.md - Stepper: Minus and plus buttons for changing a number. https://aiuxplayground.com/kits/ios-27/v1/docs/stepper.md - Menu: The menu that pops out of a button or a long press. https://aiuxplayground.com/kits/ios-27/v1/docs/menu.md - Progress, waveform, timer: Progress bars, rings, a countdown timer, and an audio wave. https://aiuxplayground.com/kits/ios-27/v1/docs/progress.md - Slider: A slider for values like brightness or volume. https://aiuxplayground.com/kits/ios-27/v1/docs/slider.md - Picker: The spinning wheel for picking a time or value. https://aiuxplayground.com/kits/ios-27/v1/docs/picker.md - Date picker: Pick a date or time, in a compact field or a full calendar. https://aiuxplayground.com/kits/ios-27/v1/docs/date-picker.md - Activity indicator: The loading spinner. https://aiuxplayground.com/kits/ios-27/v1/docs/spinner.md - Pager and page control: Swipeable cards with page dots, for onboarding or galleries. https://aiuxplayground.com/kits/ios-27/v1/docs/pager.md - Chips: Small pills for filtering, like Unread or Flagged. https://aiuxplayground.com/kits/ios-27/v1/docs/chips.md - Disclosure: A list row that expands to show more rows. https://aiuxplayground.com/kits/ios-27/v1/docs/disclosure.md - Liquid Glass setting: The Settings slider that moves Liquid Glass from clear to tinted, with a live preview. https://aiuxplayground.com/kits/ios-27/v1/docs/glass-setting.md Alerts and sheets - Alert: The centered dialog that asks you to confirm or choose. https://aiuxplayground.com/kits/ios-27/v1/docs/alert.md - Sheet: The panel that slides up from the bottom, at half or full height. https://aiuxplayground.com/kits/ios-27/v1/docs/sheet.md - Action sheet: A list of choices that slides up from the bottom, with Cancel. https://aiuxplayground.com/kits/ios-27/v1/docs/action-sheet.md - Share sheet: The iOS share sheet with people, apps, and actions. https://aiuxplayground.com/kits/ios-27/v1/docs/share-sheet.md Content - Messages: An iMessage conversation with bubbles, typing dots, and the compose bar. https://aiuxplayground.com/kits/ios-27/v1/docs/messages.md - Tapbacks: Tapback reactions on messages, like a heart or thumbs up. https://aiuxplayground.com/kits/ios-27/v1/docs/message-reactions.md - Replies, photos, and links: Threaded replies, photos, link previews, and big emoji in Messages. https://aiuxplayground.com/kits/ios-27/v1/docs/message-replies.md - Audio and group chats: A group chat with sender names, avatars, and voice messages. https://aiuxplayground.com/kits/ios-27/v1/docs/message-group.md - Avatar: Profile pictures with initials, status dots, and groups. https://aiuxplayground.com/kits/ios-27/v1/docs/avatar.md - Badge: The red count on app icons, tabs, and list rows. https://aiuxplayground.com/kits/ios-27/v1/docs/badge.md - Empty state: What a screen shows when there is nothing in it yet. https://aiuxplayground.com/kits/ios-27/v1/docs/empty-state.md Foldable - Corner status: The status on a foldable iPhone: time, then one ring with battery, signal, and Wi-Fi. https://aiuxplayground.com/kits/ios-27/v1/docs/fold-status.md - Foldable island: The camera capsule in the corner of a foldable iPhone that grows with Live Activities. https://aiuxplayground.com/kits/ios-27/v1/docs/fold-island.md - Side rail: The nav bar, toolbar, and tab bar turned on their side into one column. https://aiuxplayground.com/kits/ios-27/v1/docs/rail.md - Split View: Two apps side by side on the open foldable in landscape, always 50/50. https://aiuxplayground.com/kits/ios-27/v1/docs/split-view.md - Fold-aware layout: A two-column layout that keeps text out of the fold. https://aiuxplayground.com/kits/ios-27/v1/docs/fold-columns.md - Vertical dock: The Home Screen dock standing up along the edge of a foldable iPhone. https://aiuxplayground.com/kits/ios-27/v1/docs/dock-vertical.md Keep the class names and attributes as they are. Rewrite the text and swap icons to fit my app. Wrapper divs and inline spacing in the examples are only for the demo.
All components
- Liquid Glass3 props
- Status Bar4 props
- Home Indicator1 prop
- Keyboard2 props
- Notification1 prop
- Face ID2 props
- HUD3 props
- Dynamic Island1 prop
- Widgets3 props
- Search or Ask2 props
- Assistant answer
- Navigation Bar1 prop
- Tab Bar3 props
- Segmented Control3 props
- Search Bar2 props
- Toolbar1 prop
- Bottom accessory2 props
- Hard scroll edge2 props
- Sidebar3 props
- List4 props
- Switch3 props
- Button4 props
- Text Field4 props
- Stepper1 prop
- Menu5 props
- Progress, waveform, timer5 props
- Slider3 props
- Picker3 props
- Date picker3 props
- Activity indicator2 props
- Pager and page control3 props
- Chips3 props
- Disclosure1 prop
- Liquid Glass setting
- Alert4 props
- Sheet2 props
- Action sheet3 props
- Share sheet1 prop
- Messages4 props
- Tapbacks3 props
- Replies, photos, and links4 props
- Audio and group chats3 props
- Avatar4 props
- Badge4 props
- Empty state
- Corner status5 props
- Foldable island1 prop
- Side rail2 props
- Split View
- Fold-aware layout2 props
- Vertical dock2 props
Questions
What is the iOS 27 UI Kit?
A free set of 51 iOS 27 components in plain HTML and CSS. It has the iOS 26 parts plus the Liquid Glass transparency setting, the hard scroll edge, the sidebar, the Search or Ask pill, and layouts for a foldable iPhone. It's built for prototyping with AI tools like Cursor, Claude Code, and Codex.
How is it different from the iOS 26 kit?
It includes everything in the iOS 26 kit, retuned for iOS 27, and adds new components: a glass transparency slider, a hard scroll edge, a sidebar, the Search or Ask pill and its answer panel, and a Foldable section with the side rail, split view, and fold-aware columns.
How do I turn on the iOS 27 look?
Add the ios27 class to the screen, or to any element above the components. Every preview on this page already has it. Without the class you get the iOS 26 look.
How accurate are the iOS 27 and foldable parts?
The iOS 26 parts follow published sizes. The iOS 27 additions and the foldable layouts are close approximations built from public screenshots and measurements, so check them against the real thing before you show a client.
Is it free?
Yes. The whole kit is free for personal and client prototypes, with no sign-up. Link the hosted stylesheet or copy the components you need.
Do I need React or a build step?
No. Each component is HTML plus one stylesheet link. It works in a plain HTML file, in React or Vue, or inside anything your AI tool generates.
Will it look right on Windows or Android?
Mostly. The kit uses Apple's system font, so other devices fall back to Helvetica or Arial and the text looks a little different. Layout, sizes, and glass effects stay the same.
Can I change the colors?
Yes. Set --ios-tint to change the accent color everywhere. Add the dark class to the screen to switch it to dark mode.
Why not just ask my AI to build these?
It will guess. The battery, the Dynamic Island, and the glass usually come out a little wrong, and you fix them by hand on every project. The kit is built once against iOS 27, so you paste it and move on.
Can I use it in client work?
Yes, for prototypes and mockups. The app icons are generic placeholders, so swap in your own. A few glyphs come from Lucide, which allows commercial use.
Is this made by Apple?
No. It is an independent kit built to match iOS 27. Apple, iPhone, and iOS are trademarks of Apple Inc.
Who built this kit?
The team behind AI UX Playground at Bestfolios.com. We built it for our own AI prototypes and made it free for everyone.
Not affiliated with Apple. App icons are generic placeholders. Some glyphs derive from Lucide (ISC License).