Crate guise 

guise

A component library for gpui, Zed’s GPU-accelerated UI framework.

guise provides a themed palette, sizing tokens, and a growing set of ready-to-use components built on gpui’s RenderOnce builder pattern.

use guise::prelude::*;

Stack::new().gap(Size::Md).child(
    Button::new("save", "Save").variant(Variant::Filled),
)

Install a Theme once at startup, then read it from any component:

guise::theme::Theme::dark().init(cx);

Re-exports

pub use ai::format_cost;

pub use ai::AIChatView;

pub use ai::AIChatViewEvent;

pub use ai::AICitation;

pub use ai::AIComposer;

pub use ai::AIComposerEvent;

pub use ai::AICost;

pub use ai::AIMessage;

pub use ai::AIModel;

pub use ai::AIModelPicker;

pub use ai::AIModelPickerEvent;

pub use ai::AIPricing;

pub use ai::AIReasoning;

pub use ai::AIRole;

pub use ai::AISettings;

pub use ai::AISettingsEvent;

pub use ai::AISource;

pub use ai::AISources;

pub use ai::AIStreamingText;

pub use ai::AIThinking;

pub use ai::AITokenMeter;

pub use ai::AIToolCall;

pub use ai::AIToolStatus;

pub use ai::AITurn;

pub use ai::AITurnTool;

pub use ai::AIUsage;

pub use anim::AnimValue;

pub use anim::Animated;

pub use anim::Animator;

pub use anim::AnimatorEvent;

pub use anim::At;

pub use anim::Clip;

pub use anim::Curve;

pub use anim::Easing;

pub use anim::Frame;

pub use anim::IntoKeyframe;

pub use anim::Keyframe;

pub use anim::Loop;

pub use anim::Motion;

pub use anim::Motioned;

pub use anim::Presence;

pub use anim::PresenceEvent;

pub use anim::Prop;

pub use anim::Sequence;

pub use anim::Spring;

pub use anim::Stagger;

pub use anim::StaggerAxis;

pub use anim::StaggerFrom;

pub use anim::Track;

pub use dnd::apply_reorder;

pub use dnd::Draggable;

pub use dnd::DropTarget;

pub use dnd::SortableList;

pub use panegroup::PaneGroup;

pub use panegroup::PaneGroupEvent;

pub use chart::AreaChart;

pub use chart::BarChart;

pub use chart::LineChart;

pub use chart::PieChart;

pub use chart::ScatterChart;

pub use chart::Sparkline;

pub use data::Accordion;

pub use data::Avatar;

pub use data::AvatarGroup;

pub use data::Column;

pub use data::DataView;

pub use data::DataViewEvent;

pub use data::DataViewLayout;

pub use data::List;

pub use data::SelectionMode;

pub use data::SortDir;

pub use data::TabBar;

pub use data::TabBarEvent;

pub use data::Table;

pub use data::TableView;

pub use data::TableViewEvent;

pub use data::Tabs;

pub use data::Timeline;

pub use data::TreeNode;

pub use data::TreeView;

pub use data::TreeViewEvent;

pub use data::VirtualList;

pub use editor::Diagnostic;

pub use editor::DocumentHighlighter;

pub use editor::Editor;

pub use editor::EditorEvent;

pub use editor::EditorModel;

pub use editor::EditorStyle;

pub use editor::Highlighter;

pub use editor::Language;

pub use editor::Pos;

pub use editor::Severity;

pub use editor::TokenKind;

pub use feedback::Alert;

pub use feedback::Loader;

pub use feedback::LoaderVariant;

pub use feedback::Notification;

pub use feedback::Progress;

pub use feedback::RingProgress;

pub use feedback::ToastStack;

pub use gpuview::GpuFit;

pub use gpuview::GpuRect;

pub use gpuview::GpuScene;

pub use gpuview::GpuTexture;

pub use gpuview::GpuView;

pub use input::apply_key;

pub use input::days_in_month;

pub use input::is_leap_year;

pub use input::month_grid;

pub use input::Autocomplete;

pub use input::AutocompleteEvent;

pub use input::Calendar;

pub use input::Checkbox;

pub use input::CheckboxGroup;

pub use input::ColorInput;

pub use input::ColorInputEvent;

pub use input::Combobox;

pub use input::ComboboxEvent;

pub use input::Date;

pub use input::DatePicker;

pub use input::DatePickerEvent;

pub use input::Dropzone;

pub use input::Field;

pub use input::FileInput;

pub use input::FileInputEvent;

pub use input::KeyOutcome;

pub use input::NumberInput;

pub use input::NumberInputEvent;

pub use input::PasswordInput;

pub use input::PasswordInputEvent;

pub use input::PinInput;

pub use input::PinInputEvent;

pub use input::Radio;

pub use input::RadioGroup;

pub use input::RangeSlider;

pub use input::RangeSliderEvent;

pub use input::Rating;

