0
# UI Components
1

2
60+ Radix UI-based components providing comprehensive interface elements including layout containers, typography, forms, interactive components, and data display. All components are fully typed with responsive design support and consistent theming.
3

4
## Capabilities
5

6
### Layout Components
7

8
Flexible layout containers with CSS Grid and Flexbox support, providing responsive design capabilities and semantic HTML structure.
9

10
```python { .api }
11
def box(*children, **props) -> Component:
12
    """
13
    Fundamental layout container with styling support.
14
    
15
    A versatile container component that serves as the building block
16
    for layouts with full CSS property support and responsive design.
17
    
18
    Args:
19
        *children: Child components to render inside the box
20
        **props: Styling and layout properties (padding, margin, etc.)
21
    
22
    Returns:
23
        Box component with children and applied styles
24
    """
25
    ...
26

27
def flex(*children, direction: str = "row", wrap: str = "nowrap", **props) -> Component:
28
    """
29
    Flexbox layout container for responsive layouts.
30
    
31
    Provides CSS Flexbox layout with convenient props for common
32
    flex properties like direction, wrap, justify, and align.
33
    
34
    Args:
35
        *children: Child components to arrange in flex layout
36
        direction: Flex direction ('row', 'column', 'row-reverse', 'column-reverse')
37
        wrap: Flex wrap behavior ('nowrap', 'wrap', 'wrap-reverse')
38
        **props: Additional styling and flex properties
39
    
40
    Returns:
41
        Flex container component with configured layout
42
    """
43
    ...
44

45
def grid(*children, columns: str = "1", rows: str = "auto", **props) -> Component:
46
    """
47
    CSS Grid layout container for complex layouts.
48
    
49
    Provides CSS Grid layout with template columns/rows and
50
    responsive grid configurations for sophisticated layouts.
51
    
52
    Args:
53
        *children: Child components to arrange in grid
54
        columns: Grid template columns (e.g., 'repeat(3, 1fr)', '200px 1fr')
55
        rows: Grid template rows (e.g., 'auto', '100px 200px')
56
        **props: Additional grid and styling properties
57
    
58
    Returns:
59
        Grid container component with defined layout
60
    """
61
    ...
62

63
def vstack(*children, spacing: str = "2", align: str = "stretch", **props) -> Component:
64
    """
65
    Vertical stack layout with consistent spacing.
66
    
67
    Arranges children vertically with consistent spacing between
68
    elements, commonly used for form layouts and content sections.
69
    
70
    Args:
71
        *children: Child components to stack vertically
72
        spacing: Spacing between children (theme spacing tokens)
73
        align: Horizontal alignment ('start', 'center', 'end', 'stretch')
74
        **props: Additional styling properties
75
    
76
    Returns:
77
        Vertical stack component with spaced children
78
    """
79
    ...
80

81
def hstack(*children, spacing: str = "2", align: str = "center", **props) -> Component:
82
    """
83
    Horizontal stack layout with consistent spacing.
84
    
85
    Arranges children horizontally with consistent spacing,
86
    commonly used for button groups and navigation elements.
87
    
88
    Args:
89
        *children: Child components to stack horizontally
90
        spacing: Spacing between children (theme spacing tokens)
91
        align: Vertical alignment ('start', 'center', 'end', 'stretch')
92
        **props: Additional styling properties
93
    
94
    Returns:
95
        Horizontal stack component with spaced children
96
    """
97
    ...
98

99
def center(*children, **props) -> Component:
100
    """
101
    Center content both horizontally and vertically.
102
    
103
    Args:
104
        *children: Child components to center
105
        **props: Additional styling properties
106
    
107
    Returns:
108
        Centered container component
109
    """
110
    ...
111

112
def container(*children, size: str = "4", **props) -> Component:
113
    """
114
    Page container with responsive max-width.
115
    
116
    Args:
117
        *children: Child components for the container
118
        size: Container size ('1'-'4', larger numbers = wider)
119
        **props: Additional styling properties
120
    
121
    Returns:
122
        Responsive container component
123
    """
124
    ...
125

126
def section(*children, size: str = "3", **props) -> Component:
127
    """
128
    Semantic section element with spacing.
129
    
130
    Args:
131
        *children: Section content
132
        size: Vertical padding size ('1'-'4')
133
        **props: Additional styling properties
134
    
135
    Returns:
136
        Semantic section component
137
    """
138
    ...
139

140
def spacer(**props) -> Component:
141
    """
142
    Flexible space component that grows to fill available space.
143
    
144
    Args:
145
        **props: Styling properties
146
    
147
    Returns:
148
        Spacer component for layout spacing
149
    """
150
    ...
151
```
152

