core-components

Use components from your core library instead of raw platform components. This ensures consistent styling and behavior.

NEVER hard-code values. Always use design tokens.

Spacing Tokens

```tsx

// CORRECT - Use tokens

// WRONG - Hard-coded values

```

| Token | Value |

|-------|-------|

| $1 | 4px |

| $2 | 8px |

| $3 | 12px |

| $4 | 16px |

| $6 | 24px |

| $8 | 32px |

Color Tokens

```tsx

// CORRECT - Semantic tokens

// WRONG - Hard-coded colors

```

| Semantic Token | Use For |

|----------------|---------|

| $textPrimary | Main text |

| $textSecondary | Supporting text |

| $textTertiary | Disabled/hint text |

| $primary500 | Brand/accent color |

| $statusError | Error states |

| $statusSuccess | Success states |

Typography Tokens

```tsx

```

| Token | Size |

|-------|------|

| $xs | 12px |

| $sm | 14px |

| $md | 16px |

| $lg | 18px |

| $xl | 20px |

| $2xl | 24px |

Box

Base layout component with token support:

```tsx

padding="$4"

backgroundColor="$backgroundPrimary"

borderRadius="$lg"

>

{children}

```

HStack / VStack

Horizontal and vertical flex layouts:

```tsx

Username

Title

Content

```

Text

Typography with token support:

```tsx

fontSize="$lg"

fontWeight="$semibold"

color="$textPrimary"

>

Hello World

```

Button

Interactive button with variants:

```tsx

onPress={handlePress}

variant="solid"

size="md"

isLoading={loading}

isDisabled={disabled}

>

Click Me

```

| Variant | Use For |

|---------|---------|

| solid | Primary actions |

| outline | Secondary actions |

| ghost | Tertiary/subtle actions |

| link | Inline actions |

Input

Form input with validation:

```tsx

value={value}

onChangeText={setValue}

placeholder="Enter text"

error={touched ? errors.field : undefined}

label="Field Name"

/>

```

Card

Content container:

```tsx

Card Title

Card content

```

Screen Layout

```tsx

const MyScreen = () => (

{/ Content /}

);

```

Form Layout

```tsx

Submit

```

List Item Layout

```tsx

padding="$4"

gap="$3"

alignItems="center"

borderBottomWidth={1}

borderColor="$borderLight"

>

{title}

{subtitle}

```

```tsx

// WRONG - Hard-coded values

// CORRECT - Design tokens

// WRONG - Raw platform components

import { View, Text } from 'react-native';

// CORRECT - Core components

import { Box, Text } from 'components/core';

// WRONG - Inline styles

// CORRECT - Token props

```

When creating components, use token-based props:

```tsx

interface CardProps {

padding?: '$2' | '$4' | '$6';

variant?: 'elevated' | 'outlined' | 'filled';

children: React.ReactNode;

}

const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => (

padding={padding}

backgroundColor="$backgroundPrimary"

borderRadius="$lg"

{...variantStyles[variant]}

>

{children}

);

```

• react-ui-patterns: Use core components for UI states
• testing-patterns: Mock core components in tests
• storybook: Document component variants