0
# UI Components
1

2
Compose Multiplatform for WASM/JS provides the complete set of Compose UI components, offering a declarative approach to building user interfaces. All standard Compose components work seamlessly with WASM targets, providing consistent behavior across platforms.
3

4
## Layout Components
5

6
### Column
7

8
Arranges children vertically.
9

10
```kotlin { .api }
11
@Composable
12
fun Column(
13
    modifier: Modifier = Modifier,
14
    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
15
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
16
    content: @Composable ColumnScope.() -> Unit
17
)
18
```
19

20
**Usage:**
21
```kotlin { .api }
22
Column(
23
    modifier = Modifier.fillMaxSize(),
24
    verticalArrangement = Arrangement.Center,
25
    horizontalAlignment = Alignment.CenterHorizontally
26
) {
27
    Text("First item")
28
    Text("Second item")
29
    Button(onClick = {}) { Text("Click me") }
30
}
31
```
32

33
### Row
34

35
Arranges children horizontally.
36

37
```kotlin { .api }
38
@Composable
39
fun Row(
40
    modifier: Modifier = Modifier,
41
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
42
    verticalAlignment: Alignment.Vertical = Alignment.Top,
43
    content: @Composable RowScope.() -> Unit
44
)
45
```
46

47
**Usage:**
48
```kotlin { .api }
49
Row(
50
    modifier = Modifier.fillMaxWidth(),
51
    horizontalArrangement = Arrangement.SpaceBetween,
52
    verticalAlignment = Alignment.CenterVertically
53
) {
54
    Icon(Icons.Default.Menu, contentDescription = "Menu")
55
    Text("Title")
56
    Icon(Icons.Default.Settings, contentDescription = "Settings")
57
}
58
```
59

60
### Box
61

62
Stacks children on top of each other.
63

64
```kotlin { .api }
65
@Composable
66
fun Box(
67
    modifier: Modifier = Modifier,
68
    contentAlignment: Alignment = Alignment.TopStart,
69
    propagateMinConstraints: Boolean = false,
70
    content: @Composable BoxScope.() -> Unit
71
)
72
```
73

74
**Usage:**
75
```kotlin { .api }
76
Box(
77
    modifier = Modifier.size(200.dp),
78
    contentAlignment = Alignment.Center
79
) {
80
    Image(painter = backgroundPainter, contentDescription = null)
81
    Text("Overlay text")
82
}
83
```
84

85
## Text Components
86

87
### Text
88

89
Displays text with styling options.
90

91
```kotlin { .api }
92
@Composable
93
fun Text(
94
    text: String,
95
    modifier: Modifier = Modifier,
96
    color: Color = Color.Unspecified,
97
    fontSize: TextUnit = TextUnit.Unspecified,
98
    fontStyle: FontStyle? = null,
99
    fontWeight: FontWeight? = null,
100
    fontFamily: FontFamily? = null,
101
    letterSpacing: TextUnit = TextUnit.Unspecified,
102
    textDecoration: TextDecoration? = null,
103
    textAlign: TextAlign? = null,
104
    lineHeight: TextUnit = TextUnit.Unspecified,
105
    overflow: TextOverflow = TextOverflow.Clip,
106
    softWrap: Boolean = true,
107
    maxLines: Int = Int.MAX_VALUE,
108
    style: TextStyle = LocalTextStyle.current
109
)
110
```
111

112
**Basic Usage:**
113
```kotlin { .api }
114
Text("Hello, World!")
115
```
116

117
**Styled Text:**
118
```kotlin { .api }
119
Text(
120
    text = "Styled Text",
121
    fontSize = 24.sp,
122
    fontWeight = FontWeight.Bold,
123
    color = MaterialTheme.colors.primary,
124
    textAlign = TextAlign.Center
125
)
126
```
127

128
### AnnotatedString Support
129

130
For rich text formatting:
131

132
```kotlin { .api }
133
@Composable
134
fun RichText() {
135
    val annotatedString = buildAnnotatedString {
136
        withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
137
            append("Bold text ")
138
        }
139
        withStyle(style = SpanStyle(color = Color.Red)) {
140
            append("red text ")
141
        }
142
        append("normal text")
143
    }
144
    
145
    Text(annotatedString)
146
}
147
```
148

149
## Interactive Components
150

151
### Button
152

153
Clickable button component.
154

155
```kotlin { .api }
156
@Composable
157
fun Button(
158
    onClick: () -> Unit,
159
    modifier: Modifier = Modifier,
160
    enabled: Boolean = true,
161
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
162
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
163
    shape: Shape = MaterialTheme.shapes.small,
164
    border: BorderStroke? = null,
165
    colors: ButtonColors = ButtonDefaults.buttonColors(),
166
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
167
    content: @Composable RowScope.() -> Unit
168
)
169
```
170

171
**Usage:**
172
```kotlin { .api }
173
Button(
174
    onClick = { println("Button clicked!") },
175
    modifier = Modifier.fillMaxWidth()
176
) {
177
    Text("Click Me")
178
}
179
```
180

