One Config File, Every Component
React-Natives uses CSS custom properties for every color token. Change your brand color in a single config file and it propagates automatically across all 70+ components — in both light and dark mode, with no component-level overrides needed.
// theme-provider/config.ts
export const config = {
light: vars({
// Change these to re-theme your entire app
'--color-primary-500': '99 102 241',
'--color-primary-600': '79 70 229',
// Semantic surface tokens — light mode
'--color-background-0': '255 255 255',
'--color-background-50': '249 250 251',
'--color-background-100': '243 244 246',
// Typography
'--color-typography-900': '17 24 39',
'--color-typography-700': '55 65 81',
'--color-typography-500': '107 114 128',
}),
};
Automatic Dark Mode — Zero Configuration
Every component reads from semantic CSS variables that automatically swap values based on the system color scheme. No conditional styles, no theme provider state — just set `colorScheme` tokens in your config and everything adapts.
// Tokens automatically swap — no conditional logic needed
export const darkTokens = {
background0: '#0F172A', // ↔ '#FFFFFF' in light
background50: '#1E293B', // ↔ '#F9FAFB' in light
background100: '#334155', // ↔ '#F3F4F6' in light
typography900: '#F8FAFC', // ↔ '#111827' in light
typography700: '#CBD5E1', // ↔ '#374151' in light
typography500: '#94A3B8', // ↔ '#6B7280' in light
};
// Components just use tokens — works in both modes automatically
<Button action="primary"> // uses primary500 in both modes
<ButtonText>Save</ButtonText>
</Button>
Per-Component Overrides with Tailwind Classes
Need a one-off style? Pass a `className` prop directly on any component to override with NativeWind utility classes. No wrapper views, no style merging — just Tailwind classes applied directly to the component root.
import { Button, ButtonText, Card } from '@wireservers-ui/react-natives';
// Override background, padding, and border radius in one line
<Button
className="bg-rose-500 active:bg-rose-600 rounded-full px-8"
>
<ButtonText>Delete Account</ButtonText>
</Button>
// Stack utility classes with the existing component style
<Card className="shadow-lg border-2 border-indigo-200">
<CardBody className="gap-4 p-6">
<Text className="text-indigo-900 font-bold text-lg">
Premium Plan
</Text>
</CardBody>
</Card>
Semantic Color Tokens — Not Hex Values
Components never hard-code hex values. Every color reference uses a semantic token like `primary-500`, `background-0`, or `typography-900`. This means any token change in config instantly updates every component that uses it, and your design system stays consistent at scale.
// ✗ Don't hard-code hex values in component styles
const badStyle = { backgroundColor: '#6366F1' };
// ✓ Use semantic tokens — they adapt to your config and theme
<Button action="primary" /> // → primary500 from config
<Badge action="info" /> // → primary500 from config
<Switch defaultValue={true} /> // → primary500 from config
<Progress value={75} /> // → primary500 from config
<Slider defaultValue={[50]} /> // → primary500 from config
// Change once in config — all of the above update automatically
primary500: '#10B981', // ← swap to green, everything follows
Ready to make it yours?
Start with a component, change the config, and see your brand come to life.