core-components

Core Components Design System Overview

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

Design Tokens

NEVER hard-code values. Always use design tokens.

Spacing Tokens // CORRECT - Use tokens

// WRONG - Hard-coded values

Token Value $1 4px $2 8px $3 12px $4 16px $6 24px $8 32px Color Tokens // 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

Token Size $xs 12px $sm 14px $md 16px $lg 18px $xl 20px $2xl 24px Core Components Box

Base layout component with token support:

<Box padding="$4" backgroundColor="$backgroundPrimary" borderRadius="$lg"

{children}

HStack / VStack

Horizontal and vertical flex layouts:

Username

Title Content

Text

Typography with token support:

<Text fontSize="$lg" fontWeight="$semibold" color="$textPrimary"

Hello World

Button

Interactive button with variants:

<Button 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:

Card

Content container:

Card Title Card content

Layout Patterns Screen Layout const MyScreen = () => ( {/ Content /} );

Form Layout Submit

List Item Layout <HStack padding="$4" gap="$3" alignItems="center" borderBottomWidth={1} borderColor="$borderLight"

{title} {subtitle}

Anti-Patterns // 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

Component Props Pattern

When creating components, use token-based props:

interface CardProps { padding?: '$2' | '$4' | '$6'; variant?: 'elevated' | 'outlined' | 'filled'; children: React.ReactNode; }

const Card = ({ padding = '$4', variant = 'elevated', children }: CardProps) => ( <Box padding={padding} backgroundColor="$backgroundPrimary" borderRadius="$lg"

{children}

);

Integration with Other Skills react-ui-patterns: Use core components for UI states testing-patterns: Mock core components in tests storybook: Document component variants