0
# Component Creation & Styling
1

2
Core component creation and styling capabilities for building reusable UI components with design tokens, variants, and responsive styles.
3

4
## Capabilities
5

6
### Styled Function
7

8
Creates a new styled component with design token support, variants, and responsive styles.
9

10
```typescript { .api }
11
/**
12
 * Creates a styled component with design tokens, variants, and responsive styles
13
 * @param component - Base component to style (View, Text, or custom component)
14
 * @param config - Style configuration with base styles and variants
15
 * @returns New Tamagui component with styling capabilities
16
 */
17
function styled<T extends React.ComponentType<any>>(
18
  component: T,
19
  config: StyledOptions,
20
  options?: ComponentOptions
21
): TamaguiComponent;
22

23
interface StyledOptions {
24
  /** Component name for debugging */
25
  name?: string;
26
  /** Variant definitions for dynamic styling */
27
  variants?: VariantsConfig;
28
  /** Default variant values */
29
  defaultVariants?: Record<string, any>;
30
  /** Base style properties using design tokens */
31
  [key: string]: any;
32
}
33

34
interface ComponentOptions {
35
  /** Treat component as text component */
36
  isText?: boolean;
37
  /** Accept specific props for validation */
38
  accept?: Record<string, any>;
39
  /** Inline props that bypass styling system */
40
  inlineProps?: Set<string>;
41
}
42

43
interface VariantsConfig {
44
  [variantName: string]: {
45
    [variantValue: string]: StyleObject | (() => StyleObject);
46
  };
47
}
48
```
49

50
**Usage Examples:**
51

52
```typescript
53
import { styled, View, Text } from "@tamagui/core";
54

55
// Basic styled component
56
const Card = styled(View, {
57
  backgroundColor: '$background',
58
  padding: '$4',
59
  borderRadius: '$3',
60
  shadowOpacity: 0.1,
61
  shadowRadius: 10,
62
});
63

64
// Component with variants
65
const Button = styled(View, {
66
  paddingHorizontal: '$4',
67
  paddingVertical: '$2',
68
  borderRadius: '$2',
69
  alignItems: 'center',
70
  justifyContent: 'center',
71
  
72
  variants: {
73
    size: {
74
      small: {
75
        paddingHorizontal: '$2',
76
        paddingVertical: '$1',
77
      },
78
      large: {
79
        paddingHorizontal: '$6',
80
        paddingVertical: '$3',
81
      },
82
    },
83
    color: {
84
      primary: {
85
        backgroundColor: '$blue',
86
      },
87
      secondary: {
88
        backgroundColor: '$gray',
89
      },
90
    },
91
    disabled: {
92
      true: {
93
        opacity: 0.5,
94
        pointerEvents: 'none',
95
      },
96
    },
97
  },
98
  
99
  defaultVariants: {
100
    size: 'medium',
101
    color: 'primary',
102
  },
103
});
104

105
// Text component with typography variants
106
const Heading = styled(Text, {
107
  fontWeight: 'bold',
108
  color: '$text',
109
  
110
  variants: {
111
    level: {
112
      1: { fontSize: '$8' },
113
      2: { fontSize: '$6' },
114
      3: { fontSize: '$5' },
115
    },
116
  },
117
}, {
118
  isText: true,
119
});
120
```
121

122
### Create Component Function
123

124
Low-level function for creating Tamagui components with full control over configuration.
125

126
```typescript { .api }
127
/**
128
 * Creates a Tamagui component with full configuration control
129
 * @param config - Complete component configuration
130
 * @returns New Tamagui component
131
 */
132
function createComponent<Props = {}>(
133
  config: ComponentConfig<Props>
134
): TamaguiComponent;
135

136
interface ComponentConfig<Props = {}> {
137
  /** Base component to wrap */
138
  component?: React.ComponentType<any>;
139
  /** Component name for debugging */
140
  componentName?: string;
141
  /** Default styles */
142
  defaultStyles?: StyleObject;
143
  /** Variant configuration */
144
  variants?: VariantsConfig;
145
  /** Default variant values */
146
  defaultVariants?: Record<string, any>;
147
  /** Style prop acceptance rules */
148
  accept?: Record<string, any>;
149
  /** Text component flag */
150
  isText?: boolean;
151
}
152
```
153

154
### Component Detection
155

156
Utilities for detecting and working with Tamagui components.
157