181
**Custom Styled Button:**
182
```kotlin { .api }
183
Button(
184
    onClick = { /* action */ },
185
    colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red),
186
    shape = RoundedCornerShape(16.dp)
187
) {
188
    Icon(Icons.Default.Add, contentDescription = null)
189
    Spacer(Modifier.width(8.dp))
190
    Text("Add Item")
191
}
192
```
193

194
### TextField
195

196
Text input component.
197

198
```kotlin { .api }
199
@Composable
200
fun TextField(
201
    value: String,
202
    onValueChange: (String) -> Unit,
203
    modifier: Modifier = Modifier,
204
    enabled: Boolean = true,
205
    readOnly: Boolean = false,
206
    textStyle: TextStyle = LocalTextStyle.current,
207
    label: @Composable (() -> Unit)? = null,
208
    placeholder: @Composable (() -> Unit)? = null,
209
    leadingIcon: @Composable (() -> Unit)? = null,
210
    trailingIcon: @Composable (() -> Unit)? = null,
211
    isError: Boolean = false,
212
    visualTransformation: VisualTransformation = VisualTransformation.None,
213
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
214
    keyboardActions: KeyboardActions = KeyboardActions.Default,
215
    singleLine: Boolean = false,
216
    maxLines: Int = Int.MAX_VALUE,
217
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
218
    shape: Shape = MaterialTheme.shapes.small,
219
    colors: TextFieldColors = TextFieldDefaults.textFieldColors()
220
)
221
```
222

223
**Usage:**
224
```kotlin { .api }
225
var text by remember { mutableStateOf("") }
226

227
TextField(
228
    value = text,
229
    onValueChange = { text = it },
230
    label = { Text("Enter text") },
231
    placeholder = { Text("Type here...") },
232
    modifier = Modifier.fillMaxWidth()
233
)
234
```
235

236
## Image Components
237

238
### Image
239

240
Displays images from various sources.
241

242
```kotlin { .api }
243
@Composable
244
fun Image(
245
    painter: Painter,
246
    contentDescription: String?,
247
    modifier: Modifier = Modifier,
248
    alignment: Alignment = Alignment.Center,
249
    contentScale: ContentScale = ContentScale.Fit,
250
    alpha: Float = DefaultAlpha,
251
    colorFilter: ColorFilter? = null
252
)
253
```
254

255
**Usage with Resources:**
256
```kotlin { .api }
257
Image(
258
    painter = painterResource(Res.drawable.logo),
259
    contentDescription = "App logo",
260
    modifier = Modifier.size(100.dp)
261
)
262
```
263

264
**Usage with Custom Painter:**
265
```kotlin { .api }
266
Image(
267
    painter = rememberImagePainter("https://example.com/image.jpg"),
268
    contentDescription = "Remote image",
269
    contentScale = ContentScale.Crop,
270
    modifier = Modifier.fillMaxWidth().height(200.dp)
271
)
272
```
273

274
### Icon
275

276
Displays vector icons.
277

278
```kotlin { .api }
279
@Composable
280
fun Icon(
281
    imageVector: ImageVector,
282
    contentDescription: String?,
283
    modifier: Modifier = Modifier,
284
    tint: Color = LocalContentColor.current.copy(alpha = LocalContentAlpha.current)
285
)
286
```
287

288
**Usage:**
289
```kotlin { .api }
290
Icon(
291
    imageVector = Icons.Default.Favorite,
292
    contentDescription = "Favorite",
293
    tint = Color.Red,
294
    modifier = Modifier.size(24.dp)
295
)
296
```
297

298
## List Components
299

300
### LazyColumn
301

302
Efficiently displays large lists with lazy loading.
303

304
```kotlin { .api }
305
@Composable
306
fun LazyColumn(
307
    modifier: Modifier = Modifier,
308
    state: LazyListState = rememberLazyListState(),
309
    contentPadding: PaddingValues = PaddingValues(0.dp),
310
    reverseLayout: Boolean = false,
311
    verticalArrangement: Arrangement.Vertical = if (!reverseLayout) Arrangement.Top else Arrangement.Bottom,
312
    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
313
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
314
    userScrollEnabled: Boolean = true,
315
    content: LazyListScope.() -> Unit
316
)
317
```
318

319
**Usage:**
320
```kotlin { .api }
321
val items = remember { List(1000) { "Item $it" } }
322

323
LazyColumn {
324
    items(items) { item ->
325
        Text(
326
            text = item,
327
            modifier = Modifier.padding(16.dp)
328
        )
329
    }
330
}
331
```
332

333
**Complex List Items:**
334
```kotlin { .api }
335
LazyColumn {
336
    items(users) { user ->
337
        Row(
338
            modifier = Modifier
339
                .fillMaxWidth()
340
                .clickable { onUserClick(user) }
341
                .padding(16.dp),
342
            verticalAlignment = Alignment.CenterVertically
343
        ) {
344
            Image(
345
                painter = painterResource(user.avatar),
346
                contentDescription = null,
347
                modifier = Modifier.size(40.dp).clip(CircleShape)
348
            )
349
            Spacer(Modifier.width(16.dp))
350
            Column {
351
                Text(user.name, fontWeight = FontWeight.Bold)
352
                Text(user.email, style = MaterialTheme.typography.caption)
353
            }
354
        }
355
    }
356
}
357
```
358

