core-components

Core Components - Core Component Library and Design System

Skill Overview

Core Components is a design-tokens-based UI component library that provides unified layout components, form controls, and a styling system to help developers build consistent React Native application interfaces.

Applicable Scenarios

Building React Native application interfaces: When you need to create mobile UIs, using the core component library ensures consistency of styles and behavior and avoids repeatedly writing layout code.

Requiring a unified design specification: When a team needs to maintain visual consistency across multiple pages or apps, managing colors, spacing, fonts, and other design variables through design tokens enables a globally consistent design system.

Form and list layout development: When you need to quickly implement common UI patterns like form inputs, card containers, and list items, the core components provide out-of-the-box layout patterns and validation support.

Core Features

Design Tokens system

Provides spacing tokens $1–$8, semantic color tokens (e.g., $textPrimary, $statusError), and font-size tokens $xs–$2xl. By using tokens instead of hard-coded values, you ensure consistent styling across the app and support theme switching and responsive adjustments.

Core layout component library

Includes the Box base layout container, HStack/VStack flexible layout components, Text typography component, Button with multiple variants, Input form input, and Card content container. All components support design token properties and provide a consistent API style.

Layout patterns and best practices

Presets common layout patterns such as Screen, Form, and List Item, and provides anti-pattern examples (e.g., avoid hard-coding, avoid native platform components). Also includes integration guides with other skills (like react-ui-patterns, testing-patterns, storybook).

Frequently Asked Questions

What are design tokens and why use them?

Design tokens are named variables in a design system, such as $4 representing 16px spacing or $textPrimary representing the primary text color. Using design tokens avoids hard-coded style values—when design specifications change, you only need to update the token definitions and the whole app updates automatically. Tokens also provide semantic naming (e.g., $statusError), making code easier to understand and maintain.

How to avoid hard-coding style values?

The core component library exposes all commonly used design token properties. For spacing, use tokens $1–$8 (e.g., padding="$4"); for colors, use semantic tokens (e.g., backgroundColor="$backgroundPrimary"); for fonts, use size tokens (e.g., fontSize="$lg"). All core components (Box, Text, Button, etc.) directly support these token properties without needing inline styles.

What is the difference between the Box component and the platform-native View?

Box is a base layout component wrapped around the platform View with native support for design tokens. You can use padding="$4" instead of style={{ padding: 16 }}, and backgroundColor="$primary500" instead of style={{ backgroundColor: '#3b82f6' }}. Box also provides a more consistent API style and works more smoothly with other core components (HStack, VStack, Card).

Which common components are included in the core component library?

The core library includes Box (base layout container), HStack/VStack (horizontal/vertical flex layouts), Text (typography), Button (supports solid/outline/ghost/link variants), Input (form input with validation), Card (content container), Screen/ScreenHeader/ScreenContent (page layout components), etc. All components support design token properties and provide unified interaction states (such as isLoading, isDisabled).

How to implement layouts with HStack and VStack?

HStack is used to arrange children horizontally, VStack is used for vertical arrangement. Both support a gap property to control spacing between children (using design tokens, e.g., gap="$3") as well as alignItems, justifyContent, and other flex properties. For example: <HStack gap="$3" alignItems="center"><Icon /><Text>Content</Text></HStack> arranges an icon and text horizontally.

What Button variants are available and when to use each?

Button provides four variants: solid (filled button for primary actions), outline (outlined button for secondary actions), ghost (ghost button for tertiary or subtle actions), and link (link-style button for inline actions). Each variant also supports a size property to control size, isLoading to show loading state, and isDisabled for disabled state.

How to implement form inputs with validation?

The Input component has built-in validation support, accepting an error prop to display error state and a label prop to show the field label. It is typically used with form libraries: <Input value={value} onChangeText={setValue} placeholder="Enter text" error={touched ? errors.field : undefined} label="Field name" />. The core library also provides form layout pattern examples; using VStack + gap can quickly arrange multiple form items.

How does the core component library integrate with testing patterns?

Core components support mocking in tests so you can simulate component behavior without relying on real rendering. When used with testing-patterns, you can create test doubles for core components. Combined with storybook, you can visualize components in various states to help document and reuse them across the team.