A web development framework for Python that enables building fast, beautiful, and interactive web applications using reactive programming principles.
—
Comprehensive set of UI functions for building layouts, input controls, output containers, and interactive elements. Shiny's UI system provides both high-level layout components and low-level HTML building blocks.
High-level page layout functions that define the overall structure of your application.
def ui.page_fluid(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create a fluid container page layout.
Args:
*args: UI elements to include in the page.
**kwargs: Additional HTML attributes.
Returns:
Page container with fluid width.
"""
def ui.page_fixed(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create a fixed-width container page layout.
Args:
*args: UI elements to include in the page.
**kwargs: Additional HTML attributes.
Returns:
Page container with fixed width.
"""
def ui.page_fillable(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create a fillable page layout that expands to viewport.
Args:
*args: UI elements to include in the page.
**kwargs: Additional HTML attributes.
Returns:
Page container that fills viewport.
"""
def ui.page_sidebar(
sidebar: Sidebar,
*args: TagChild,
title: str | Tag | TagList | None = None,
fillable: bool = True,
**kwargs: TagAttr
) -> Tag:
"""
Create a page layout with sidebar.
Args:
sidebar: Sidebar configuration.
*args: Main content elements.
title: Page title.
fillable: Whether page should fill viewport.
**kwargs: Additional HTML attributes.
Returns:
Page with sidebar layout.
"""
def ui.page_navbar(
*args: TagChild,
title: str | Tag | TagList = "Shiny",
id: str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a page layout with navigation bar.
Args:
*args: Navigation panels and content.
title: Application title in navbar.
id: Unique identifier for navbar.
**kwargs: Additional HTML attributes.
Returns:
Page with navigation bar layout.
"""# Fluid page layout
app_ui = ui.page_fluid(
ui.h1("My Shiny App"),
ui.layout_columns(
ui.input_slider("n", "Number:", 1, 100, 50),
ui.output_plot("plot")
)
)
# Page with sidebar
app_ui = ui.page_sidebar(
sidebar=ui.sidebar(
ui.input_select("dataset", "Dataset:", choices=["mtcars", "iris"]),
ui.input_numeric("obs", "Observations:", 10, 1, 100)
),
ui.h2("Analysis Results"),
ui.output_data_frame("data"),
ui.output_plot("plot")
)
# Navbar page layout
app_ui = ui.page_navbar(
ui.nav_panel("Data",
ui.h2("Data Input"),
ui.input_file("file", "Choose CSV File")
),
ui.nav_panel("Analysis",
ui.h2("Data Analysis"),
ui.output_plot("analysis_plot")
),
title="Data Analysis App"
)Components for organizing content within pages.
def ui.layout_columns(
*args: TagChild,
col_widths: int | Sequence[int] | None = None,
row_heights: str | Sequence[str] | None = None,
fill: bool = True,
**kwargs: TagAttr
) -> Tag:
"""
Create a column-based layout.
Args:
*args: Elements to arrange in columns.
col_widths: Column width specifications.
row_heights: Row height specifications.
fill: Whether to fill available space.
**kwargs: Additional HTML attributes.
Returns:
Column layout container.
"""
def ui.layout_column_wrap(
*args: TagChild,
width: str | float = 200,
heights_equal: Literal["all", "row"] | None = None,
fill: bool = True,
**kwargs: TagAttr
) -> Tag:
"""
Create a wrapping column layout.
Args:
*args: Elements to arrange with wrapping.
width: Minimum column width.
heights_equal: Height equalization strategy.
fill: Whether to fill available space.
**kwargs: Additional HTML attributes.
Returns:
Wrapping column layout.
"""
def ui.layout_sidebar(
sidebar: Sidebar,
*args: TagChild,
**kwargs: TagAttr
) -> Tag:
"""
Create a sidebar layout container.
Args:
sidebar: Sidebar configuration.
*args: Main content elements.
**kwargs: Additional HTML attributes.
Returns:
Sidebar layout container.
"""Sidebar creation and management functions.
def ui.sidebar(
*args: TagChild,
width: int = 250,
position: Literal["left", "right"] = "left",
open: bool | Literal["desktop", "always"] = "desktop",
id: str | None = None,
**kwargs: TagAttr
) -> Sidebar:
"""
Create a sidebar configuration.
Args:
*args: Sidebar content elements.
width: Sidebar width in pixels.
position: Sidebar position (left or right).
open: Initial open state or open behavior.
id: Unique identifier for programmatic control.
**kwargs: Additional HTML attributes.
Returns:
Sidebar configuration object.
"""
def ui.update_sidebar(
id: str,
*,
show: bool | None = None,
session: Session | None = None
) -> None:
"""
Update sidebar visibility.
Args:
id: Sidebar identifier.
show: Whether to show or hide sidebar.
session: Session to update (current session if None).
"""
class Sidebar:
"""
Sidebar configuration class.
"""
def __init__(
self,
*args: TagChild,
width: int = 250,
position: Literal["left", "right"] = "left",
open: bool | Literal["desktop", "always"] = "desktop",
**kwargs: TagAttr
): ...Card-based layout components for grouping related content.
def ui.card(
*args: TagChild,
full_screen: bool = False,
height: str | float | None = None,
max_height: str | float | None = None,
min_height: str | float | None = None,
fill: bool = True,
**kwargs: TagAttr
) -> Tag:
"""
Create a card container.
Args:
*args: Card content elements.
full_screen: Enable full-screen toggle.
height: Card height.
max_height: Maximum card height.
min_height: Minimum card height.
fill: Whether card should fill available space.
**kwargs: Additional HTML attributes.
Returns:
Card container element.
"""
def ui.card_header(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create card header content.
Args:
*args: Header content elements.
**kwargs: Additional HTML attributes.
Returns:
Card header element.
"""
def ui.card_body(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create card body content.
Args:
*args: Body content elements.
**kwargs: Additional HTML attributes.
Returns:
Card body element.
"""
def ui.card_footer(*args: TagChild, **kwargs: TagAttr) -> Tag:
"""
Create card footer content.
Args:
*args: Footer content elements.
**kwargs: Additional HTML attributes.
Returns:
Card footer element.
"""# Basic card
ui.card(
ui.card_header("Analysis Results"),
ui.card_body(
ui.output_plot("main_plot"),
ui.output_text("summary")
),
ui.card_footer("Last updated: 2024-01-15")
)
# Card with full-screen capability
ui.card(
ui.h3("Interactive Visualization"),
ui.output_plot("complex_plot"),
full_screen=True,
height="400px"
)
# Multiple cards in layout
ui.layout_columns(
ui.card(
ui.card_header("Input Parameters"),
ui.input_slider("alpha", "Alpha:", 0, 1, 0.5),
ui.input_select("method", "Method:", ["A", "B", "C"])
),
ui.card(
ui.card_header("Results"),
ui.output_table("results")
)
)User input components for collecting data and user interactions.
def ui.input_text(
id: str,
label: str,
value: str = "",
*,
width: str | None = None,
placeholder: str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a text input.
Args:
id: Input identifier.
label: Input label.
value: Initial value.
width: Input width.
placeholder: Placeholder text.
**kwargs: Additional HTML attributes.
Returns:
Text input element.
"""
def ui.input_text_area(
id: str,
label: str,
value: str = "",
*,
width: str | None = None,
height: str | None = None,
rows: int | None = None,
cols: int | None = None,
placeholder: str | None = None,
resize: Literal["none", "both", "horizontal", "vertical"] | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a multi-line text input.
Args:
id: Input identifier.
label: Input label.
value: Initial value.
width: Input width.
height: Input height.
rows: Number of rows.
cols: Number of columns.
placeholder: Placeholder text.
resize: Resize behavior.
**kwargs: Additional HTML attributes.
Returns:
Text area element.
"""
def ui.input_password(
id: str,
label: str,
value: str = "",
**kwargs: TagAttr
) -> Tag:
"""
Create a password input.
Args:
id: Input identifier.
label: Input label.
value: Initial value.
**kwargs: Additional HTML attributes.
Returns:
Password input element.
"""
def ui.input_numeric(
id: str,
label: str,
value: float | int | None,
*,
min: float | int | None = None,
max: float | int | None = None,
step: float | int | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a numeric input.
Args:
id: Input identifier.
label: Input label.
value: Initial numeric value.
min: Minimum allowed value.
max: Maximum allowed value.
step: Step size for increment/decrement.
**kwargs: Additional HTML attributes.
Returns:
Numeric input element.
"""def ui.input_select(
id: str,
label: str,
choices: list[str] | dict[str, str],
*,
selected: str | None = None,
multiple: bool = False,
selectize: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a select dropdown.
Args:
id: Input identifier.
label: Input label.
choices: Available choices as list or dict.
selected: Initially selected value(s).
multiple: Allow multiple selections.
selectize: Use selectize.js for enhanced interface.
**kwargs: Additional HTML attributes.
Returns:
Select input element.
"""
def ui.input_selectize(
id: str,
label: str,
choices: list[str] | dict[str, str],
*,
selected: str | list[str] | None = None,
multiple: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a selectize dropdown with enhanced features.
Args:
id: Input identifier.
label: Input label.
choices: Available choices.
selected: Initially selected value(s).
multiple: Allow multiple selections.
**kwargs: Additional HTML attributes.
Returns:
Selectize input element.
"""
def ui.input_checkbox(
id: str,
label: str,
value: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a checkbox input.
Args:
id: Input identifier.
label: Checkbox label.
value: Initial checked state.
**kwargs: Additional HTML attributes.
Returns:
Checkbox input element.
"""
def ui.input_checkbox_group(
id: str,
label: str,
choices: list[str] | dict[str, str],
*,
selected: list[str] | None = None,
inline: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a group of checkboxes.
Args:
id: Input identifier.
label: Group label.
choices: Available checkbox options.
selected: Initially selected values.
inline: Display checkboxes inline.
**kwargs: Additional HTML attributes.
Returns:
Checkbox group element.
"""
def ui.input_radio_buttons(
id: str,
label: str,
choices: list[str] | dict[str, str],
*,
selected: str | None = None,
inline: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a group of radio buttons.
Args:
id: Input identifier.
label: Group label.
choices: Available radio options.
selected: Initially selected value.
inline: Display radio buttons inline.
**kwargs: Additional HTML attributes.
Returns:
Radio button group element.
"""
def ui.input_switch(
id: str,
label: str,
value: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a toggle switch input.
Args:
id: Input identifier.
label: Switch label.
value: Initial switch state.
**kwargs: Additional HTML attributes.
Returns:
Switch input element.
"""def ui.input_slider(
id: str,
label: str,
min: float,
max: float,
value: float | list[float],
*,
step: float | None = None,
ticks: bool = True,
animate: bool | AnimationOptions = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a slider input.
Args:
id: Input identifier.
label: Slider label.
min: Minimum value.
max: Maximum value.
value: Initial value or range.
step: Step size.
ticks: Show tick marks.
animate: Enable animation controls.
**kwargs: Additional HTML attributes.
Returns:
Slider input element.
"""
class AnimationOptions:
"""
Animation options for sliders.
"""
def __init__(
self,
interval: int = 1000,
loop: bool = False,
play_button: str | None = None,
pause_button: str | None = None
): ...def ui.input_action_button(
id: str,
label: str,
*,
icon: Tag | str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create an action button.
Args:
id: Input identifier.
label: Button text.
icon: Button icon.
**kwargs: Additional HTML attributes.
Returns:
Action button element.
"""
def ui.input_action_link(
id: str,
label: str,
*,
icon: Tag | str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create an action link.
Args:
id: Input identifier.
label: Link text.
icon: Link icon.
**kwargs: Additional HTML attributes.
Returns:
Action link element.
"""
def ui.input_task_button(
id: str,
label: str,
*,
icon: Tag | str | None = None,
label_busy: str = "Processing...",
icon_busy: Tag | str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a task button for extended operations.
Args:
id: Input identifier.
label: Button text.
icon: Button icon.
label_busy: Text shown during processing.
icon_busy: Icon shown during processing.
**kwargs: Additional HTML attributes.
Returns:
Task button element.
"""def ui.input_date(
id: str,
label: str,
value: str | date | None = None,
*,
min: str | date | None = None,
max: str | date | None = None,
format: str = "yyyy-mm-dd",
**kwargs: TagAttr
) -> Tag:
"""
Create a date input.
Args:
id: Input identifier.
label: Input label.
value: Initial date.
min: Minimum allowed date.
max: Maximum allowed date.
format: Date display format.
**kwargs: Additional HTML attributes.
Returns:
Date input element.
"""
def ui.input_date_range(
id: str,
label: str,
start: str | date | None = None,
end: str | date | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a date range input.
Args:
id: Input identifier.
label: Input label.
start: Initial start date.
end: Initial end date.
**kwargs: Additional HTML attributes.
Returns:
Date range input element.
"""
def ui.input_file(
id: str,
label: str,
*,
multiple: bool = False,
accept: str | list[str] | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a file upload input.
Args:
id: Input identifier.
label: Input label.
multiple: Allow multiple file selection.
accept: Accepted file types.
**kwargs: Additional HTML attributes.
Returns:
File input element.
"""Containers for displaying rendered output content.
def ui.output_text(
id: str,
inline: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a text output container.
Args:
id: Output identifier.
inline: Display as inline element.
**kwargs: Additional HTML attributes.
Returns:
Text output container.
"""
def ui.output_text_verbatim(
id: str,
placeholder: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a verbatim text output container.
Args:
id: Output identifier.
placeholder: Show placeholder when empty.
**kwargs: Additional HTML attributes.
Returns:
Verbatim text output container.
"""
def ui.output_code(
id: str,
placeholder: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a code output container.
Args:
id: Output identifier.
placeholder: Show placeholder when empty.
**kwargs: Additional HTML attributes.
Returns:
Code output container.
"""
def ui.output_plot(
id: str,
width: str = "100%",
height: str = "400px",
*,
click: bool | ClickOpts = False,
dblclick: bool | DblClickOpts = False,
hover: bool | HoverOpts = False,
brush: bool | BrushOpts = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a plot output container.
Args:
id: Output identifier.
width: Plot width.
height: Plot height.
click: Enable click events.
dblclick: Enable double-click events.
hover: Enable hover events.
brush: Enable brush selection.
**kwargs: Additional HTML attributes.
Returns:
Plot output container.
"""
def ui.output_image(
id: str,
width: str = "auto",
height: str = "auto",
**kwargs: TagAttr
) -> Tag:
"""
Create an image output container.
Args:
id: Output identifier.
width: Image width.
height: Image height.
**kwargs: Additional HTML attributes.
Returns:
Image output container.
"""
def ui.output_table(
id: str,
**kwargs: TagAttr
) -> Tag:
"""
Create a table output container.
Args:
id: Output identifier.
**kwargs: Additional HTML attributes.
Returns:
Table output container.
"""
def ui.output_data_frame(
id: str,
**kwargs: TagAttr
) -> Tag:
"""
Create a data frame output container.
Args:
id: Output identifier.
**kwargs: Additional HTML attributes.
Returns:
Data frame output container.
"""
def ui.output_ui(
id: str,
inline: bool = False,
**kwargs: TagAttr
) -> Tag:
"""
Create a dynamic UI output container.
Args:
id: Output identifier.
inline: Display as inline element.
**kwargs: Additional HTML attributes.
Returns:
UI output container.
"""Components for creating navigation interfaces.
def ui.nav_panel(
title: str,
*args: TagChild,
value: str | None = None,
icon: Tag | str | None = None
) -> NavPanel:
"""
Create a navigation panel.
Args:
title: Panel title.
*args: Panel content.
value: Panel value (defaults to title).
icon: Panel icon.
Returns:
Navigation panel object.
"""
def ui.nav_menu(
title: str,
*args: NavPanel | NavMenu,
value: str | None = None,
icon: Tag | str | None = None
) -> NavMenu:
"""
Create a navigation menu.
Args:
title: Menu title.
*args: Menu items.
value: Menu value.
icon: Menu icon.
Returns:
Navigation menu object.
"""
def ui.navset_tab(
*args: NavPanel | NavMenu,
id: str | None = None,
selected: str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a tabbed navigation set.
Args:
*args: Navigation items.
id: Unique identifier.
selected: Initially selected tab.
**kwargs: Additional HTML attributes.
Returns:
Tabbed navigation element.
"""
def ui.navset_pill(
*args: NavPanel | NavMenu,
id: str | None = None,
selected: str | None = None,
**kwargs: TagAttr
) -> Tag:
"""
Create a pill-style navigation set.
Args:
*args: Navigation items.
id: Unique identifier.
selected: Initially selected item.
**kwargs: Additional HTML attributes.
Returns:
Pill navigation element.
"""Components for user interaction and feedback.
def ui.tooltip(
trigger: Tag,
content: str | Tag | TagList,
*,
id: str | None = None,
placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
**kwargs: TagAttr
) -> Tag:
"""
Add a tooltip to an element.
Args:
trigger: Element that triggers the tooltip.
content: Tooltip content.
id: Unique identifier.
placement: Tooltip placement.
**kwargs: Additional HTML attributes.
Returns:
Element with tooltip.
"""
def ui.popover(
trigger: Tag,
content: str | Tag | TagList,
*,
title: str | None = None,
id: str | None = None,
placement: Literal["auto", "top", "right", "bottom", "left"] = "auto",
**kwargs: TagAttr
) -> Tag:
"""
Add a popover to an element.
Args:
trigger: Element that triggers the popover.
content: Popover content.
title: Popover title.
id: Unique identifier.
placement: Popover placement.
**kwargs: Additional HTML attributes.
Returns:
Element with popover.
"""
def ui.modal(
*args: TagChild,
title: str | Tag | TagList | None = None,
footer: Tag | TagList | None = None,
size: Literal["s", "m", "l", "xl"] = "m",
easy_close: bool = True,
**kwargs: TagAttr
) -> Tag:
"""
Create a modal dialog.
Args:
*args: Modal body content.
title: Modal title.
footer: Modal footer content.
size: Modal size.
easy_close: Allow closing by clicking outside.
**kwargs: Additional HTML attributes.
Returns:
Modal dialog element.
"""
def ui.modal_show(modal: Tag, session: Session | None = None) -> None:
"""
Show a modal dialog.
Args:
modal: Modal element to show.
session: Session to use.
"""
def ui.modal_remove(session: Session | None = None) -> None:
"""
Remove/hide the current modal.
Args:
session: Session to use.
"""# Complete UI example combining multiple components
app_ui = ui.page_sidebar(
sidebar=ui.sidebar(
ui.h4("Controls"),
ui.input_select(
"dataset",
"Choose dataset:",
choices=["mtcars", "iris", "diamonds"]
),
ui.input_checkbox_group(
"variables",
"Select variables:",
choices=["var1", "var2", "var3"],
selected=["var1"]
),
ui.input_slider(
"sample_size",
"Sample size:",
min=10, max=1000, value=100
),
ui.input_action_button(
"update",
"Update Analysis",
class_="btn-primary"
)
),
# Main content area
ui.h1("Data Analysis Dashboard"),
ui.layout_columns(
# Left column - data display
ui.card(
ui.card_header(
ui.tooltip(
ui.h4("Dataset Preview"),
"Shows first few rows of selected dataset"
)
),
ui.output_data_frame("data_preview"),
full_screen=True
),
# Right column - visualization
ui.card(
ui.card_header("Visualization"),
ui.output_plot(
"main_plot",
click=True,
brush=True,
height="400px"
)
)
),
# Bottom section - detailed analysis
ui.navset_tab(
ui.nav_panel(
"Summary Statistics",
ui.output_table("summary_stats")
),
ui.nav_panel(
"Correlation Analysis",
ui.output_plot("correlation_plot")
),
ui.nav_panel(
"Export",
ui.h4("Export Options"),
ui.download_button("download_data", "Download Data"),
ui.download_button("download_report", "Download Report")
),
id="analysis_tabs"
),
title="Advanced Analytics"
)Install with Tessl CLI
npx tessl i tessl/pypi-shiny