iOS UI Kit: iOS 26 components for prototyping and vibe coding
Stop redrawing iOS in every prototype.
Pixel-accurate iOS 26 components for any AI agent.
- Plain HTML and CSSNo framework, no build step, works with any AI tool
- Built to iOS 26 specsExact sizes, real Liquid Glass, light and dark
- Saves tokensFar fewer tokens than building from scratch
Made by AI UX Playground · Not affiliated with Apple
Lock Screen
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 26 kit for my prototype. It has 40 components in plain HTML and CSS. Setup - Add once to `<head>`: `<link rel="stylesheet" href="https://aiuxplayground.com/kits/ios-26/v1/ios.css">`. Don't read, copy, or rewrite ios.css. - Put components inside the phone screen, `<div class="ios-surface">` (402px wide). Create one if it doesn’t exist. - 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-26. System - Liquid Glass: The Liquid Glass material behind iOS 26 bars, buttons, and sheets. https://aiuxplayground.com/kits/ios-26/v1/docs/glass.md - Status Bar: The time, signal, Wi-Fi, and battery at the top of every screen. https://aiuxplayground.com/kits/ios-26/v1/docs/status-bar.md - Home Indicator: The bar at the bottom of the screen that takes you home. https://aiuxplayground.com/kits/ios-26/v1/docs/home-indicator.md - Keyboard: The iOS keyboard, with letters, numbers, and suggestions. https://aiuxplayground.com/kits/ios-26/v1/docs/keyboard.md - Notification: Notifications on the Lock Screen and as a banner. https://aiuxplayground.com/kits/ios-26/v1/docs/notification.md - Face ID: The Face ID animation for scanning, success, and failure. https://aiuxplayground.com/kits/ios-26/v1/docs/face-id.md - HUD: A short confirmation like Copied or Silent Mode that fades away. https://aiuxplayground.com/kits/ios-26/v1/docs/hud.md - Dynamic Island: Live Activities in the Dynamic Island and on the Lock Screen. https://aiuxplayground.com/kits/ios-26/v1/docs/dynamic-island.md - Widgets: Home Screen widgets in small, medium, and large. https://aiuxplayground.com/kits/ios-26/v1/docs/widget.md Navigation - Navigation Bar: The top bar with the screen title and buttons like Back, Edit, or Done. https://aiuxplayground.com/kits/ios-26/v1/docs/nav-bar.md - Tab Bar: The floating glass bar at the bottom for switching between sections of an app. https://aiuxplayground.com/kits/ios-26/v1/docs/tab-bar.md - Segmented Control: A row of options where you pick one, like Day, Week, Month. https://aiuxplayground.com/kits/ios-26/v1/docs/segmented.md - Search Bar: A search field, in glass or filled, with an optional Cancel button. https://aiuxplayground.com/kits/ios-26/v1/docs/search.md - Toolbar: A bottom bar of actions for the current screen, like compose or delete. https://aiuxplayground.com/kits/ios-26/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-26/v1/docs/accessory.md Controls - List: Grouped rows like the Settings app, with icons, switches, and checkmarks. https://aiuxplayground.com/kits/ios-26/v1/docs/list.md - Switch: The on and off toggle. https://aiuxplayground.com/kits/ios-26/v1/docs/switch.md - Button: Buttons in every iOS 26 style, from glass to filled, in three sizes. https://aiuxplayground.com/kits/ios-26/v1/docs/button.md - Text Field: Text inputs for forms, including email, password, and error messages. https://aiuxplayground.com/kits/ios-26/v1/docs/text-field.md - Stepper: Minus and plus buttons for changing a number. https://aiuxplayground.com/kits/ios-26/v1/docs/stepper.md - Menu: The menu that pops out of a button or a long press. https://aiuxplayground.com/kits/ios-26/v1/docs/menu.md - Progress, waveform, timer: Progress bars, rings, a countdown timer, and an audio wave. https://aiuxplayground.com/kits/ios-26/v1/docs/progress.md - Slider: A slider for values like brightness or volume. https://aiuxplayground.com/kits/ios-26/v1/docs/slider.md - Picker: The spinning wheel for picking a time or value. https://aiuxplayground.com/kits/ios-26/v1/docs/picker.md - Date picker: Pick a date or time, in a compact field or a full calendar. https://aiuxplayground.com/kits/ios-26/v1/docs/date-picker.md - Activity indicator: The loading spinner. https://aiuxplayground.com/kits/ios-26/v1/docs/spinner.md - Pager and page control: Swipeable cards with page dots, for onboarding or galleries. https://aiuxplayground.com/kits/ios-26/v1/docs/pager.md - Chips: Small pills for filtering, like Unread or Flagged. https://aiuxplayground.com/kits/ios-26/v1/docs/chips.md - Disclosure: A list row that expands to show more rows. https://aiuxplayground.com/kits/ios-26/v1/docs/disclosure.md Alerts and sheets - Alert: The centered dialog that asks you to confirm or choose. https://aiuxplayground.com/kits/ios-26/v1/docs/alert.md - Sheet: The panel that slides up from the bottom, at half or full height. https://aiuxplayground.com/kits/ios-26/v1/docs/sheet.md - Action sheet: A list of choices that slides up from the bottom, with Cancel. https://aiuxplayground.com/kits/ios-26/v1/docs/action-sheet.md - Share sheet: The iOS share sheet with people, apps, and actions. https://aiuxplayground.com/kits/ios-26/v1/docs/share-sheet.md Content - Messages: An iMessage conversation with bubbles, typing dots, and the compose bar. https://aiuxplayground.com/kits/ios-26/v1/docs/messages.md - Tapbacks: Tapback reactions on messages, like a heart or thumbs up. https://aiuxplayground.com/kits/ios-26/v1/docs/message-reactions.md - Replies, photos, and links: Threaded replies, photos, link previews, and big emoji in Messages. https://aiuxplayground.com/kits/ios-26/v1/docs/message-replies.md - Audio and group chats: A group chat with sender names, avatars, and voice messages. https://aiuxplayground.com/kits/ios-26/v1/docs/message-group.md - Avatar: Profile pictures with initials, status dots, and groups. https://aiuxplayground.com/kits/ios-26/v1/docs/avatar.md - Badge: The red count on app icons, tabs, and list rows. https://aiuxplayground.com/kits/ios-26/v1/docs/badge.md - Empty state: What a screen shows when there is nothing in it yet. https://aiuxplayground.com/kits/ios-26/v1/docs/empty-state.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 Glass1 prop
- Status Bar4 props
- Home Indicator1 prop
- Keyboard2 props
- Notification1 prop
- Face ID2 props
- HUD3 props
- Dynamic Island1 prop
- Widgets3 props
- Navigation Bar1 prop
- Tab Bar2 props
- Segmented Control3 props
- Search Bar2 props
- Toolbar1 prop
- Bottom accessory2 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
- 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
Questions
What is the iOS UI Kit?
A free set of 40 iOS 26 components in plain HTML and CSS, including the status bar, tab bar, Dynamic Island, alerts, sheets, and Liquid Glass. It's built for prototyping with AI tools like Cursor, Claude Code, and Codex.
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 26, 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 26. 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).