pub use input::SegmentedControl;

pub use input::SegmentedControlEvent;

pub use input::Select;

pub use input::SelectEvent;

pub use input::Slider;

pub use input::SliderEvent;

pub use input::Switch;

pub use input::TagsInput;

pub use input::TagsInputEvent;

pub use input::TextArea;

pub use input::TextAreaEvent;

pub use input::TextAreaSubmit;

pub use input::TextEdit;

pub use input::TextInput;

pub use input::TextInputEvent;

pub use input::Time;

pub use input::TimePicker;

pub use input::TimePickerEvent;

pub use input::Transfer;

pub use input::TransferEvent;

pub use input::Weekday;

pub use input::MONTH_NAMES;

pub use layout::Align;

pub use layout::AppShell;

pub use layout::Breakpoint;

pub use layout::Center;

pub use layout::Container;

pub use layout::Group;

pub use layout::Justify;

pub use layout::Responsive;

pub use layout::SimpleGrid;

pub use layout::Space;

pub use layout::Stack;

pub use markdown::Markdown;

pub use markdown::MarkdownEditor;

pub use markdown::MarkdownEditorEvent;

pub use markdown::MarkdownStyle;

pub use nav::Breadcrumbs;

pub use nav::NavLink;

pub use nav::NavigationMenu;

pub use nav::NavigationMenuEvent;

pub use nav::Pagination;

pub use nav::PaginationEvent;

pub use nav::StatusBar;

pub use nav::Stepper;

pub use overlay::tooltip;

pub use overlay::ConfirmModal;

pub use overlay::ContextMenu;

pub use overlay::Drawer;

pub use overlay::HoverCard;

pub use overlay::LoadingOverlay;

pub use overlay::Menu;

pub use overlay::MenuBar;

pub use overlay::MenuColumn;

pub use overlay::Modal;

pub use overlay::ModalCloser;

pub use overlay::OverlayHost;

pub use overlay::Placement;

pub use overlay::Popover;

pub use overlay::Side;

pub use overlay::Spotlight;

pub use overlay::Tooltip;

pub use overlay::Tour;

pub use overlay::TourEvent;

pub use reactive::provide;

pub use reactive::use_context;

pub use reactive::use_effect;

pub use reactive::use_form;

pub use reactive::use_memo;

pub use reactive::use_state;

pub use reactive::validators;

pub use reactive::watch;

pub use reactive::Binding;

pub use reactive::Form;

pub use reactive::FormState;

pub use reactive::FormValues;

pub use reactive::Rule;

pub use reactive::Signal;

pub use reactive::Validator;

pub use style::surface;

pub use style::ColorValue;

pub use style::StyleExt;

pub use style::Surface;

pub use style::Variant;

pub use theme::css;

pub use theme::hsl;

pub use theme::hsla;

pub use theme::rgb;

pub use theme::rgba;

pub use theme::theme;

pub use theme::Color;

pub use theme::ColorName;

pub use theme::ColorScheme;

pub use theme::CssColorError;

pub use theme::Palette;

pub use theme::Scale;

pub use theme::Shades;

pub use theme::Size;

pub use theme::Theme;

pub use theme::ThemeJsonError;

pub use theme::PRESET_NAMES;

pub use update::InstallKind;

pub use update::Relaunch;

pub use update::Release;

pub use update::ReleaseAsset;

pub use update::UpdateCheck;

pub use update::UpdateConfig;

pub use update::UpdateNotice;

pub use update::UpdateNoticeEvent;

pub use update::UpdateOutcome;

pub use update::UpdatePrompt;

pub use update::UpdatePromptEvent;

pub use update::UpdateSource;

pub use update::UpdateStage;

pub use update::Updater;

Modules

ai

Components for putting a model in front of a person.

anim

Animation: easing curves, springs, keyframed motion, and the clocks that run them.

chart

Charts — minimal, axis-free data visuals painted through gpui’s canvas.

data

Data display: components that present structured content.

devtools

DevTools — Safari’s Web Inspector, for a gpui app.

dnd

Drag and drop: Draggable, DropTarget, and SortableList.

editor

Multiline text-editor building blocks.

feedback

Feedback: components that communicate state to the user.

flex

Flexbox layout primitives, for people who think in Row/Column/ Container/Expanded (à la Flutter).

gpuview

GpuView — a retained scene surface painted by gpui’s GPU renderer.

input

Form inputs.

layout

Layout primitives: vertical Stack, horizontal Group, Center, plus app-structure helpers (AppShell, Container, Space). These map token-based flex helpers onto gpui’s flex container.

markdown

Obsidian-style live-preview markdown editing.

nav

Navigation: components for moving around an app, plus a StatusBar shell.

overlay

Overlays: floating UI that paints above the page.

panegroup

PaneGroup — a recursive tree of tabbed panes (splits contain tabs), the Zed / VS Code editor-group workspace model as a reusable gpui component.

