Skip to content

Component Overview

FluxUI ships with 35+ built-in components covering every common UI pattern. All components are available as ui.<ComponentName> after import fluxui as ui.

All Components

Layout

Component Description Key Parameters
Column Vertical flex container gap, align, justify, width
Row Horizontal flex container gap, align, justify, wrap
Grid CSS grid container cols, gap
Card Elevated content container title, description, padding
Tabs Tab group container —
Tab Single tab pane label
Modal Dialog overlay open, on_close, title, width
Sidebar Slide-in drawer open, on_close, width, side
Accordion Collapsible section title, open
Divider Horizontal rule —

Input

Component Description Key Parameters
Button Clickable button label, on_click, variant, disabled, icon
TextInput Single-line text field label, placeholder, value, on_change, error, help_text
NumberInput Numeric input with min/max label, value, on_change, min, max, step
Textarea Multi-line text field label, placeholder, value, on_change, rows
Select Dropdown selector label, options, value, on_change, placeholder
Checkbox Boolean checkbox label, checked, on_change, disabled
Switch Toggle switch label, checked, on_change, disabled
Slider Range slider label, value, on_change, min, max, step
RadioGroup Radio button group label, options, value, on_change
FileUpload File picker with upload prompt, accept, multiple, on_change

Display

Component Description Key Parameters
Text Paragraph / inline text content, variant
Heading Section heading h1–h6 content, level
Code Syntax-highlighted code block content, language, show_copy
Image Responsive image src, alt, width, height
Badge Colored status label text, variant
Metric KPI card with delta label, value, delta, delta_suffix, help_text
Progress Progress bar value, label, show_value
Table Data table data, columns, striped, hover
HTML Raw HTML passthrough content
Markdown Rendered Markdown content
Chart Plotly figure figure, height, config

Feedback

Component Description Key Parameters
Alert Inline alert banner message, variant, dismissable, on_dismiss
Skeleton Loading placeholder width, height, rounded
Empty Empty-state illustration title, description, icon
Spinner Loading spinner size
Component Description Key Parameters
Link Hyperlink text, href, external
NavMenu Top navigation bar brand
NavItem Navigation menu item label, href, active, icon
Breadcrumb Breadcrumb trail items
Pagination Page selector page, total_pages, on_change

Advanced

Component Description Key Parameters
DataGrid Sortable, paginated data table data, columns, page_size
CustomComponent Base class for custom components override render(), client_script()

Common Patterns

Reactive values

Any component parameter that accepts a string or number can also accept a ReactiveVar or a zero-argument callable (lambda). FluxUI automatically subscribes the component:

count = ui.state(0)

ui.Text(lambda: f"Count: {count.value}")   # lambda — subscribed
ui.Metric(label="Count", value=count)       # ReactiveVar passed directly
ui.Progress(lambda: count.value * 10)       # lambda returning float

Style and class overrides

Every component accepts style= (inline CSS dict) and class_names= (list of CSS classes):

ui.Card(
    title="Custom Card",
    style={"border": "2px solid var(--md-accent-fg-color)"},
    class_names=["my-special-card"],
)

Context managers for layout

Layout components (Column, Row, Grid, Card, Tabs, Tab, Modal, Sidebar, Accordion) are used as context managers:

with ui.Grid(cols=3):
    ui.Metric(label="Users",    value="1,234", delta="+12%")
    ui.Metric(label="Revenue",  value="$56k",  delta="+3%")
    ui.Metric(label="Uptime",   value="99.9%")