Getting Started

Introduction

The @codeleap/styles library provides a comprehensive styling system for React and React Native applications. Built with TypeScript, it offers a unified approach to styling components with powerful theming capabilities, responsive design support, and an intuitive variant-based API.

This documentation is for the current V2 style system from @codeleap/styles.

If the project is older and still depends on the legacy styling system from @codeleap/common, read the V1 comparison page first and confirm the package boundary before copying patterns:

• Style System V1 vs V2

Key Features

• Unified Styling API: Single style prop for all styling needs
• Theme-First Approach: Centralized theme system with color schemes, spacing, and design tokens
• Responsive Design: Built-in breakpoint system for web applications
• TypeScript Support: Full type safety with excellent IntelliSense
• Variant System: Predefined and custom variants for consistent styling
• Performance Optimized: Efficient style processing and minimal runtime overhead
• Cross-Platform: Works seamlessly with React Native and React web applications

Style prop — quick reference

This is the most important thing to understand. Every component accepts a style prop that takes an array of string variants and/or style objects. This is NOT React Native's StyleSheet.

In real project code, the default order is:

1. use variants first
2. prefer the short variants for spacing and layout such as px, py, mt, mb, mx, my, and gap
3. only use createStyles(theme => ({})) when variants are not enough

// ✅ Correct — string variants + objects
<View style={['row', 'alignCenter', 'gap:2', 'p:3']} />
<Text style={['h2', 'textCenter', 'color:primary']} />
<Button style={['primary', 'fullWidth']} />

// ❌ Wrong — raw RN style objects passed directly
<View style={{ flexDirection: 'row', alignItems: 'center', gap: 16, padding: 24 }} />

Common string variants

Variant	Result
'flex'	display: flex, flex: 1
'row'	flexDirection: row
'column'	flexDirection: column
'center'	alignItems: center, justifyContent: center
'alignCenter'	alignItems: center
'justifySpaceBetween'	justifyContent: space-between
'full'	width: 100%, height: 100%
'fullWidth'	width: 100%
'absolute'	position: absolute
'p:N'	padding: baseSpacing * N
'px:N'	paddingHorizontal: baseSpacing * N
'py:N'	paddingVertical: baseSpacing * N
'm:N'	margin: baseSpacing * N
'gap:N'	gap: baseSpacing * N
'bg:colorToken'	backgroundColor: theme.colors.colorToken
'color:colorToken'	color: theme.colors.colorToken

Mixing variants with custom styles

// Variants first, then theme-aware styles only when needed
<View style={[
  'row', 'alignCenter', 'gap:2',  // string variants
  styles.container,                // from createStyles()
  { borderRadius: 8 },             // inline object for one-off values
]} />

Nested styles (child elements)

// Style child elements through the parent style prop
<Card style={[
  'primary',
  {
    title: ['h2', 'color:onPrimary'],
    icon: ['alignSelfCenter', { width: 24, height: 24 }],
  }
]} />

Installing the Library

Install @codeleap/styles using Bun:

bun add @codeleap/styles

Real app setup

In a real app, styling setup is usually centralized in an app module such as src/app/styles.

That module typically:

• configures StyleConstants
• imports the theme file early
• exports the app theme
• registers app-wide custom variants
• exposes the project StyleRegistry

This setup should happen before feature components rely on createStyles(...), theme tokens, or project variants.