158
```typescript { .api }
159
/**
160
 * Check if a component is a Tamagui component
161
 * @param component - Component to check
162
 * @returns True if component is a Tamagui component
163
 */
164
function isTamaguiComponent(component: any): component is TamaguiComponent;
165

166
/**
167
 * Check if an element is a Tamagui element
168
 * @param element - Element to check
169
 * @returns True if element is a Tamagui element
170
 */
171
function isTamaguiElement(element: any): element is TamaguiElement;
172
```
173

174
## Responsive Styles
175

176
### Media Query Support
177

178
Components support responsive styles using media query keys defined in configuration.
179

180
```typescript
181
// Using media queries in styled components
182
const ResponsiveView = styled(View, {
183
  padding: '$2',
184
  
185
  $sm: {
186
    padding: '$4',
187
  },
188
  
189
  $lg: {
190
    padding: '$6',
191
    flexDirection: 'row',
192
  },
193
});
194

195
// Using media queries in variants
196
const ResponsiveButton = styled(View, {
197
  variants: {
198
    size: {
199
      responsive: {
200
        padding: '$2',
201
        $sm: { padding: '$3' },
202
        $lg: { padding: '$4' },
203
      },
204
    },
205
  },
206
});
207
```
208

209
## Pseudo-State Support
210

211
Components support pseudo-states for interactive styling.
212

213
```typescript
214
const InteractiveButton = styled(View, {
215
  backgroundColor: '$blue',
216
  
217
  hoverStyle: {
218
    backgroundColor: '$blueHover',
219
  },
220
  
221
  pressStyle: {
222
    backgroundColor: '$bluePress',
223
    transform: [{ scale: 0.98 }],
224
  },
225
  
226
  focusStyle: {
227
    borderColor: '$blueFocus',
228
    borderWidth: 2,
229
  },
230
});
231
```
232

233
## Theme-Aware Styling
234

235
Components automatically respond to theme changes when using design tokens.
236

237
```typescript
238
const ThemedCard = styled(View, {
239
  backgroundColor: '$cardBackground',
240
  borderColor: '$borderColor',
241
  borderWidth: 1,
242
  
243
  variants: {
244
    emphasis: {
245
      high: {
246
        backgroundColor: '$accentBackground',
247
        borderColor: '$accentBorder',
248
      },
249
    },
250
  },
251
});
252
```
253

254
## Animation Support
255

256
Components can be configured with animations that work across platforms.
257

258
```typescript { .api }
259
interface AnimationConfig {
260
  [key: string]: AnimationDriver;
261
}
262

263
interface AnimationDriver {
264
  type: 'spring' | 'timing' | 'decay';
265
  [key: string]: any;
266
}
267
```
268

269
```typescript
270
const AnimatedView = styled(View, {
271
  backgroundColor: '$background',
272
  
273
  animation: 'quick',
274
  
275
  enterStyle: {
276
    opacity: 0,
277
    scale: 0.9,
278
  },
279
  
280
  exitStyle: {
281
    opacity: 0,
282
    scale: 0.9,
283
  },
284
});
285
```
286

287
## Types
288

289
```typescript { .api }
290
interface StyleObject {
291
  [key: string]: any;
292
}
293

294
interface TamaguiComponent<A = any, B = any, C = any, D = any, E = any> 
295
  extends React.ForwardRefExoticComponent<C & D & ComponentProps> {
296
  staticConfig: StaticConfig;
297
}
298

299
interface StaticConfig {
300
  componentName?: string;
301
  variants?: VariantsConfig;
302
  defaultVariants?: Record<string, any>;
303
  accept?: Record<string, any>;
304
  isText?: boolean;
305
  isZStack?: boolean;
306
  validStyles?: Record<string, boolean>;
307
}
308

309
interface ComponentProps {
310
  /** Animation configuration */
311
  animation?: string | AnimationConfig;
312
  /** Enter animation styles */
313
  enterStyle?: StyleObject;
314
  /** Exit animation styles */
315
  exitStyle?: StyleObject;
316
  /** Hover state styles */
317
  hoverStyle?: StyleObject;
318
  /** Press state styles */
319
  pressStyle?: StyleObject;
320
  /** Focus state styles */
321
  focusStyle?: StyleObject;
322
  /** Theme to use for this component */
323
  theme?: string;
324
  /** Debug information */
325
  debug?: boolean | 'verbose';
326
}
327
```