Core Components

--- name: core-components description: Core component library and design system patterns. Use when building a UI, using design tokens, or working with the component library. --- # 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 ``tsx // CORRECT - Use tokens <Box padding="$4" marginBottom="$2" /> // WRONG - Hard-coded values <Box padding={16} marginBottom={8} /> | Token | Value | |-------|-------| | $1 | 4px | | $2 | 8px | | $3 | 12px | | $4 | 16px | | $6 | 24px | | $8 | 32px | ### Color Tokens tsx // CORRECT - Semantic tokens <Text color="$textPrimary" /> <Box backgroundColor="$backgroundSecondary" /> // WRONG - Hard-coded colors <Text color="#333333" /> <Box backgroundColor="rgb(245, 245, 245)" /> | 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 <Text fontSize="$lg" fontWeight="$semibold" /> | Token | Size | |-------|------| | $xs | 12px | | $sm | 14px | | $md | 16px | | $lg | 18px | | $xl | 20px | | $2xl | 24px | ## Core Components ### Box Base layout component with token support: tsx <Box padding="$4" backgroundColor="$backgroundPrimary" borderRadius="$lg" > {children} </Box> ### HStack / VStack Horizontal and vertical flex layouts: tsx <HStack gap="$3" alignItems="center"> <Icon name="user" /> <Text>Username</Text> </HStack> <VStack gap="$4" padding="$4"> <Heading>Title</Heading> <Text>Content</Text> </VStack> ### Text Typography with token support: tsx <Text fontSize="$lg" fontWeight="$semibold" color="$textPrimary" > Hello World </Text> ### Button Interactive button with variants: tsx <Button onPress={handlePress} variant="solid" size="md" isLoading={loading} isDisabled={disabled} > Click Me </Button> | Variant | Use For | |---------|---------| | solid | Primary actions | | outline | Secondary actions | | ghost | Tertiary/subtle actions | | link | Inline actions | ### Input Form input with validation: tsx <Input value={value} onChangeText={setValue} placeholder="Enter text" error={touched ? errors.field : undefined} label="Field Name" /> ### Card Content container: tsx <Card padding="$4" gap="$3"> <CardHeader> <Heading size="sm">Card Title</Heading> </CardHeader> <CardBody> <Text>Card content</Text> </CardBody> </Card> ## Layout Patterns ### Screen Layout tsx const MyScreen = () => ( <Screen> <ScreenHeader title="Page Title" /> <ScreenContent padding="$4"> {/* Content */} </ScreenContent> </Screen> ); ### Form Layout tsx <VStack gap="$4" padding="$4"> <Input label="Name" {...nameProps} /> <Input label="Email" {...emailProps} /> <Button isLoading={loading}>Submit</Button> </VStack> ### List Item Layout tsx <HStack padding="$4" gap="$3" alignItems="center" borderBottomWidth={1} borderColor="$borderLight" > <Avatar source={{ uri: imageUrl }} size="md" /> <VStack flex={1}> <Text fontWeight="$semibold">{title}</Text> <Text color="$textSecondary" fontSize="$sm">{subtitle}</Text> </VStack> <Icon name="chevron-right" color="$textTertiary" /> </HStack> ## Anti-Patterns tsx // WRONG - Hard-coded values <View style={{ padding: 16, backgroundColor: '#fff' }}> // CORRECT - Design tokens <Box padding="$4" backgroundColor="$backgroundPrimary"> // WRONG - Raw platform components import { View, Text } from 'react-native'; // CORRECT - Core components import { Box, Text } from 'components/core'; // WRONG - Inline styles <Text style={{ fontSize: 18, fontWeight: '600' }}> // CORRECT - Token props <Text fontSize="$lg" fontWeight="$semibold"> `` ## Component Props Pattern When creating components, use tok