iOS Kit
iOS interface kit: device frame, large-title navigation bar, tab bar, grouped lists, switch, segmented control, bottom sheet and app icons, with light and dark support.
Copy a prompt for your AI coding tool with the source, dependencies and usage
Props
IOSDeviceProps
Also accepts all props of React.ComponentProps<"main">
| Prop | Type | Default | Description |
|---|---|---|---|
| light | boolean | — | White status bar text, for photo and dark wallpaper screens |
| hideHomeIndicator | boolean | — | Hide the home indicator pill |
IOSPageProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title* required | string | — | — |
| large | boolean | true | Show the big collapsing title under the navigation bar |
| left | React.ReactNode | — | — |
| right | React.ReactNode | — | — |
| tabbed | boolean | — | Leave room for an IOSTabBar at the bottom |
| className | string | — | Background of the page, defaults to the grouped background |
| children | React.ReactNode | — | — |
IOSTabBarProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items* required | IOSTabItem[] | — | — |
| value* required | string | — | — |
| onValueChange* required | (id: string) => void | — | — |
| dark | boolean | — | Draw over a dark photographic screen |
| className | string | — | — |
IOSGroupProps
| Prop | Type | Default | Description |
|---|---|---|---|
| header | React.ReactNode | — | — |
| footer | React.ReactNode | — | — |
| className | string | — | — |
| children | React.ReactNode | — | — |
IOSRowProps
| Prop | Type | Default | Description |
|---|---|---|---|
| title* required | React.ReactNode | — | — |
| subtitle | React.ReactNode | — | — |
| detail | React.ReactNode | — | Value shown on the right in secondary color |
| icon | React.ReactNode | — | An icon element, drawn white on a rounded square of `iconClassName` |
| iconClassName | string | "bg-(color:--ios-blue)" | — |
| chevron | boolean | — | Show the disclosure chevron |
| right | React.ReactNode | — | Replaces the detail and chevron, for example an IOSSwitch |
| leading | React.ReactNode | — | Leading content that replaces the icon square, for example an avatar |
| destructive | boolean | — | — |
| onClick | () => void | — | — |
| className | string | — | — |
IOSSwitchProps
| Prop | Type | Default | Description |
|---|---|---|---|
| checked* required | boolean | — | — |
| onCheckedChange* required | (checked: boolean) => void | — | — |
| label | string | — | — |
| tint | string | — | — |
IOSSegmentedProps
| Prop | Type | Default | Description |
|---|---|---|---|
| options* required | string[] | — | — |
| value* required | number | — | — |
| onValueChange* required | (index: number) => void | — | — |
| className | string | — | — |
IOSButtonProps
Also accepts all props of React.ComponentProps<"button">
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "filled" | "tinted" | "plain" | — | — |
| tint | string | — | Any CSS color, defaults to the system blue |
IOSAppIconProps
| Prop | Type | Default | Description |
|---|---|---|---|
| icon | React.ReactNode | — | — |
| className | string | — | Tailwind background classes, for example a gradient |
| size | number | 60 | — |
| label | string | — | — |
| showLabel | boolean | — | Show the label under the icon, as on the home screen |
| labelClassName | string | — | — |
| onClick | () => void | — | — |
IOSSheetProps
| Prop | Type | Default | Description |
|---|---|---|---|
| open* required | boolean | — | — |
| onClose* required | () => void | — | — |
| title | string | — | — |
| left | React.ReactNode | — | — |
| right | React.ReactNode | — | — |
| height | string | "80%" | Height as a CSS length, defaults to a tall detent |
| children | React.ReactNode | — | — |
Install
$ npx shadcn@latest add https://chromotion.dev/r/ios-kit.json