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:

  {children}

HStack / VStack

Horizontal and vertical flex layouts:

  
  Username



  Title
  Content

Text

Typography with token support:

  Hello World

Button

Interactive button with variants:

  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

  
  
    {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) => (
  
    {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