@ayuuxh/ios-kit
v0.2.0
Published
Premium iOS-style UI components for React with buttery smooth animations
Maintainers
ayuuxhReadme
@ayuuxh/ios-kit 🍏
A premium, high-performance React component library for building native-feeling iOS interfaces on the web.
Features
- Native Physics: Framer Motion powered interactions (Standard iOS spring curves).
- Theme Engine:
useIOSThemehandles persistent Light/Dark modes automatically. - Micro-interactions: Scale-on-touch, haptic feedback simulation.
- Accessibility: ARIA-compliant primitives.
Installation
npm install @ayuuxh/ios-kit framer-motion clsx tailwind-mergeQuick Start
1. Setup Theme Provider
Use the useIOSTheme hook to manage the system theme. It automatically syncs with localStorage and <html> classes.
import { useIOSTheme } from '@ayuuxh/ios-kit'
export default function App() {
const { isDark, setTheme } = useIOSTheme()
return (
<main className={isDark ? 'dark' : ''}>
{/* Your App */}
</main>
)
}2. Use Components
import { Button, TextField, ActionSheet } from '@ayuuxh/ios-kit'
function MyComponent() {
const [isOpen, setIsOpen] = React.useState(false)
return (
<div className="p-4 space-y-4">
<TextField placeholder="Enter details..." />
<Button onClick={() => setIsOpen(true)}>
Open Actions
</Button>
<ActionSheet
isOpen={isOpen}
onClose={() => setIsOpen(false)}
actions={[
{ label: 'Edit', onClick: () => {} },
{ label: 'Delete', destructive: true, onClick: () => {} }
]}
/>
</div>
)
}Components
- Inputs:
TextField,Switch,Slider,SegmentedControl - Navigation:
NavigationBar,TabBar,TabBarItem - Overlays:
BottomSheet,ActionSheet,Dialog - Basics:
Button,Spinner
TailWind Config
Ensure your tailwind.config.ts supports dark mode via class:
// tailwind.config.ts
export default {
darkMode: 'class',
// ...
}License
MIT