Crate guise

Expand description

§guise

A Mantine-inspired component library for gpui.

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 panegroup::PaneGroup;
pub use panegroup::PaneGroupEvent;
pub use chart::BarChart;
pub use chart::LineChart;
pub use chart::PieChart;
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 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::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 input::apply_key;
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::Field;
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::TextEdit;
pub use input::TextInput;
pub use input::TextInputEvent;
pub use layout::Align;
pub use layout::AppShell;
pub use layout::Center;
pub use layout::Container;
pub use layout::Group;
pub use layout::Justify;
pub use layout::SimpleGrid;
pub use layout::Space;
pub use layout::Stack;
pub use nav::Breadcrumbs;
pub use nav::NavLink;
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::Placement;
pub use overlay::Popover;
pub use overlay::Side;
pub use overlay::Spotlight;
pub use overlay::Tooltip;
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::watch;
pub use reactive::Binding;
pub use reactive::FormState;
pub use reactive::Signal;
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;

Modules§

chart: Charts — minimal, axis-free data visuals painted through gpui’s canvas.
data: Data display: components that present structured content.
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).
input: Form inputs.
layout: Layout primitives: vertical Stack, horizontal Group, Center, plus app-structure helpers (AppShell, Container, Space). These map Mantine’s flex helpers onto gpui’s flex container.
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.
style: Shared visual variants. Mantine resolves a (color, variant) pair 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.

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.
paper: A Paper surface around the given children.
row: A Flutter-style horizontal Row.
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§

ActionIcon: A compact, square icon button. The Mantine ActionIcon.
Anchor: A text link. The Mantine Anchor.
Badge: A compact status pill. The Mantine Badge.
Blockquote: A quote block. The Mantine Blockquote.
Button: A clickable button. The Mantine Button.
Card: A content card. The Mantine Card — a Paper with sensible defaults.
Chip: A selectable chip. The Mantine Chip. Controlled: pass checked and a change handler via cx.listener, or two-way bind with Chip::bind.
CloseButton: A dismiss button. The Mantine CloseButton.
Code: Inline code. The Mantine 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 its child with a fade when open, renders nothing when closed.
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. The Mantine Divider.
Icon: A themed icon glyph. Inherits the parent’s text color unless color is set.
Image: An image element. The Mantine Image.
Indicator: A corner indicator over any child. The Mantine Indicator.
Kbd: A keyboard key. The Mantine Kbd.
Mark: A highlighter-pen span. The Mantine Mark.
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. The Mantine Paper.
ScrollArea: A scrollable region. ScrollArea::new("id").max_height(240.0).
Skeleton: A pulsing placeholder block. The Mantine Skeleton.
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. The Mantine Spoiler.
Text: Themed body text. The Mantine Text.
ThemeIcon: A decorative colored icon chip. The Mantine ThemeIcon.
Title: A heading. The Mantine Title; 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)).

Enums§

IconName: A named icon. The glyph is resolved by IconName::glyph.
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.

Crate guise

Crate guise Copy item path

§guise

Re-exports§

Modules§

Macros§

Structs§

Enums§

Crate guise