# bezel

> Design tokens, motion, and materials for native Rust apps, built on gpui.

Every page below is served as Markdown — append `.md` to any docs URL.

## Start here

- [README](https://bezel.pages.dev/readme.md): the dependency line, the pinned gpui fork, and the bootstrap no snippet can skip
- [Complete documentation](https://bezel.pages.dev/llms-full.txt): the README and all 56 pages in one file
- [Homepage](https://bezel.pages.dev/): what the library is, in its own terms

## Foundations

- [Color](https://bezel.pages.dev/docs/color.md): The token set — two designed palettes read from a gpui global at paint time, with light designed rather than inverted.
- [Typography](https://bezel.pages.dev/docs/typography.md): Geist and Geist Mono bundled behind a feature gate, registered with the gpui text system in one call, named on the theme as two families — and how to put your own type in their place.
- [Layout](https://bezel.pages.dev/docs/layout.md): Spacing steps, corner radii and chrome heights as plain numbers on Theme — no layout constant ever depends on which color is painted.
- [Materials](https://bezel.pages.dev/docs/material.md): The glass float — a backdrop-blurred card painted in one scene layer, with a nested-layer escape hatch for overlays inside it.
- [Curves](https://bezel.pages.dev/docs/motion-curves.md): Six CSS cubic-bezier timing functions evaluated exactly, each usable as a gpui easing closure.
- [Catalog](https://bezel.pages.dev/docs/motion-catalog.md): Every named motion spec — duration, delay and curve — plus the hover-fade store components blend their washes through.
- [Icons](https://bezel.pages.dev/docs/icons.md): 79 SVGs embedded in the crate and served to gpui through an AssetSource, each one a &'static str path.

## Components

- [Buttons](https://bezel.pages.dev/docs/buttons.md): Buttons for gpui — default, prominent and destructive, each returning a plain gpui::Div you attach your own click handler to.
- [Text field](https://bezel.pages.dev/docs/text-field.md): A single-line gpui text field with IME, selection, clipboard and undo — an entity you hold, with its key bindings scoped to the field.
- [Textarea](https://bezel.pages.dev/docs/textarea.md): The same text field in a taller box — fixed rows or growing between a min and a max, with enter and pasted newlines behaving accordingly.
- [Select](https://bezel.pages.dev/docs/select.md): The closed face of a select — a trigger shaped like a text field, opened onto a menu the caller assembles.
- [Combobox](https://bezel.pages.dev/docs/combobox.md): A select you can type into — the closed face of a select over an anchored menu whose rows narrow as you search.
- [Checkbox & radio](https://bezel.pages.dev/docs/checkbox-radio.md): Display-only checkbox and radio marks — the app owns which are on, and one call puts them in the tab order.
- [Toggle](https://bezel.pages.dev/docs/toggle.md): An 18×32 switch whose knob slides and whose track fills with the text tone when on — state stays with the row that owns it.
- [Toggle group](https://bezel.pages.dev/docs/toggle-group.md): A segmented control — one pill of mutually exclusive choices, where the selected segment carries a raised plate.
- [Slider](https://bezel.pages.dev/docs/slider.md): A filled track and a knob at a fraction — the paint only; the caller owns the value, the drag and what a key press is worth.
- [Date picker](https://bezel.pages.dev/docs/date-picker.md): A select's closed face over an anchored month grid, on a civil calendar of bezel's own — sixty pure lines, no chrono in your graph.
- [Menu](https://bezel.pages.dev/docs/menu.md): The floating card, its rows, headings and dividers — plus the anchored layers that hang one off a trigger.
- [Context menu](https://bezel.pages.dev/docs/context-menu.md): The same menu card floated at an explicit window point — right-click position in, occluding layer out.
- [Command palette](https://bezel.pages.dev/docs/palette.md): A filtered command list over a text field, reporting selections as events so it never learns what your commands are.
- [Menubar](https://bezel.pages.dev/docs/menubar.md): The in-window bar of titles that drop menus, where one menu being open changes what the others do.
- [Dialog](https://bezel.pages.dev/docs/dialog.md): A centred card over a dim scrim, with the dialog-in entrance and the scrim press handed in as a parameter.
- [Sheet](https://bezel.pages.dev/docs/sheet.md): The dialog card pinned to a window edge — full height, same scrim, sliding in and back out on the popup's exit phase.
- [Tooltip](https://bezel.pages.dev/docs/tooltip.md): The small hover label, built for gpui's own .tooltip builder — text, optionally with the shortcut beside it.
- [Hover card](https://bezel.pages.dev/docs/hover-card.md): A preview the pointer can travel into — same mounting as a tooltip, one word different.
- [Group box](https://bezel.pages.dev/docs/group-box.md): The section card and the rows inside it — a bordered container that thins to a translucent tint over glass.
- [Tabs](https://bezel.pages.dev/docs/tabs.md): A hairline-underlined strip whose active tab is marked by an underline that overlaps the hairline.
- [Collapsible](https://bezel.pages.dev/docs/collapsible.md): A disclosure header — chevron plus title — with the body rendered by the caller, and a flag that can follow something until you take it over.
- [Resizable split](https://bezel.pages.dev/docs/split.md): A hairline divider in a grab strip — the caller owns the fraction and reads the pointer through axis_fraction.
- [Control bar](https://bezel.pages.dev/docs/control-bar.md): The floating glass bar — a leading cluster, an optional centre and a trailing cluster, with the centre centred on the bar rather than on what is left.
- [Scroll area](https://bezel.pages.dev/docs/scroll-area.md): A styled bar over gpui's own scroll handle — the caller keeps the scrolling container, the bar just reports on it.
- [Follow scroll](https://bezel.pages.dev/docs/follow.md): Stay pinned to the bottom while the reader leaves it there, and get out of the way the moment they scroll up.
- [Table](https://bezel.pages.dev/docs/table.md): Columns declared once and handed to both the header and every row, so the two halves cannot drift apart.
- [Tree view](https://bezel.pages.dev/docs/tree.md): Nested rows with disclosure, indent guides and arrow keys — driven by a depth-annotated flat list, not by a tree the library walks.
- [Virtualized list](https://bezel.pages.dev/docs/virtual-list.md): A thin binding over gpui's uniform_list that pins the row height and hands the scrollbar a real handle.
- [Badge](https://bezel.pages.dev/docs/badge.md): A small right-anchored pill for a count or a state, in a quiet variant and an active one.
- [Tag](https://bezel.pages.dev/docs/tag.md): A removable chip — a token in a filter bar or a recipient field, with the ✕ wired by the caller.
- [Avatar](https://bezel.pages.dev/docs/avatar.md): A circular initials tile — the fallback every avatar needs, and often the whole thing on a monochrome surface.
- [Breadcrumb](https://bezel.pages.dev/docs/breadcrumb.md): A trail of crumbs and chevrons, assembled by the caller — the last one is current and stops looking clickable.
- [Pagination](https://bezel.pages.dev/docs/pagination.md): For data that arrives in pages, not for lists that are long — one function turns (current, total) into the row you see.
- [Empty state](https://bezel.pages.dev/docs/empty-state.md): The centred "nothing here yet" panel — icon, headline, one line of hint.
- [Skeleton](https://bezel.pages.dev/docs/skeleton.md): Pulsing placeholder rows for a list that is still loading, staggered off the shared pulse clock.
- [Progress](https://bezel.pages.dev/docs/progress.md): A determinate bar — a clamped fraction over a track that keeps its full width.
- [Status dot](https://bezel.pages.dev/docs/status-dot.md): The small state bead on a row — the tone comes from the caller, because the meaning does.
- [Alert strips](https://bezel.pages.dev/docs/alerts.md): Two inline notices — red for what failed, amber for what wants attention — each a leading icon and a line of copy.
- [Step row](https://bezel.pages.dev/docs/step-row.md): One operation as a row — icon, what it was, how it went — with an optional disclosure onto its verbatim output.
- [Loaders](https://bezel.pages.dev/docs/loaders.md): The orb cluster and the older cell grids — four shapes over one period, with every position pure arithmetic.

## Patterns

- [Activity](https://bezel.pages.dev/docs/agent-activity.md): A model working in public — the reasoning box pinned to its newest line, opening itself while the run streams and yielding the moment you press the header.
- [Tool calls](https://bezel.pages.dev/docs/agent-tools.md): A run of tool calls folded by verb — where the component turned out to be one std call plus a container that already existed.
- [Composer](https://bezel.pages.dev/docs/agent-composer.md): A growing field on a frosted card, a send button that knows when there is nothing to send, and a `#` picker anchored at the caret.
- [Transcript](https://bezel.pages.dev/docs/agent-transcript.md): A conversation as a scrollback — everything built for the agent port appearing at once, and three reducers that are all std.
- [Diff](https://bezel.pages.dev/docs/agent-diff.md): A file review — and the pattern whose finding is that it produced no library code at all.
- [Blob avatars](https://bezel.pages.dev/docs/agent-avatar.md): Deterministic identity from a name — the same seed renders the same face, anywhere in the app, at any size.
- [Document](https://bezel.pages.dev/docs/document.md): A reader with an outline and a source view — the screen the `markdown` crate exists for, and the round trip you can see.
- [Editor](https://bezel.pages.dev/docs/editor.md): A Notion-style block editor over the markdown document model — one entity, a scroll handle and an observe, and the markdown a save would write on every keystroke.
- [Syntax](https://bezel.pages.dev/docs/syntax.md): A fence tag and a source string in, `(byte range, kind)` spans out — and the one function pointer that lets an app colour a language bezel has never heard of.