153
### Typography Components
154

155
Comprehensive typography system with consistent sizing, semantic HTML elements, and accessible text rendering.
156

157
```python { .api }
158
def heading(*children, size: str = "4", as_: str = "h2", **props) -> Component:
159
    """
160
    Heading text component with semantic HTML tags.
161
    
162
    Renders semantic heading elements (h1-h6) with consistent
163
    typography scaling and theme integration.
164
    
165
    Args:
166
        *children: Heading text content
167
        size: Heading size ('1'-'9', larger numbers = bigger text)
168
        as_: HTML tag to render ('h1', 'h2', 'h3', 'h4', 'h5', 'h6')
169
        **props: Additional styling and typography properties
170
    
171
    Returns:
172
        Semantic heading component with styled text
173
    """
174
    ...
175

176
def text(*children, size: str = "2", as_: str = "span", **props) -> Component:
177
    """
178
    Body text component with consistent typography.
179
    
180
    Flexible text component for paragraphs, labels, and general
181
    text content with full typography control.
182
    
183
    Args:
184
        *children: Text content to display
185
        size: Text size ('1'-'9', larger numbers = bigger text)
186
        as_: HTML tag to render ('p', 'span', 'div', etc.)
187
        **props: Typography and styling properties
188
    
189
    Returns:
190
        Text component with applied typography
191
    """
192
    ...
193

194
def code(*children, variant: str = "soft", **props) -> Component:
195
    """
196
    Inline code element with syntax styling.
197
    
198
    Args:
199
        *children: Code content to display
200
        variant: Visual variant ('solid', 'soft', 'outline', 'ghost')
201
        **props: Additional styling properties
202
    
203
    Returns:
204
        Styled inline code component
205
    """
206
    ...
207

208
def blockquote(*children, **props) -> Component:
209
    """
210
    Blockquote element for quoted content.
211
    
212
    Args:
213
        *children: Quote content
214
        **props: Styling properties
215
    
216
    Returns:
217
        Semantic blockquote component
218
    """
219
    ...
220

221
def link(*children, href: str = "", **props) -> Component:
222
    """
223
    Hyperlink component with navigation support.
224
    
225
    Args:
226
        *children: Link text or child components
227
        href: URL or route path to navigate to
228
        **props: Additional link and styling properties
229
    
230
    Returns:
231
        Accessible link component with navigation
232
    """
233
    ...
234
```
235

236
### Form Components
237

238
Complete form component library with validation support, accessibility features, and consistent styling across input types.
239

