Customization

Learn how to customize nativecn-ui components to match your design system.

Design Philosophy

nativecn-ui components are designed to be easily customizable. We use a consistent approach to styling that makes it simple to adapt components to your brand while maintaining a premium feel.

Colors

Easily swap hex codes to match your brand palette

Typography

Use your own font families and weight scales

Spacing

Consistent padding and margin variables

Creating a Theme

We recommend creating a central theme file to manage your design tokens. This keeps your design system consistent.

theme.ts
export const theme = {
  colors: {
    primary: '#3B82F6',
    secondary: '#8B5CF6',
    background: '#0F172A',
    surface: '#1E293B',
    text: '#F8FAFC',
    textMuted: '#94A3B8',
    border: '#334155',
    success: '#22C55E',
    error: '#EF4444',
  },
  spacing: {
    xs: 4, sm: 8, md: 16, lg: 24, xl: 32,
  },
  borderRadius: {
    sm: 4, md: 8, lg: 12, xl: 16, full: 9999,
  },
  fontSize: {
    xs: 12, sm: 14, base: 16, lg: 18, xl: 20, '2xl': 24,
  },
};

Using the Theme

Reference your theme in component styles for immediate consistency across your app.

components/ui/Button.tsx
import { StyleSheet } from 'react-native';
import { theme } from '../theme';

const styles = StyleSheet.create({
  button: {
    backgroundColor: theme.colors.primary,
    paddingVertical: theme.spacing.md,
    paddingHorizontal: theme.spacing.lg,
    borderRadius: theme.borderRadius.lg,
  },
  buttonText: {
    color: theme.colors.text,
    fontSize: theme.fontSize.base,
    fontWeight: '600',
  },
});

Customization Tips

Best Practices

  • Start simple – Only customize what you need first
  • Be consistent – Use theme tokens everywhere
  • Test on devices – Validation on real screens is key
  • Consider accessibility – Check color contrast ratios

Need More Help?

If you need help customizing components, check out our examples or join the community.

View Component Examples
InstallationBrowse Components