Crate gpui_cn

Expand description

shadcn-style components for GPUI, built on gpui-base.

gpui-cn depends on gpui-kit with the component layer off, so it adds GPUI and gpui-base and nothing else.

Initialize gpui-base first (through gpui_kit::init), then call init once before opening windows. gpui-cn adds itself to every window whose first level is gpui-base’s Root, which gpui_kit::open_window puts there:

use gpui_kit::*;

struct Hello;

impl Render for Hello {
    fn render(&mut self, _: &mut Window, _: &mut Context<Self>) -> impl IntoElement {
        div().p_4().child(
            gpui_cn::Button::new("save")
                .primary()
                .label("Save")
                .on_click(|_, window, cx| {
                    let _ = window.prompt(PromptLevel::Info, "Saved", None, &["OK"], cx);
                }),
        )
    }
}

fn main() {
    gpui_kit::application().run(|cx| {
        gpui_kit::init(cx);
        gpui_cn::init(cx);
        gpui_kit::open_window(WindowOptions::default(), cx, |_, cx| cx.new(|_| Hello))
            .expect("failed to open window");
    });
}

Re-exports§

pub use dock::DockSkin;
pub use theme::ActiveTheme;
pub use theme::MetricTokens;
pub use theme::ReduceMotion;
pub use theme::Theme;
pub use theme::ThemeConfig;
pub use theme::ThemeMode;
pub use theme::ThemeScope;
pub use theme::ThemeTokens;
pub use webview::BrowserEvent;
pub use webview::BrowserState;
pub use webview::WebFrame;
pub use gpui_kit;

Modules§

dock: Panes that the user rearranges by dragging, as in Ghostty’s splits.
fuzzy: The fuzzy matcher every search in gpui-cn uses: the folder and file pickers, the model picker, the selects, the searchable status lists, and the palettes.
prelude: Everything an application normally imports from gpui-cn.
remote: Pickers over a machine that is not this one.
shell: The user’s shell, how a terminal starts it, and the environment it gives the program, resolved as Ghostty does.
terminal: A terminal on libghostty-vt, the terminal emulation library from Ghostty, behind the ghostty feature.
theme: The theme: a small config per appearance, the tokens derived from it, and the preferences that shape motion and cursors.
webview: An embedded web page, on gpui-webview.

Structs§

