Components

components

114

variants

774

categories

16

Actions6Display9Forms12Dates and times4Feedback7Data8Lists and menus7Navigation3Overlays6Dialogs7System2Workspace7Code and tools7AI agents9Layout11Content9

Every component of pyzed.ui, plus the layout and content widgets of pyzed, with a live preview, the code that draws it, examples and its API. Components are functions that return widgets, so they combine freely with each other and with the base widgets.

import pyzed as pz
from pyzed import ui

ui.button("Save", self.save, icon="save", variant="solid", keys="ctrl-s")

• Theme colors. Every component reads the current theme (App.theme, or the window’s theme in multi-window apps), and accepts theme= to use another one.
• Tokens or hex. Color parameters (color, icon_color, tint…) take a theme token such as "accent", "text_muted" or "error", or a "#rrggbb" color.
• Messages or callables. on_press, on_select, on_toggle… take a message for update or a callable; those that produce a value (text, bool, id) call it with that value.
• Icons. icon= takes any Lucide name (pyzed icons lists them).

To see them all running, open the gallery: python examples/gallery.py. Looking for whole screens built from them (login, dashboard, settings, chat, kanban…)? See Blocks.

What is on each page

A short explanation in plain words, a preview with its code, every variant, size and state captured in light and dark with the snippet that draws it, examples, tips and the API table. Pages of interactive components, such as Button and Input, also show a short recording of them in use.

Inspiration

The look of these components takes inspiration from the UI of the Zed editor; the idea of building desktop tools from ready-made pieces comes from Godot, Unreal Engine, Visual Basic and Qt Designer. pyzed is an independent project.

Actions

Buttons and small controls that run something.

6 components · 86 variants

ButtonThe themed button: variants, sizes, icons and shortcuts.33 variants

ChipA compact tag: clickable as a filter, removable with an ✕.9 variants

Icon buttonA square button with just an icon and an optional tooltip.20 variants

Mouse areaMakes any widget react to clicks, hover, drags and the wheel.5 variants

Split buttonA main action plus an arrow that opens more options.11 variants

Toggle groupAn icon-only segmented control.8 variants

Display

Text, badges, keys, avatars and surfaces.

9 components · 92 variants

AvatarA round avatar with initials in a collaborator color.15 variants

BadgeA small pill for statuses, versions and counters.15 variants

CardA bordered surface with an optional title and actions.8 variants

DividerA thin line in the theme's border color.6 variants

HeadingSemibold titles in three levels.6 variants

IndicatorA colored dot for status, presence or unsaved changes.11 variants

KbdKeyboard shortcuts drawn as keys, with symbols on macOS.6 variants

LabelText with a theme color, size and weight; muted for secondary text.19 variants

TooltipA hint shown on hover, optionally with its shortcut.6 variants

Forms

Controlled inputs: they show your state and report every change.

12 components · 107 variants

CheckboxA checkbox with an optional label.10 variants

Color pickerNewPick a color, a gradient or a masked fill; swatches show them.7 variants

FieldA settings row: title and description left, control right.8 variants

Icon pickerNewPick one of the ~2000 Lucide icons from a searchable grid.4 variants

InputA controlled text field with icon, placeholder and password mode.18 variants

Number fieldA number with −/+ buttons, limits, step and suffix.9 variants

Radio groupMutually exclusive options as radio buttons.8 variants

Search inputAn input with a magnifying glass, for filtering.6 variants

SegmentedA group of mutually exclusive text buttons.9 variants

SelectA dropdown to choose one option.9 variants

SliderPick a number in a range by dragging.11 variants

SwitchAn on/off switch for settings that apply at once.8 variants

Dates and times

Calendars and fields for dates, ranges and times, in the format you choose.

4 components · 25 variants

CalendarNewA month grid to pick a day, a range or several days, always on screen.10 variants

Date pickerNewA date field with a calendar that drops down, in the format you choose.8 variants

Date range pickerNewTwo dates in one field, with two months side by side and quick ranges.2 variants

Time pickerNewA time field with columns of hours and minutes, in 24 or 12 hours.5 variants

Feedback

Progress, loading, notices and empty states.

7 components · 55 variants

CalloutAn inline notice with a title, text and actions.8 variants

Count badgeA round counter that shows 99+ above its max.9 variants

Empty stateA centered placeholder for empty lists and searches.5 variants

Error boundaryNewDraws a part of the view, or an error card in its place when it fails.8 variants

Keybinding hintA muted “Open file Ctrl P” hint.3 variants

ProgressA thin progress bar in a semantic color.13 variants

SpinnerA spinning arc for loading states.9 variants

Data

Tables, numbers and small charts drawn with the theme colors.

8 components · 41 variants

Bar chartA vertical bar chart with labels.4 variants

Diff stat+12 −3 with GitHub-style blocks.4 variants

DonutA donut chart with a label in the middle.5 variants

FacepileOverlapping collaborator avatars with +N.4 variants

Settings groupA titled block of field rows, for settings screens.3 variants

SparklineA tiny line chart for trends.6 variants

StatA dashboard number with change and sparkline.6 variants

TableA data table with a fixed header, sorting and selection.9 variants

Lists and menus

Rows, file trees, context menus and collapsible sections.

7 components · 43 variants

AccordionStacked collapsible sections, like the panels of a settings screen.5 variants

DisclosureOne collapsible section with an arrow.3 variants

List headerA small section title for lists, with an end slot.3 variants