240
```python { .api }
241
def button(*children, variant: str = "solid", size: str = "2", **props) -> Component:
242
    """
243
    Interactive button component with multiple variants.
244
    
245
    Provides click handling, loading states, and accessibility
246
    features for user interactions and form submissions.
247
    
248
    Args:
249
        *children: Button content (text, icons, etc.)
250
        variant: Visual variant ('solid', 'soft', 'outline', 'ghost')
251
        size: Button size ('1'-'4', larger numbers = bigger buttons)
252
        **props: Event handlers and styling properties
253
    
254
    Returns:
255
        Interactive button component with event handling
256
    """
257
    ...
258

259
def input(
260
    placeholder: str = "",
261
    value: str = "",
262
    type: str = "text",
263
    **props
264
) -> Component:
265
    """
266
    Text input field with validation and state binding.
267
    
268
    Single-line text input with support for various input types,
269
    validation, and automatic state synchronization.
270
    
271
    Args:
272
        placeholder: Placeholder text when empty
273
        value: Current input value (for controlled inputs)
274
        type: Input type ('text', 'email', 'password', 'number', etc.)
275
        **props: Event handlers, validation, and styling
276
    
277
    Returns:
278
        Text input component with state binding
279
    """
280
    ...
281

282
def text_area(
283
    placeholder: str = "",
284
    value: str = "",
285
    rows: int = 3,
286
    **props
287
) -> Component:
288
    """
289
    Multi-line text input field.
290
    
291
    Args:
292
        placeholder: Placeholder text when empty
293
        value: Current textarea value
294
        rows: Number of visible text rows
295
        **props: Event handlers and styling properties
296
    
297
    Returns:
298
        Multi-line text input component
299
    """
300
    ...
301

302
def checkbox(
303
    checked: bool = False,
304
    label: str = "",
305
    **props
306
) -> Component:
307
    """
308
    Checkbox input for boolean values.
309
    
310
    Args:
311
        checked: Whether checkbox is checked
312
        label: Associated label text
313
        **props: Event handlers and styling
314
    
315
    Returns:
316
        Checkbox input component with label
317
    """
318
    ...
319

320
def select(*children, value: str = "", **props) -> Component:
321
    """
322
    Dropdown select component with options.
323
    
324
    Args:
325
        *children: Select option components
326
        value: Currently selected value
327
        **props: Event handlers and styling
328
    
329
    Returns:
330
        Select dropdown component
331
    """
332
    ...
333

334
def slider(
335
    value: list[float] = None,
336
    min: float = 0,
337
    max: float = 100,
338
    step: float = 1,
339
    **props
340
) -> Component:
341
    """
342
    Range slider input for numeric values.
343
    
344
    Args:
345
        value: Current slider value(s)
346
        min: Minimum allowed value
347
        max: Maximum allowed value  
348
        step: Step increment for values
349
        **props: Event handlers and styling
350
    
351
    Returns:
352
        Range slider component
353
    """
354
    ...
355

356
def switch(checked: bool = False, **props) -> Component:
357
    """
358
    Toggle switch for boolean values.
359
    
360
    Args:
361
        checked: Whether switch is enabled
362
        **props: Event handlers and styling
363
    
364
    Returns:
365
        Toggle switch component
366
    """
367
    ...
368

369
def radio_group(*children, value: str = "", **props) -> Component:
370
    """
371
    Radio button group for single selection.
372
    
373
    Args:
374
        *children: Radio option components
375
        value: Currently selected value
376
        **props: Event handlers and styling
377
    
378
    Returns:
379
        Radio button group component
380
    """
381
    ...
382
```
383

384
### Interactive Components
385

386
Modal dialogs, overlays, tooltips, and navigation components for rich user interactions and enhanced user experience.
387

388
```python { .api }
389
def dialog(*children, open: bool = False, **props) -> Component:
390
    """
391
    Modal dialog overlay for focused interactions.
392
    
393
    Provides modal dialog with backdrop, focus management, and
394
    keyboard navigation for forms, confirmations, and content display.
395
    
396
    Args:
397
        *children: Dialog content components
398
        open: Whether dialog is currently open
399
        **props: Dialog configuration and styling
400
    
401
    Returns:
402
        Modal dialog component with overlay
403
    """
404
    ...
405

406
def alert_dialog(*children, open: bool = False, **props) -> Component:
407
    """
408
    Alert dialog for confirmations and important messages.
409
    
410
    Args:
411
        *children: Alert content and action buttons
412
        open: Whether alert dialog is open
413
        **props: Alert configuration and styling
414
    
415
    Returns:
416
        Alert dialog component with focus trap
417
    """
418
    ...
419

420
def popover(*children, open: bool = False, **props) -> Component:
421
    """
422
    Popover overlay positioned relative to trigger element.
423
    
424
    Args:
425
        *children: Popover content
426
        open: Whether popover is currently open
427
        **props: Positioning and styling options
428
    
429
    Returns:
430
        Positioned popover component
431
    """
432
    ...
433

434
def tooltip(*children, content: str = "", **props) -> Component:
435
    """
436
    Tooltip component for contextual information.
437
    
438
    Args:
439
        *children: Elements that trigger tooltip on hover
440
        content: Tooltip text content
441
        **props: Positioning and styling options
442
    
443
    Returns:
444
        Tooltip component with hover behavior
445
    """
446
    ...
447

448
def hover_card(*children, **props) -> Component:
449
    """
450
    Rich hover card with content preview.
451
    
452
    Args:
453
        *children: Hover card content
454
        **props: Positioning and styling
455
    
456
    Returns:
457
        Hover card component with rich content
458
    """
459
    ...
460

461
def dropdown_menu(*children, **props) -> Component:
462
    """
463
    Dropdown menu for actions and navigation.
464
    
465
    Args:
466
        *children: Menu items and content
467
        **props: Menu configuration and styling
468
    
469
    Returns:
470
        Dropdown menu component with keyboard navigation
471
    """
472
    ...
473

474
def context_menu(*children, **props) -> Component:
475
    """
476
    Right-click context menu for contextual actions.
477
    
478
    Args:
479
        *children: Menu content and trigger area
480
        **props: Menu configuration and styling
481
    
482
    Returns:
483
        Context menu component with right-click handling
484
    """
485
    ...
486

487
def tabs(*children, value: str = "", **props) -> Component:
488
    """
489
    Tab navigation component for content sections.
490
    
491
    Args:
492
        *children: Tab panels and tab list
493
        value: Currently active tab value
494
        **props: Tab configuration and styling
495
    
496
    Returns:
497
        Tab navigation component with content panels
498
    """
499
    ...
500
```
501

