# Components

> Browse 90+ Pyzed UI components for Python desktop GUIs: buttons, tables, trees, editors, charts and dialogs, each with a preview, examples and its API.

Source: https://albakore.github.io/pyzed/library/

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](https://albakore.github.io/pyzed/reference/widgets/).

```python
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](https://albakore.github.io/pyzed/guides/windows/) 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](https://lucide.dev) 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](https://albakore.github.io/pyzed/blocks/).

:::note[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](https://albakore.github.io/pyzed/library/button/) and
[Input](https://albakore.github.io/pyzed/library/input/), also show a short recording of them in use.
:::

:::tip[Inspiration]
The look of these components takes inspiration from the UI of the [Zed](https://zed.dev) 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.

## Display

Text, badges, keys, avatars and surfaces.

## Forms

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

## Dates and times

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

## Feedback

Progress, loading, notices and empty states.

## Data

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

## Lists and menus

Rows, file trees, context menus and collapsible sections.

## Navigation

Tabs, breadcrumbs and toolbars.

## Overlays

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

## Dialogs

Ready-made dialogs with translated buttons.

## System

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

## Workspace

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

## Code and tools

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

## AI agents

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

## Layout

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

## Content

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