tessl/pypi-reflex
Web apps in pure Python with reactive components and automatic frontend generation.
—
Pending
ui-components.mddocs/
UI Components
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.
Capabilities
Layout Components
Flexible layout containers with CSS Grid and Flexbox support, providing responsive design capabilities and semantic HTML structure.
def box(*children, **props) -> Component:
"""
Fundamental layout container with styling support.
A versatile container component that serves as the building block
for layouts with full CSS property support and responsive design.
Args:
*children: Child components to render inside the box
**props: Styling and layout properties (padding, margin, etc.)
Returns:
Box component with children and applied styles
"""
...
def flex(*children, direction: str = "row", wrap: str = "nowrap", **props) -> Component:
"""
Flexbox layout container for responsive layouts.
Provides CSS Flexbox layout with convenient props for common
flex properties like direction, wrap, justify, and align.
Args:
*children: Child components to arrange in flex layout
direction: Flex direction ('row', 'column', 'row-reverse', 'column-reverse')
wrap: Flex wrap behavior ('nowrap', 'wrap', 'wrap-reverse')
**props: Additional styling and flex properties
Returns:
Flex container component with configured layout
"""
...
def grid(*children, columns: str = "1", rows: str = "auto", **props) -> Component:
"""
CSS Grid layout container for complex layouts.
Provides CSS Grid layout with template columns/rows and
responsive grid configurations for sophisticated layouts.
Args:
*children: Child components to arrange in grid
columns: Grid template columns (e.g., 'repeat(3, 1fr)', '200px 1fr')
rows: Grid template rows (e.g., 'auto', '100px 200px')
**props: Additional grid and styling properties
Returns:
Grid container component with defined layout
"""
...
def vstack(*children, spacing: str = "2", align: str = "stretch", **props) -> Component:
"""
Vertical stack layout with consistent spacing.
Arranges children vertically with consistent spacing between
elements, commonly used for form layouts and content sections.
Args:
*children: Child components to stack vertically
spacing: Spacing between children (theme spacing tokens)
align: Horizontal alignment ('start', 'center', 'end', 'stretch')
**props: Additional styling properties
Returns:
Vertical stack component with spaced children
"""
...
def hstack(*children, spacing: str = "2", align: str = "center", **props) -> Component:
"""
Horizontal stack layout with consistent spacing.
Arranges children horizontally with consistent spacing,
commonly used for button groups and navigation elements.
Args:
*children: Child components to stack horizontally
spacing: Spacing between children (theme spacing tokens)
align: Vertical alignment ('start', 'center', 'end', 'stretch')
**props: Additional styling properties
Returns:
Horizontal stack component with spaced children
"""
...
def center(*children, **props) -> Component:
"""
Center content both horizontally and vertically.
Args:
*children: Child components to center
**props: Additional styling properties
Returns:
Centered container component
"""
...
def container(*children, size: str = "4", **props) -> Component:
"""
Page container with responsive max-width.
Args:
*children: Child components for the container
size: Container size ('1'-'4', larger numbers = wider)
**props: Additional styling properties
Returns:
Responsive container component
"""
...
def section(*children, size: str = "3", **props) -> Component:
"""
Semantic section element with spacing.
Args:
*children: Section content
size: Vertical padding size ('1'-'4')
**props: Additional styling properties
Returns:
Semantic section component
"""
...
def spacer(**props) -> Component:
"""
Flexible space component that grows to fill available space.
Args:
**props: Styling properties
Returns:
Spacer component for layout spacing
"""
...Typography Components
Comprehensive typography system with consistent sizing, semantic HTML elements, and accessible text rendering.
def heading(*children, size: str = "4", as_: str = "h2", **props) -> Component:
"""
Heading text component with semantic HTML tags.
Renders semantic heading elements (h1-h6) with consistent
typography scaling and theme integration.
Args:
*children: Heading text content
size: Heading size ('1'-'9', larger numbers = bigger text)
as_: HTML tag to render ('h1', 'h2', 'h3', 'h4', 'h5', 'h6')
**props: Additional styling and typography properties
Returns:
Semantic heading component with styled text
"""
...
def text(*children, size: str = "2", as_: str = "span", **props) -> Component:
"""
Body text component with consistent typography.
Flexible text component for paragraphs, labels, and general
text content with full typography control.
Args:
*children: Text content to display
size: Text size ('1'-'9', larger numbers = bigger text)
as_: HTML tag to render ('p', 'span', 'div', etc.)
**props: Typography and styling properties
Returns:
Text component with applied typography
"""
...
def code(*children, variant: str = "soft", **props) -> Component:
"""
Inline code element with syntax styling.
Args:
*children: Code content to display
variant: Visual variant ('solid', 'soft', 'outline', 'ghost')
**props: Additional styling properties
Returns:
Styled inline code component
"""
...
def blockquote(*children, **props) -> Component:
"""
Blockquote element for quoted content.
Args:
*children: Quote content
**props: Styling properties
Returns:
Semantic blockquote component
"""
...
def link(*children, href: str = "", **props) -> Component:
"""
Hyperlink component with navigation support.
Args:
*children: Link text or child components
href: URL or route path to navigate to
**props: Additional link and styling properties
Returns:
Accessible link component with navigation
"""
...Form Components
Complete form component library with validation support, accessibility features, and consistent styling across input types.
def button(*children, variant: str = "solid", size: str = "2", **props) -> Component:
"""
Interactive button component with multiple variants.
Provides click handling, loading states, and accessibility
features for user interactions and form submissions.
Args:
*children: Button content (text, icons, etc.)
variant: Visual variant ('solid', 'soft', 'outline', 'ghost')
size: Button size ('1'-'4', larger numbers = bigger buttons)
**props: Event handlers and styling properties
Returns:
Interactive button component with event handling
"""
...
def input(
placeholder: str = "",
value: str = "",
type: str = "text",
**props
) -> Component:
"""
Text input field with validation and state binding.
Single-line text input with support for various input types,
validation, and automatic state synchronization.
Args:
placeholder: Placeholder text when empty
value: Current input value (for controlled inputs)
type: Input type ('text', 'email', 'password', 'number', etc.)
**props: Event handlers, validation, and styling
Returns:
Text input component with state binding
"""
...
def text_area(
placeholder: str = "",
value: str = "",
rows: int = 3,
**props
) -> Component:
"""
Multi-line text input field.
Args:
placeholder: Placeholder text when empty
value: Current textarea value
rows: Number of visible text rows
**props: Event handlers and styling properties
Returns:
Multi-line text input component
"""
...
def checkbox(
checked: bool = False,
label: str = "",
**props
) -> Component:
"""
Checkbox input for boolean values.
Args:
checked: Whether checkbox is checked
label: Associated label text
**props: Event handlers and styling
Returns:
Checkbox input component with label
"""
...
def select(*children, value: str = "", **props) -> Component:
"""
Dropdown select component with options.
Args:
*children: Select option components
value: Currently selected value
**props: Event handlers and styling
Returns:
Select dropdown component
"""
...
def slider(
value: list[float] = None,
min: float = 0,
max: float = 100,
step: float = 1,
**props
) -> Component:
"""
Range slider input for numeric values.
Args:
value: Current slider value(s)
min: Minimum allowed value
max: Maximum allowed value
step: Step increment for values
**props: Event handlers and styling
Returns:
Range slider component
"""
...
def switch(checked: bool = False, **props) -> Component:
"""
Toggle switch for boolean values.
Args:
checked: Whether switch is enabled
**props: Event handlers and styling
Returns:
Toggle switch component
"""
...
def radio_group(*children, value: str = "", **props) -> Component:
"""
Radio button group for single selection.
Args:
*children: Radio option components
value: Currently selected value
**props: Event handlers and styling
Returns:
Radio button group component
"""
...Interactive Components
Modal dialogs, overlays, tooltips, and navigation components for rich user interactions and enhanced user experience.
def dialog(*children, open: bool = False, **props) -> Component:
"""
Modal dialog overlay for focused interactions.
Provides modal dialog with backdrop, focus management, and
keyboard navigation for forms, confirmations, and content display.
Args:
*children: Dialog content components
open: Whether dialog is currently open
**props: Dialog configuration and styling
Returns:
Modal dialog component with overlay
"""
...
def alert_dialog(*children, open: bool = False, **props) -> Component:
"""
Alert dialog for confirmations and important messages.
Args:
*children: Alert content and action buttons
open: Whether alert dialog is open
**props: Alert configuration and styling
Returns:
Alert dialog component with focus trap
"""
...
def popover(*children, open: bool = False, **props) -> Component:
"""
Popover overlay positioned relative to trigger element.
Args:
*children: Popover content
open: Whether popover is currently open
**props: Positioning and styling options
Returns:
Positioned popover component
"""
...
def tooltip(*children, content: str = "", **props) -> Component:
"""
Tooltip component for contextual information.
Args:
*children: Elements that trigger tooltip on hover
content: Tooltip text content
**props: Positioning and styling options
Returns:
Tooltip component with hover behavior
"""
...
def hover_card(*children, **props) -> Component:
"""
Rich hover card with content preview.
Args:
*children: Hover card content
**props: Positioning and styling
Returns:
Hover card component with rich content
"""
...
def dropdown_menu(*children, **props) -> Component:
"""
Dropdown menu for actions and navigation.
Args:
*children: Menu items and content
**props: Menu configuration and styling
Returns:
Dropdown menu component with keyboard navigation
"""
...
def context_menu(*children, **props) -> Component:
"""
Right-click context menu for contextual actions.
Args:
*children: Menu content and trigger area
**props: Menu configuration and styling
Returns:
Context menu component with right-click handling
"""
...
def tabs(*children, value: str = "", **props) -> Component:
"""
Tab navigation component for content sections.
Args:
*children: Tab panels and tab list
value: Currently active tab value
**props: Tab configuration and styling
Returns:
Tab navigation component with content panels
"""
...Display Components
Data visualization, status indicators, and content presentation components for rich user interfaces and information display.
def card(*children, variant: str = "surface", **props) -> Component:
"""
Content card container with elevation and styling.
Provides elevated content containers for grouping related
information with consistent spacing and visual hierarchy.
Args:
*children: Card content components
variant: Visual variant ('surface', 'classic', 'ghost')
**props: Card styling and layout properties
Returns:
Card container component with elevation
"""
...
def avatar(src: str = "", fallback: str = "", **props) -> Component:
"""
User avatar component with fallback support.
Args:
src: Avatar image URL
fallback: Fallback text when image unavailable
**props: Avatar styling and size options
Returns:
Avatar component with image or fallback
"""
...
def badge(*children, variant: str = "soft", **props) -> Component:
"""
Status badge for labels and indicators.
Args:
*children: Badge content (text, numbers)
variant: Visual variant ('solid', 'soft', 'outline')
**props: Badge styling and color options
Returns:
Badge component for status display
"""
...
def callout(*children, variant: str = "soft", **props) -> Component:
"""
Highlighted callout box for important information.
Args:
*children: Callout content
variant: Visual variant ('solid', 'soft', 'outline')
**props: Callout styling and icon options
Returns:
Callout component with emphasis styling
"""
...
def table(*children, **props) -> Component:
"""
Data table component for structured data display.
Args:
*children: Table rows, headers, and content
**props: Table styling and layout options
Returns:
Semantic table component with styling
"""
...
def progress(value: float = 0, max: float = 100, **props) -> Component:
"""
Progress bar for loading and completion states.
Args:
value: Current progress value
max: Maximum progress value
**props: Progress bar styling options
Returns:
Progress bar component with animation
"""
...
def spinner(size: str = "2", **props) -> Component:
"""
Loading spinner for async operations.
Args:
size: Spinner size ('1'-'4')
**props: Spinner styling options
Returns:
Animated loading spinner component
"""
...
def skeleton(width: str = "100%", height: str = "20px", **props) -> Component:
"""
Loading skeleton placeholder for content.
Args:
width: Skeleton width (CSS value)
height: Skeleton height (CSS value)
**props: Skeleton styling options
Returns:
Animated skeleton placeholder component
"""
...
def separator(orientation: str = "horizontal", **props) -> Component:
"""
Visual separator line for content sections.
Args:
orientation: Separator direction ('horizontal', 'vertical')
**props: Separator styling options
Returns:
Separator line component
"""
...
def scroll_area(*children, **props) -> Component:
"""
Custom scrollable area with styled scrollbars.
Args:
*children: Scrollable content
**props: Scroll area styling and behavior options
Returns:
Scrollable area component with custom scrollbars
"""
...List Components
Semantic list elements for structured content presentation with consistent styling and accessibility features.
def list(*children, **props) -> Component: # Aliased as list_ns
"""
Generic list container component.
Args:
*children: List item components
**props: List styling properties
Returns:
List container component
"""
...
def ordered_list(*children, **props) -> Component:
"""
Numbered ordered list element.
Args:
*children: List item components
**props: List styling and numbering options
Returns:
Semantic ordered list component
"""
...
def unordered_list(*children, **props) -> Component:
"""
Bulleted unordered list element.
Args:
*children: List item components
**props: List styling and bullet options
Returns:
Semantic unordered list component
"""
...
def list_item(*children, **props) -> Component:
"""
Individual list item element.
Args:
*children: Item content
**props: Item styling properties
Returns:
Semantic list item component
"""
...
def data_list(*children, **props) -> Component:
"""
Key-value data list for structured information display.
Args:
*children: Data list items with labels and values
**props: Data list styling options
Returns:
Structured data list component
"""
...Media Components
Image and media display components with responsive behavior, aspect ratio management, and accessibility features.
def image(
src: str = "",
alt: str = "",
width: str = "auto",
height: str = "auto",
**props
) -> Component:
"""
Image component with responsive behavior and accessibility.
Args:
src: Image source URL
alt: Alternative text for accessibility
width: Image width (CSS value or auto)
height: Image height (CSS value or auto)
**props: Additional image and styling properties
Returns:
Responsive image component with accessibility
"""
...
def aspect_ratio(*children, ratio: float = 1.0, **props) -> Component:
"""
Aspect ratio container for consistent media dimensions.
Args:
*children: Content to maintain aspect ratio
ratio: Desired aspect ratio (width/height)
**props: Container styling options
Returns:
Aspect ratio container component
"""
...
def icon(tag: str, **props) -> Component:
"""
Lucide icon component with consistent sizing.
Args:
tag: Lucide icon name (e.g., 'heart', 'star', 'home')
**props: Icon styling and size options
Returns:
SVG icon component from Lucide icon set
"""
...Types
from typing import Any, Callable, List, Optional, Union
from reflex.vars.base import Var
# Component Types
Component = Any # Reflex component instance
ComponentProps = dict[str, Any] # Component properties
# Layout Types
FlexDirection = Literal["row", "column", "row-reverse", "column-reverse"]
FlexWrap = Literal["nowrap", "wrap", "wrap-reverse"]
AlignItems = Literal["start", "center", "end", "stretch", "baseline"]
JustifyContent = Literal["start", "center", "end", "between", "around", "evenly"]
# Typography Types
HeadingSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
TextSize = Literal["1", "2", "3", "4", "5", "6", "7", "8", "9"]
HeadingTag = Literal["h1", "h2", "h3", "h4", "h5", "h6"]
# Form Types
InputType = Literal["text", "email", "password", "number", "tel", "url", "search"]
ButtonVariant = Literal["solid", "soft", "outline", "ghost"]
ButtonSize = Literal["1", "2", "3", "4"]
# Interactive Types
DialogState = bool # Dialog open/closed state
TooltipPlacement = Literal["top", "bottom", "left", "right"]
# Display Types
BadgeVariant = Literal["solid", "soft", "outline"]
CardVariant = Literal["surface", "classic", "ghost"]
SeparatorOrientation = Literal["horizontal", "vertical"]
# Media Types
ImageFit = Literal["contain", "cover", "fill", "scale-down", "none"]
AspectRatio = float # Width/height ratio
# Responsive Types
from reflex.components.core.breakpoints import Responsive
ResponsiveValue = Union[str, Responsive[str]] # Value that can be responsiveInstall with Tessl CLI
npx tessl i tessl/pypi-reflex