502
### Display Components
503

504
Data visualization, status indicators, and content presentation components for rich user interfaces and information display.
505

506
```python { .api }
507
def card(*children, variant: str = "surface", **props) -> Component:
508
    """
509
    Content card container with elevation and styling.
510
    
511
    Provides elevated content containers for grouping related
512
    information with consistent spacing and visual hierarchy.
513
    
514
    Args:
515
        *children: Card content components
516
        variant: Visual variant ('surface', 'classic', 'ghost')
517
        **props: Card styling and layout properties
518
    
519
    Returns:
520
        Card container component with elevation
521
    """
522
    ...
523

524
def avatar(src: str = "", fallback: str = "", **props) -> Component:
525
    """
526
    User avatar component with fallback support.
527
    
528
    Args:
529
        src: Avatar image URL
530
        fallback: Fallback text when image unavailable
531
        **props: Avatar styling and size options
532
    
533
    Returns:
534
        Avatar component with image or fallback
535
    """
536
    ...
537

538
def badge(*children, variant: str = "soft", **props) -> Component:
539
    """
540
    Status badge for labels and indicators.
541
    
542
    Args:
543
        *children: Badge content (text, numbers)
544
        variant: Visual variant ('solid', 'soft', 'outline')
545
        **props: Badge styling and color options
546
    
547
    Returns:
548
        Badge component for status display
549
    """
550
    ...
551

552
def callout(*children, variant: str = "soft", **props) -> Component:
553
    """
554
    Highlighted callout box for important information.
555
    
556
    Args:
557
        *children: Callout content
558
        variant: Visual variant ('solid', 'soft', 'outline')
559
        **props: Callout styling and icon options
560
    
561
    Returns:
562
        Callout component with emphasis styling
563
    """
564
    ...
565

566
def table(*children, **props) -> Component:
567
    """
568
    Data table component for structured data display.
569
    
570
    Args:
571
        *children: Table rows, headers, and content
572
        **props: Table styling and layout options
573
    
574
    Returns:
575
        Semantic table component with styling
576
    """
577
    ...
578

579
def progress(value: float = 0, max: float = 100, **props) -> Component:
580
    """
581
    Progress bar for loading and completion states.
582
    
583
    Args:
584
        value: Current progress value
585
        max: Maximum progress value
586
        **props: Progress bar styling options
587
    
588
    Returns:
589
        Progress bar component with animation
590
    """
591
    ...
592

593
def spinner(size: str = "2", **props) -> Component:
594
    """
595
    Loading spinner for async operations.
596
    
597
    Args:
598
        size: Spinner size ('1'-'4')
599
        **props: Spinner styling options
600
    
601
    Returns:
602
        Animated loading spinner component
603
    """
604
    ...
605

606
def skeleton(width: str = "100%", height: str = "20px", **props) -> Component:
607
    """
608
    Loading skeleton placeholder for content.
609
    
610
    Args:
611
        width: Skeleton width (CSS value)
612
        height: Skeleton height (CSS value)  
613
        **props: Skeleton styling options
614
    
615
    Returns:
616
        Animated skeleton placeholder component
617
    """
618
    ...
619

620
def separator(orientation: str = "horizontal", **props) -> Component:
621
    """
622
    Visual separator line for content sections.
623
    
624
    Args:
625
        orientation: Separator direction ('horizontal', 'vertical')
626
        **props: Separator styling options
627
    
628
    Returns:
629
        Separator line component
630
    """
631
    ...
632

633
def scroll_area(*children, **props) -> Component:
634
    """
635
    Custom scrollable area with styled scrollbars.
636
    
637
    Args:
638
        *children: Scrollable content
639
        **props: Scroll area styling and behavior options
640
    
641
    Returns:
642
        Scrollable area component with custom scrollbars
643
    """
644
    ...
645
```
646

647
### List Components
648

649
Semantic list elements for structured content presentation with consistent styling and accessibility features.
650