prelude

Common imports for building with guise.

reactive

A lightweight, React-flavored state layer over gpui.

settings

Settings UI: the shell, the groups, and the rows.

style

Shared visual variants: a (color, variant) pair resolves into a background / foreground / border triple that every interactive component (Button, Badge, ActionIcon, …) draws from. This is that resolver.

theme

The theme: palette + sizing tokens + color scheme, exposed as a gpui Global so any component can resolve themed values during render.

update

Self-update: check for a newer release, install it in place, and prompt for it — the whole feature, from the release feed to the window that offers it.

Macros

badge

A Badge: badge!(label). Chain setters after.

button

A Button: button!(id, label). Chain setters after.

card

A Card around the given children.

center

A Center wrapping the given children.

code

Inline Code, with optional format! arguments.

col

A Flutter-style vertical Column.

color

A CSS-style color literal, producing a gpui Hsla.

hstack

A themed horizontal Group (token-based spacing).

kbd

A Kbd key, with optional format! arguments.

modal

A Modal around the given children. Chain .title(..) and .on_close(..) after.

motion

A Motion as a block of declarations.

paper

A Paper surface around the given children.

row

A Flutter-style horizontal Row.

sequence

A Sequence of motions on one clock.

style

A CSS-like style block. Expands to an element transform applied with StyleExt::apply:

text

Text, with optional format! arguments.

title

Title, with optional format! arguments.

vstack

A themed vertical Stack (token-based spacing).

wrap

A wrapping row, Wrap.

zstack

A layered Stack (z-axis overlap).

Structs

About

The About card.

ActionIcon

A compact, square icon button.

Anchor

A text link.

Badge

A compact status pill.

Blockquote

A quote block.

Button

A clickable button.

Card

A content card — a Paper with sensible defaults.

Carousel

A slide deck. Create with cx.new(|cx| Carousel::new(cx).slide(..).slide(..)).

CarouselEvent

Emitted when the visible slide changes. Carries the slide index.

Chip

A selectable chip. Controlled: pass checked and a change handler via cx.listener, or two-way bind with Chip::bind.

CloseButton

A dismiss button.

Code

Inline code. (Uses the window font; gpui has no generic monospace fallback, so style a real mono family at the app level if needed.)

Collapse

Reveals gated content. With a known content height, the box height animates open and closed (a real collapse, clipped while moving); without one it fades in and unmounts instantly on close.

CopyButton

A small button that writes text to the system clipboard when clicked, then shows a “Copied” state for a moment. A gpui entity — create with cx.new(|_| CopyButton::new("…")).

Divider

A separator line.

Icon

A themed icon glyph. Inherits the parent’s text color unless color is set.

Image

An image element.

Indicator

A corner indicator over any child.

Kbd

A keyboard key.

Mark

A highlighter-pen span.

Panel

A titled surface with header/footer chrome. Reads like Card but framed: a header (chevron + icon + title/description on the left, actions on the right), the body, and an optional footer. The header gets a bottom divider whenever the body is visible.

Paper

A surface container.

ResizeHandles

Invisible edge and corner hit-zones that start a window resize.

ScrollArea

A scrollable region. ScrollArea::new("id").max_height(240.0), or ScrollArea::new("id").fill() to take the space the parent has left.

Skeleton

A pulsing placeholder block.

SplitPanel

A resizable two-pane layout. Create with cx.new(|cx| SplitPanel::new(cx).first(..).second(..)) and give the element a sized parent — the panel fills it.

Spoiler

A collapsible content clip.

Text

Themed body text.

ThemeIcon

A decorative colored icon chip.

Title

A heading. order 1..=6 selects the heading level.

Transition

Plays a one-shot entrance animation around its child.

WebView

A native web view. Create with cx.new(|cx| WebView::new(cx)).

WindowControls

Minimise / maximise / close, for a window the app decorates itself.

Enums

BuildKind

What kind of build this is, which decides how the dated line reads.

Glyph

Icon content for components with an icon slot: a Lucide icon or a short piece of text (an emoji, “+”, “</>”, …). Both render inline and inherit the surrounding text size and color.

IconName

A named Lucide icon, rendered from the icon font embedded in guise. Every icon in the set is available as a variant.

ObjectFit

How to fit the image into the bounds of the element.

Orientation

SplitDirection

Which way the panes are laid out. Horizontal places them side by side (a vertical divider, column-resize cursor); Vertical stacks them.

SplitPanelEvent

Emitted while the divider is dragged. Carries the new first-pane ratio in 0.0..=1.0.

TransitionKind

The kind of entrance motion Transition plays.

WebViewEvent

Emitted as the embedded page loads and changes.

Constants

LUCIDE_VERSION

The bundled Lucide version this table was generated from.

TRAFFIC_LIGHT_INSET

Clearance to reserve at the leading edge of a custom titlebar so the macOS traffic lights are not overlapped.