gpui-component — the toy box — Crux + gpui

# gpui-component — the toy box

Plain gpui gives you primitives: `div`, text, click handlers, layout.

You still have to build **buttons**, **inputs**, **tags**, **tables**, **dialogs**,
**themes**, **icons**, and so on, yourself.

Or you grab **gpui-component**, an open-source widget library maintained by
the **Longbridge** team.

- Repo: <https://github.com/longbridge/gpui-component>
- Showcase site: <https://longbridge.github.io/gpui-component/>

---
## What you get

- Buttons, inputs, dropdowns, tables, dialogs, notifications, tooltips.
- A theme system (light/dark, color tokens).
- A `Tag` widget we use in our app for the temperature chip.
- An `Icon` set. Layout primitives. The lot.

It is the closest thing the gpui world has to a "component kit".

---
## Three ways to explore it

1. One-folder, one-feature demos.
2. The `story` showcase app — every widget in one place.
3. The web gallery — the same showcase, in your browser.

We will look at each next.

---
## 1. Focused demos

Each folder under `examples/` is a small workspace binary crate (not a cargo
`--example` target), so you launch them with `-p <crate-name>`:

```bash
git clone https://github.com/longbridge/gpui-component.git
cd gpui-component
cargo run -p input            # text inputs
cargo run -p hello_world      # the smallest possible gpui-component app
cargo run -p sidebar          # sidebar + content layout
cargo run -p dialog_overlay   # modal dialogs
```

The `crates/story` crate also exposes a few classic `--example` targets:

```bash
cargo run --example markdown
cargo run --example editor
cargo run --example tiles
```

> Standalone `button` and `tag` examples do **not** exist. For those, use the
> big showcase on the next slide.

↗ github.com/longbridge/gpui-component/tree/main/[examples](https://github.com/longbridge/gpui-component/tree/main/examples)

---
## 2. The `story` showcase app

One desktop app, every widget, a sidebar to browse them — the native version
of the showcase site.

```bash
cd gpui-component
cargo run -p story
```

This is where you go to feel `Button`, `Tag`, `Table`, `Dialog`, and all the
rest in one sitting.

↗ github.com/longbridge/gpui-component/tree/main/[crates/story](https://github.com/longbridge/gpui-component/tree/main/crates/story)

---
## 3. The web gallery

The newer and most intriguing one: the same `story` showcase, compiled to
**WebAssembly** and rendered in the browser.

> *"How did they pull that off?"* — good question. gpui draws to the GPU,
> and on the web that means going through `<canvas>` with `WebGPU` / `WebGL`.
> If you want to dig in: peek at the `gallery/` and `crates/story-web/`
> folders of the repo. We come back to this in **Where to go next**.

↗ [longbridge.github.io/gpui-component/gallery/](https://longbridge.github.io/gpui-component/gallery/)

---
## In our workshop

We will use exactly two things from gpui-component:

- `gpui_component::init(cx)` — registers the theme.
- `Tag` — the colored temperature chip.

Small dependency, a lot less typing.