Attachment: A file in a composer: what the strip shows for it.
AttachmentStrip: The row of tiles above a composer’s text: the attachments in order, wrapping onto further lines when they do not fit.
AttachmentTile: One tile of the attachment strip: an image thumbnail, or a bordered file tile with a tinted kind icon and the name. A tile that uploads draws a circular Progress at its top left and a percent counter at its top right; when the upload ends, the counter and the ring fade out as the dismiss button fades in.
Avatar: A shadcn-style avatar: a circle that shows an image, or the initials of a name, or an icon when there is no image.
AvatarGroup: A row of overlapping avatars, shadcn’s *:ring-2 -space-x-2, with a +N avatar for the ones past its limit.
Badge: A count, a dot, or an icon at the corner of another element, such as unread messages on an avatar. gpui-kit’s Badge.
Button: A shadcn-style button on gpui_base::Button.
Command: A command palette on a CommandState, as shadcn’s Command: the search field, a hairline, and the matching commands in a scroll region, drawn with a menu’s rows.
CommandDialog: A Command palette in a Dialog, as shadcn’s CommandDialog and the palettes opened with Cmd+K.
CommandGroup: Commands under a heading. A group with no command left after the query hides with its heading.
CommandItem: One command: a key the palette reports it by, a label, and what it does.
CommandRow: The state of a row a custom renderer draws; see CommandItem::render.
CommandState: The commands of a Command palette, its query, and its highlight.
Composer: A prompt box: a card with the attachments above the text, and a row of controls under it. The row holds an add button, a permission menu, a space, a model picker, a microphone button, and a send button. An optional status tab sits behind the top of the card.
ComposerAssets: An asset source for an application that uses the composer family: the default gpui_kit::assets::Assets plus the Lucide icons the composer’s defaults draw, which the default set does not hold (the microphone, the shield, the file kinds, and the git branch).
ComposerState: The text, the attachments, the permission mode, and the model of a Composer.
ComposerStatusTab: The strip behind the top of a composer’s card: any number of items from the left, such as a folder, a device, and a branch, in the full text color (each a StatusSelect that opens a menu), and optionally a ContextMeter or any element at the far right. With no trailing element there is nothing at the right.
ContextMenu: A menu of commands that a right click on its content opens at the pointer, as shadcn’s ContextMenu.
ContextMeter: The context a conversation has used, as a ring and a percent: a circular Progress beside the number, in the muted text color.
Dialog: A modal window over the page, as shadcn’s Dialog: a dimmed backdrop and a centered surface with a title, a description, a body, and a footer.
DropdownMenu: A menu of commands that opens under a trigger, as shadcn’s DropdownMenu.
EffortMenu: The effort of the chosen model as a small dropdown: the level’s name, such as “Medium”, and a chevron. Its menu lists the state’s effort levels, EFFORT_LABELS unless with_effort_levels set others, with a check on the current one, and choosing a level sets it on the ModelPickerState, which reports ModelPickerEvent::EffortChanged.
Field: A shadcn-style text field on gpui_base’s editing engine, in the kind M names: Input for one line, Textarea for many.
FileEntry: A file or a folder in a listing.
FileFilter: Which files a picker shows. Folders always show, so the user can go through them to the files.
FilePage: One page of a listing: entries, and where the next page starts.
FilePicker: A dialog to choose files on a FilePickerState: an Up button and the path field, a row with the filter and the “Show hidden” switch, a bordered list of the entries, and Cancel and “Open file” in the footer.
FilePickerState: The path text, the listings, the filtered rows, and the selection of a FilePicker.
FolderEntry: A folder in a listing.
FolderPage: One page of a listing: folders, and where the next page starts.
FolderPicker: A dialog to choose a folder on a FolderPickerState, as in the reference app: an Up button and the path field, a row that chooses the folder shown, a bordered list of its folders, and Cancel and “Use folder” in the footer.
FolderPickerState: The path text, the listings, and the filtered rows of a FolderPicker.
Glide: Lays a pane out at its slot and paints it gliding there from where it was, above the panes at rest and clipped to its parent.
GlideState: Where each Glide of one layout is, by its key. The view that owns the layout keeps one and hands it to every glide.
Icon: An SVG icon sized on the rem scale and painted with the text color.
Label: A shadcn-style form label: shadcn’s text-sm font-medium leading-none moved to the theme’s 13px control text, in the foreground color, with no margin of its own.
LocalFiles: The local file system, in one page. It reads on a background task, counts a symlink to a folder as a folder, and lists in the order of FileEntry sorting: folders first, then files.
LocalFolders: The local file system, in one page. It reads on a background task, counts a symlink to a folder as a folder, and puts the visible folders first and the hidden ones after, each in alphabetical order without regard to case.
MemoryFiles: A file system held in memory, for fixtures, demos, and tests. It lists a directory the application named, in the order of LocalFiles, fails with ListError::NotFound for any other directory, and makes folders: a new one shows in its parent’s next listing and is an empty directory itself. Clones share the directories.
MemoryFolders: Folders held in memory, for fixtures, demos, and tests. It lists a directory the application named, visible folders first and hidden ones after, fails with ListError::NotFound for any other, and makes folders: a new one shows in its parent’s next listing and is an empty directory itself. Clones share the folders.
MenuBar: A row of menu titles in the window, as a desktop application’s menu bar, for a platform or a layout without the native one.
MenuBarMenu: One menu of a MenuBar: its title and its rows.
MenuBarState: The menus of a MenuBar and the one open among them.
MenuItem: A command in a menu.
MenuRowState: The state of a row a custom renderer draws; see MenuItem::render.
MenuState: The open menu of a DropdownMenu, a ContextMenu, or a text field.
MenuSubmenu: A row that opens a further menu beside it.
ModelEntry: A model a ModelPicker offers.
ModelPicker: A picker for a model: a trigger pill that shows the chosen one, and a panel with a rail, a search field, and the list of models.
ModelPickerState: The catalog, the chosen model and its effort, the favorites, the view the rail shows, the search, and the open panel of a ModelPicker.
ModelProvider: A maker of models, one mark in the picker’s rail and the models it owns.
NavButtons: Back and forward arrows for a NavStackState.
NavPage: One mounted view of a NavStack, handed to the item renderer.
NavStack: The pages of a NavStackState, one visible at a time.
NavStackState: A stack of views, one visible at a time, with the pages popped off it kept for forward.
PageToken: Where the next page of a listing starts. The source makes it and reads it back, so it can hold anything: an offset, a cursor, a continuation token. The picker only stores it and hands it back.
PathStyle: The rules of a source’s paths: which characters separate the parts, how a root looks, whether names differ by case, and which names are hidden.
PermissionMenu: A picker for a PermissionMode: a quiet trigger that shows the selected mode, and a menu of every mode with its description, the selected one checked, under a header with a “Learn more” row.
PermissionMode: How much an agent may do without asking, as one entry of a PermissionMenu: an id, a label, a line of description, and an icon.
PermissionState: The modes, the selected one, and the open menu of a PermissionMenu.
Popover: A panel of any content that opens under a trigger, as shadcn’s Popover.
Progress: A shadcn-style progress bar, or a circular progress indicator, on gpui_base::Progress.
Radio: A shadcn-style radio on gpui_base::Radio: a RadioMark with an optional label beside it.
RadioGroup: The container of a set of Radio values: the radio-group role with its orientation (base’s RadioGroup is only that, and an element that tests can find needs the id on the element itself), laid out as a column, or as a row for horizontal.
RadioMark: The round indicator of a radio: a thin grey ring, or while checked a disc of the control accent with a white dot, as macOS paints it. The accent is the one a switch that is on uses. It paints only. A row that is already a button, such as a model in a list, draws it to show which one is on.
ScrollArea: A vertical scroll region with the overscroll bounce of a UIScrollView and an overlay scrollbar.
Select: A shadcn-style select on gpui_base::Select: a trigger that shows the selection and opens a menu of items.
SelectItem: One choice in a Select menu.
SelectRow: The state of a row a custom item renderer draws; see Select::render_item.
SelectState: The rows, the selection, and the open menu of a Select.
Sidebar: The sidebar surface: a header that stays put, content that scrolls, and a footer that stays put.
SidebarGroup: A run of rows under an optional label, with an optional action beside the label, and optionally collapsible.
SidebarLayout: A Sidebar beside the main content.
SidebarMenuButton: A row in the sidebar: an icon, a label, a badge, an action that shows on hover, a selected state, and optionally nested rows it folds.
SidebarMenuSkeleton: A placeholder row while rows load: a Skeleton where the icon goes and one of a stable random width where the label goes, both pulsing in the sidebar’s hover fill.
SidebarMenuSub: Rows nested under a row: indented, with a hairline down their left. Hidden in a sidebar collapsed to icons.
SidebarSeparator: A hairline between sections of the sidebar.
SidebarState: Whether the sidebar is open, how wide it is, and how it collapses.
SidebarTrigger: The button that opens and closes a sidebar.
Skeleton: A shadcn-style skeleton: a rounded block in the accent fill that pulses while content loads, so a list or a card keeps its shape before its data arrives.
Slider: A shadcn-style slider on gpui_base::Slider: a rounded track, a filled range from the start to the thumb, and a round thumb.
SliderState: State of the Slider.
SourcePath: A path in a source’s own style: what a picker lists, what it asks a source for, and what it reports as chosen.
Spinner: A shadcn-style spinner: an arc turning in place, for work whose length is not known. Use a circular Progress for a known percentage; this is that ring with no value.
StatusOption: One choice of a StatusSelect: an id from the domain, a label, and optionally a leading icon, a line of description in a menu, and a short muted word at the right of a search list row, such as “current” or “remote”.
StatusSelect: An item of a ComposerStatusTab that opens a Select: a small ghost trigger with an icon, the chosen option’s label, and a chevron, over the select’s menu with a check on the chosen option. A list of SEARCH_MIN_OPTIONS options or more has the select’s search field, which ranks what is typed fuzzily.
StatusSelectState: The options of a status item and the chosen one.
Switch: A shadcn-style switch on gpui_base::Switch: a pill track with a round thumb that slides to the right when checked.
Tab: One tab in the strip. The id is the application’s key for the tab and must be unique in the strip; it never comes from a list index.
Tabs: A browser-style tab strip on gpui_base::Tabs and gpui_base::Tab.
TabsState: The tabs, which one is selected, and the scroll position of the strip.
Tag: A small pill with a label and an optional icon, for a status or a category. gpui-kit’s Tag, drawn as shadcn’s badge.
ThemeModePicker: A choice of ThemeMode on gpui_base::RadioGroup: three cards, each a small picture of the appearance it stands for, with the chosen one ringed and its label in the foreground color.
TitleBar: A title bar the application draws itself.
Tooltip: A short text tooltip, the content a trigger builds for the overlay.
TooltipHost: The per-window registry of tooltip overlays.
TooltipTrigger: The trigger side of a managed tooltip, for a component that owns its own hover listener (GPUI allows one per element).