651
```python { .api }
652
def list(*children, **props) -> Component:  # Aliased as list_ns
653
    """
654
    Generic list container component.
655
    
656
    Args:
657
        *children: List item components
658
        **props: List styling properties
659
    
660
    Returns:
661
        List container component
662
    """
663
    ...
664

665
def ordered_list(*children, **props) -> Component:
666
    """
667
    Numbered ordered list element.
668
    
669
    Args:
670
        *children: List item components  
671
        **props: List styling and numbering options
672
    
673
    Returns:
674
        Semantic ordered list component
675
    """
676
    ...
677

678
def unordered_list(*children, **props) -> Component:
679
    """
680
    Bulleted unordered list element.
681
    
682
    Args:
683
        *children: List item components
684
        **props: List styling and bullet options
685
    
686
    Returns:
687
        Semantic unordered list component
688
    """
689
    ...
690

691
def list_item(*children, **props) -> Component:
692
    """
693
    Individual list item element.
694
    
695
    Args:
696
        *children: Item content
697
        **props: Item styling properties
698
    
699
    Returns:
700
        Semantic list item component
701
    """
702
    ...
703

704
def data_list(*children, **props) -> Component:
705
    """
706
    Key-value data list for structured information display.
707
    
708
    Args:
709
        *children: Data list items with labels and values
710
        **props: Data list styling options
711
    
712
    Returns:
713
        Structured data list component
714
    """
715
    ...
716
```
717

718
### Media Components
719

720
Image and media display components with responsive behavior, aspect ratio management, and accessibility features.
721

722
```python { .api }
723
def image(
724
    src: str = "", 
725
    alt: str = "",
726
    width: str = "auto",
727
    height: str = "auto",
728
    **props
729
) -> Component:
730
    """
731
    Image component with responsive behavior and accessibility.
732
    
733
    Args:
734
        src: Image source URL
735
        alt: Alternative text for accessibility
736
        width: Image width (CSS value or auto)
737
        height: Image height (CSS value or auto)
738
        **props: Additional image and styling properties
739
    
740
    Returns:
741
        Responsive image component with accessibility
742
    """
743
    ...
744

745
def aspect_ratio(*children, ratio: float = 1.0, **props) -> Component:
746
    """
747
    Aspect ratio container for consistent media dimensions.
748
    
749
    Args:
750
        *children: Content to maintain aspect ratio
751
        ratio: Desired aspect ratio (width/height)
752
        **props: Container styling options
753
    
754
    Returns:
755
        Aspect ratio container component
756
    """
757
    ...
758

759
def icon(tag: str, **props) -> Component:
760
    """
761
    Lucide icon component with consistent sizing.
762
    
763
    Args:
764
        tag: Lucide icon name (e.g., 'heart', 'star', 'home')
765
        **props: Icon styling and size options
766
    
767
    Returns:
768
        SVG icon component from Lucide icon set
769
    """
770
    ...
771
```
772

773
## Types
774

775
```python { .api }
776
from typing import Any, Callable, List, Optional, Union
777
from reflex.vars.base import Var
778

779
# Component Types
780
Component = Any  # Reflex component instance
781
ComponentProps = dict[str, Any]  # Component properties
782

783
# Layout Types
784
FlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
785
FlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
786
AlignItems = Literal["start", "center", "end", "stretch", "baseline"]
787
JustifyContent = Literal["start", "center", "end", "between", "around", "evenly"]
788

789
# Typography Types
790
HeadingSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
791
TextSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
792
HeadingTag = Literal["h1", "h2", "h3", "h4", "h5", "h6"]
793

794
# Form Types
795
InputType = Literal["text", "email", "password", "number", "tel", "url", "search"]
796
ButtonVariant = Literal["solid", "soft", "outline", "ghost"]
797
ButtonSize = Literal["1", "2", "3", "4"]
798

799
# Interactive Types
800
DialogState = bool  # Dialog open/closed state
801
TooltipPlacement = Literal["top", "bottom", "left", "right"]
802

803
# Display Types
804
BadgeVariant = Literal["solid", "soft", "outline"]
805
CardVariant = Literal["surface", "classic", "ghost"]
806
SeparatorOrientation = Literal["horizontal", "vertical"]
807

808
# Media Types
809
ImageFit = Literal["contain", "cover", "fill", "scale-down", "none"]
810
AspectRatio = float  # Width/height ratio
811

812
# Responsive Types
813
from reflex.components.core.breakpoints import Responsive
814
ResponsiveValue = Union[str, Responsive[str]]  # Value that can be responsive
815
```