react native ui kit colors
npm install react-native-uikit-colorsA cross-platform color system for React Native and React Native Web that provides iOS-style semantic colors with dark mode support. Seamlessly integrates with NativeWind/TailwindCSS.
- 🎨 iOS-style semantic colors that automatically adapt to light/dark mode
- 🌐 Cross-platform support (iOS, Android, Web)
- 🔄 Dynamic color updates when system theme changes
- 🎯 TypeScript support
- 🌊 NativeWind/TailwindCSS integration
``bash`
npm install react-native-uikit-colorsor
yarn add react-native-uikit-colors
Update your tailwind.config.js:
`js
import { withUIKit } from 'react-native-uikit-colors/tailwind'
export default withUIKit({
// your existing tailwind config
})
`
If you're using React Native Web, add the CSS injection hook to your components:
`tsx
'use dom'
import { useCSSInjection } from 'react-native-uikit-colors/web'
function App() {
useCSSInjection()
return
}
`
`tsx
const RootProviders = ({ children }: { children: ReactNode }) => {
useColorScheme() // Observe color scheme changes
const currentThemeColors = useCurrentColorsVariants()!
return
}
// Your App Entry Component
export const App = () => {
return
}
`
Use semantic color classes directly in your components:
`tsx`
function MyComponent() {
return (
)
}
Use the useColor hook to get dynamic colors:
`tsx
import { useColor } from 'react-native-uikit-colors'
function MyComponent() {
const systemFill = useColor('systemFill')
const secondarySystemBackground = useColor('secondarySystemBackground')
// Works with Reanimated
const colorStyle = useAnimatedStyle(() => {
return {
backgroundColor: interpolateColor(
pressed.value,
[0, 1],
[secondarySystemBackground, systemFill],
),
}
})
return
}
`
This library provides all standard iOS semantic colors, including:
- system-background
-
-
-
-
-
-
-
-
-
-
-
-
-
- And more...
MIT