List itemA list row with icon, text and an end slot.13 variants

MenuA context menu with icons, shortcuts and checks.8 variants

TreeA collapsible file tree with icons and git colors.8 variants

Virtual listNewA list that only builds the rows in view, for millions of items.3 variants

Navigation

Tabs, breadcrumbs and toolbars.

3 components · 17 variants

Breadcrumbssrc › main.rs › fn main, optionally clickable.5 variants

Tab barEditor tabs with icons, dirty dots and close buttons.8 variants

ToolbarThe bar under the tabs: breadcrumbs and buffer actions.4 variants

Overlays

Things drawn on top of the UI: layers, modals, palettes and notifications.

6 components · 27 variants

Command paletteA command palette with fuzzy search and shortcuts.3 variants

LayerDraws an overlay over your view; clicking outside dismisses it.5 variants

ModalA dialog surface with title, content and footer buttons.4 variants

PickerA searchable list on a floating surface, with fuzzy matching.4 variants

PopoverFloating content at a point: context menus, color pickers.2 variants

ToastNotifications stacked in the bottom-right corner.9 variants

Dialogs

Ready-made dialogs with translated buttons.

7 components · 26 variants

AlertNewA message with one button.6 variants

ChoiceNewA message with your own buttons.2 variants

ConfirmNewA yes/no question, red for destructive actions.4 variants

Dialog layerNewCenters a dialog over your view with a dimmed backdrop.3 variants

Error dialogNewWhat went wrong, where, and the traceback, with Copy and Go to source.6 variants

PromptNewAsks for a line of text.3 variants

Unsaved changesNew“Save your changes before closing?”2 variants

System

Pieces that talk to the operating system: its file dialogs and files dropped from the desktop.

2 components · 14 variants

Drop zoneNewAn area that takes files dragged from the desktop or the file manager.6 variants

File pickerNewA path field with a button that opens the system's file or folder dialog.8 variants

Workspace

The frame of an editor-style window: docks, title bar, status bar and panels.

7 components · 35 variants

PanelA dockable, resizable side panel.3 variants

Panel headerIcon, title and actions on top of a dock.4 variants

SplitTwo panes with a draggable divider.3 variants

Status barThe bottom bar: diagnostics, cursor position, language.6 variants

Title barThe top bar with project and branch pickers.6 variants

Window frameNewYour own title bar, window buttons and menus.8 variants

WorkspaceThe layout of an editor-style window: title bar, docks, center, status bar.5 variants

Code and tools

The code editor, a terminal view, a log console and help boxes.

7 components · 28 variants

AboutAn About box with icon, version, details and links.3 variants

ConsoleA dev-tools style log with levels, filter, copy and clear.3 variants

EditorA full code editor: highlighting, folding, minimap, git markers.9 variants

MarkdownRenders Markdown with the theme's colors.5 variants

Reference browserBuilt-in, searchable docs like Godot's: a class list next to the open page.2 variants

ShortcutsA searchable list of key bindings, grouped.2 variants

TerminalA read-only terminal view with ANSI colors.4 variants

AI agents

The pieces of an AI agent’s chat and settings: tool calls, diffs, plans, history and sign-in.

9 components · 70 variants

CatalogNewThings to install, with a search box and Install or Update.5 variants

Context meterNewHow full a model's context window is: a ring and 48k / 200k.8 variants

Diff viewNewAn edit as colored lines: added in green, removed in red.5 variants

Edits barNewThe files an agent changed, with Keep all and Reject all.4 variants

PlanNewAn agent's plan as a checklist that folds.5 variants

Service rowNewA settings row for an MCP server, agent or skill: status, switch and menu.10 variants

Sign-in promptNewAsks to sign in, then shows the browser step, a code and Cancel.7 variants

Thread historyNewPast conversations, searchable and grouped by day.5 variants

Tool callNewOne step of an AI agent: what it did, its result, and Allow or Deny.21 variants

Layout

The base layout widgets of pyzed (pz.*) every component is built with.

11 components · 57 variants

Anchor layoutNewFree positions like a form designer, with anchors that follow resizes.10 variants

ColumnStacks children vertically.6 variants

ContainerSize, padding, alignment, background, border and shadow for one child.7 variants

FlexNewCSS flexbox: justify, align, gap, wrap and grow.8 variants

GridNewEqual columns, or CSS-like tracks with spans.5 variants

ResizableNewA panel whose edge can be dragged to resize it.3 variants

ResponsiveBuilds its content from the space actually available.2 variants

RowLays out children horizontally.8 variants

ScrollableScrolls content that doesn't fit.2 variants

SpaceFixed gaps and flexible spacers.3 variants

StackLayers children on top of each other; pin places one at x, y.3 variants

Content

Base widgets for text, icons, images, Markdown, QR codes and drawing.

9 components · 51 variants

AnimationNewPresets, keyframes and transitions for any widget.

Canvas2D drawing with shapes, paths, text and mouse events.6 variants

EffectsNewGlow, bloom, glass and opacity as style properties.6 variants

IconLucide icons by name, and SVG images.9 variants

ImageBitmaps with fit, opacity, radius; a pan-and-zoom viewer.6 variants

QR codeA QR code for any text or URL.3 variants

Rich textOne block of text mixing colors, weights and links.8 variants

ShaderNewA widget painted on the GPU by your own WGSL code.3 variants

TextA piece of text with size, color, font and weight.10 variants