359
### LazyRow
360

361
Horizontal lazy list.
362

363
```kotlin { .api }
364
@Composable
365
fun LazyRow(
366
    modifier: Modifier = Modifier,
367
    state: LazyListState = rememberLazyListState(),
368
    contentPadding: PaddingValues = PaddingValues(0.dp),
369
    reverseLayout: Boolean = false,
370
    horizontalArrangement: Arrangement.Horizontal = if (!reverseLayout) Arrangement.Start else Arrangement.End,
371
    verticalAlignment: Alignment.Vertical = Alignment.Top,
372
    flingBehavior: FlingBehavior = ScrollableDefaults.flingBehavior(),
373
    userScrollEnabled: Boolean = true,
374
    content: LazyListScope.() -> Unit
375
)
376
```
377

378
## Modifier System
379

380
### Common Modifiers
381

382
**Size and Layout:**
383
```kotlin { .api }
384
Modifier
385
    .size(100.dp)
386
    .width(200.dp)
387
    .height(50.dp)
388
    .fillMaxSize()
389
    .fillMaxWidth()
390
    .fillMaxHeight()
391
    .wrapContentSize()
392
```
393

394
**Padding and Margins:**
395
```kotlin { .api }
396
Modifier
397
    .padding(16.dp)
398
    .padding(horizontal = 24.dp, vertical = 12.dp)
399
    .padding(start = 16.dp, end = 8.dp)
400
```
401

402
**Visual Styling:**
403
```kotlin { .api }
404
Modifier
405
    .background(Color.Blue)
406
    .clip(RoundedCornerShape(8.dp))
407
    .border(1.dp, Color.Gray, RoundedCornerShape(4.dp))
408
    .shadow(elevation = 4.dp)
409
```
410

411
**Interaction:**
412
```kotlin { .api }
413
Modifier
414
    .clickable { /* click action */ }
415
    .selectable(selected = isSelected) { /* selection change */ }
416
    .toggleable(value = isToggled) { /* toggle action */ }
417
```
418

419
## Animation Support
420

421
### Animated Visibility
422

423
```kotlin { .api }
424
@Composable
425
fun AnimatedContent() {
426
    var visible by remember { mutableStateOf(true) }
427
    
428
    AnimatedVisibility(visible = visible) {
429
        Text("This content animates in and out")
430
    }
431
    
432
    Button(onClick = { visible = !visible }) {
433
        Text("Toggle")
434
    }
435
}
436
```
437

438
### Content Transitions
439

440
```kotlin { .api }
441
@Composable
442
fun ContentTransition() {
443
    var currentContent by remember { mutableStateOf("A") }
444
    
445
    Crossfade(targetState = currentContent) { content ->
446
        when (content) {
447
            "A" -> Text("Content A")
448
            "B" -> Text("Content B")
449
        }
450
    }
451
}
452
```
453

454
## Custom Components
455

456
### Creating Custom Components
457

458
```kotlin { .api }
459
@Composable
460
fun CustomCard(
461
    title: String,
462
    content: String,
463
    modifier: Modifier = Modifier,
464
    onClick: (() -> Unit)? = null
465
) {
466
    Card(
467
        modifier = modifier.then(
468
            if (onClick != null) Modifier.clickable { onClick() }
469
            else Modifier
470
        ),
471
        elevation = 4.dp
472
    ) {
473
        Column(
474
            modifier = Modifier.padding(16.dp)
475
        ) {
476
            Text(
477
                text = title,
478
                style = MaterialTheme.typography.h6,
479
                fontWeight = FontWeight.Bold
480
            )
481
            Spacer(Modifier.height(8.dp))
482
            Text(
483
                text = content,
484
                style = MaterialTheme.typography.body2
485
            )
486
        }
487
    }
488
}
489
```
490

491
**Usage:**
492
```kotlin { .api }
493
CustomCard(
494
    title = "Card Title",
495
    content = "This is the card content that provides additional information.",
496
    onClick = { /* handle click */ }
497
)
498
```
499

500
## WASM-Specific Considerations
501

502
### Performance Optimizations
503

504
- **Lazy loading**: Use LazyColumn/LazyRow for large datasets
505
- **State management**: Minimize recomposition with proper state design
506
- **Image loading**: Use async image loading for better performance
507

508
### Browser Integration
509

510
Components automatically handle:
511
- **Touch events**: Full touch gesture support
512
- **Keyboard navigation**: Tab navigation and accessibility
513
- **High DPI displays**: Automatic pixel density scaling
514
- **Responsive layout**: Window resize handling
515

516
### Memory Management
517

518
- **Component cleanup**: Use `DisposableEffect` for cleanup
519
- **State persistence**: State survives browser navigation
520
- **Resource management**: Automatic cleanup of UI resources