Enums§

AttachmentKind: What kind of file an attachment is, which decides its icon.
AttachmentStatus: Where an attachment is in its life.
AvatarSize: The diameter of an Avatar.
ButtonSize: The size tier of a Button. Height, text size, icon size, and padding change together. Heights are given at the default 16px rem and scale with the theme’s UI font size.
ButtonVariant: The visual treatment of a Button, by meaning.
CommandEntry: One entry of a palette.
CommandEvent: What a CommandState reports.
ComposerEvent: What a ComposerState reports.
CreateFolderError: Why a source could not make a folder. The picker shows the message under the row that names the folder, and keeps the row editable.
FileKind: What an entry of a listing is.
FilePickerEvent: What a FilePickerState reports.
FolderPickerEvent: What a FolderPickerState reports.
IconSource: Where an icon’s SVG comes from.
InputEvent
ListError: Why a source could not list a directory. The picker shows the message and, for a failure that waiting can fix, an action: Retry for a lost connection or an error, and “Sign in” for a source that needs the user to log in, which calls the application’s own handler.
MenuAnchor: What a menu opens from.
MenuEntry: One row of a menu.
MenuEvent: What a MenuState reports.
ModelPickerEvent: What a ModelPickerState reports.
ModelView: What the list of a ModelPicker shows: the favorites, or one provider’s models. A query overrides both and searches every provider.
MoreState: Where the request for the next page of a listing stands.
NavMotion: Whether one change runs the NavStack’s transition, as UIKit’s animated: and Qt’s StackView.Immediate decide per call.
NavOperation: What a running transition is doing, in Qt’s terms.
NavStackEvent: Emitted by NavStackState after the stack changed.
PermissionEvent: What a PermissionState reports.
PermissionTone: How a permission mode reads: an ordinary choice, or a risky one that shows in the warning color.
SelectEntry: A row of a select menu.
SelectEvent: What a SelectState reports.
SidebarCollapsible: What closing the sidebar does.
SidebarEvent: Emitted by SidebarState after it changed.
SidebarMenuSize: The size tier of a SidebarMenuButton.
SidebarSide: Which edge of the content the sidebar is on.
SliderEvent: Events emitted by the SliderState.
SliderValue: The value of the slider, can be a single value or a range of values.
StatusSelectEvent: What a StatusSelectState reports.
TabsEvent: Emitted by TabsState after it changed.
TagVariant: The color of a Tag, after gpui-kit’s tag variants.

Constants§

EFFORT_LABELS: The names of the six default effort levels, from the lowest to the highest.
SEARCH_MIN_OPTIONS: How many options make a StatusSelect searchable when it is not told either way: three. A list of two, such as a device, is a plain menu; a list of three or more, such as projects and branches, has a search field and ranks what is typed.

Traits§

FileSource: Where a FilePicker lists entries from: the local disk, an SSH session, a bucket, an API. The picker never waits for a source. It calls list and awaits the task, and it drops the task to cancel it.
FolderSource: Where a FolderPicker lists folders from: the local disk, an SSH session, a bucket, an API. The picker never waits for a source. It calls list and awaits the task, and it drops the task to cancel it.
NavStackExt: Navigation that also frees pages.
SelectValue: The value of a SelectItem: the item’s identity in the menu.
TooltipExt: Gives a stateful element a managed tooltip.

Functions§

init: Initializes gpui-cn. Call it once, after gpui_base::init (normally through gpui_kit::init) and before opening windows.

Type Aliases§

CommandSearchHandler: A search the application runs itself: given the query, it returns the commands to show, when it has them. See CommandState::with_search_handler.
FileListing: What a FilePickerState knows about one directory.
FileLoaded: The files of a directory loaded so far, and whether more follow.
Input: A single-line text field on an InputState.
InputState: State for a single-line text input.
Listing: What a FolderPickerState knows about one directory.
Loaded: The folders of a directory loaded so far, and whether more follow.
SearchHandler: A search the application runs itself: given the query, it returns the rows to show, when it has them. See SelectState::with_search_handler.
Textarea: A multi-line text field on a TextareaState.
TextareaState: State for editing ordinary multi-line text.

Crate gpui_cn

Crate gpui_cn Copy item path

Re-exports§

Modules§

Structs§

Enums§

Constants§

Traits§

Functions§

Type Aliases§

Crate gpui_cn