### Install the component Source: https://ui.gsxhq.dev/components/native-select Command to add the native-select component to the project. ```bash gsxui add native-select ``` -------------------------------- ### Install gsx and gsxui CLIs Source: https://ui.gsxhq.dev/docs/getting-started Install the required command-line tools using Go. ```bash go install github.com/gsxhq/gsx/cmd/gsx@latest go install github.com/gsxhq/gsxui/cmd/gsxui@latest ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/tooltip Command to add the tooltip component to the project. ```bash gsxui add tooltip ``` -------------------------------- ### Install component Source: https://ui.gsxhq.dev/components/input Command to add the input component to the project. ```bash gsxui add input ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/dialog Command to add the dialog component to the project. ```bash gsxui add dialog ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/card Command to add the card component to your project. ```bash gsxui add card ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/button-group Command to add the button-group component to the project. ```bash gsxui add button-group ``` -------------------------------- ### Install Command Component Source: https://ui.gsxhq.dev/components/command Command to add the component to the project. ```bash gsxui add command ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/field Command to add the field component to your project. ```bash gsxui add field ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/avatar Command to add the avatar component to the project. ```bash gsxui add avatar ``` -------------------------------- ### Install Textarea component Source: https://ui.gsxhq.dev/components/textarea Command to add the Textarea component to the project. ```bash gsxui add textarea ``` -------------------------------- ### Installation Command Source: https://ui.gsxhq.dev/components/collapsible Command to add the collapsible component to the project. ```bash gsxui add collapsible ``` -------------------------------- ### Install the Label component Source: https://ui.gsxhq.dev/components/label Use the CLI to add the Label component to your project. ```bash gsxui add label ``` -------------------------------- ### Install Switch component Source: https://ui.gsxhq.dev/components/switch Command to add the Switch component to the project. ```bash gsxui add switch ``` -------------------------------- ### Install OTP Component Source: https://ui.gsxhq.dev/components/input-otp Command to add the input-otp component to the project. ```bash gsxui add input-otp ``` -------------------------------- ### Install Toast Component Source: https://ui.gsxhq.dev/components/toast Command to add the toast component to the project. ```bash gsxui add toast ``` -------------------------------- ### Install Table Component Source: https://ui.gsxhq.dev/components/table Command to add the table component to the project. ```bash gsxui add table ``` -------------------------------- ### Install the Alert-dialog component Source: https://ui.gsxhq.dev/components/alert-dialog Command to add the alert-dialog component to the project. ```bash gsxui add alert-dialog ``` -------------------------------- ### Install pagination component Source: https://ui.gsxhq.dev/components/pagination Command to add the pagination component to the project. ```bash gsxui add pagination ``` -------------------------------- ### Install Menubar Component Source: https://ui.gsxhq.dev/components/menubar Command to add the menubar component to your project. ```bash gsxui add menubar ``` -------------------------------- ### Install Resizable Component Source: https://ui.gsxhq.dev/components/resizable Command to add the resizable component to the project. ```bash gsxui add resizable ``` -------------------------------- ### Install the empty component Source: https://ui.gsxhq.dev/components/empty Command to add the empty component to the project. ```bash gsxui add empty ``` -------------------------------- ### Install Chart Component Source: https://ui.gsxhq.dev/components/chart Command to add the chart component to the project. ```bash gsxui add chart ``` -------------------------------- ### Install drawer component Source: https://ui.gsxhq.dev/components/drawer Command to add the drawer component to the project. ```bash gsxui add drawer ``` -------------------------------- ### Install dropdown menu component Source: https://ui.gsxhq.dev/components/dropdown-menu Command to add the dropdown menu component to the project. ```bash gsxui add dropdown-menu ``` -------------------------------- ### Install icon package Source: https://ui.gsxhq.dev/components/icon Command to add the icon package to the project. ```bash gsxui add icon ``` -------------------------------- ### Install Kbd Component Source: https://ui.gsxhq.dev/components/kbd Command to add the Kbd component to the project. ```bash gsxui add kbd ``` -------------------------------- ### Install Progress Component Source: https://ui.gsxhq.dev/components/progress Command to add the progress component to your project. ```bash gsxui add progress ``` -------------------------------- ### Install Hover-card Component Source: https://ui.gsxhq.dev/components/hover-card Command to add the hover-card component to the project. ```bash gsxui add hover-card ``` -------------------------------- ### Install Aspect Ratio Component Source: https://ui.gsxhq.dev/components/aspect-ratio Command to add the aspect-ratio component to your project. ```bash gsxui add aspect-ratio ``` -------------------------------- ### Install Navigation Menu Component Source: https://ui.gsxhq.dev/components/navigation-menu Command to add the navigation menu component to the project. ```bash gsxui add navigation-menu ``` -------------------------------- ### Start development server Source: https://ui.gsxhq.dev/docs/getting-started Run the development loop to watch for changes and reload the browser. ```bash go tool gsx dev ``` -------------------------------- ### Initialize a GSX project Source: https://ui.gsxhq.dev/docs/getting-started Create a new GSX application and initialize gsxui within it. ```bash gsx init app --yes cd app gsxui init ``` ```text gsxui initialized. css: web/gsxui/index.css js: web/gsxui/index.js vite: Tailwind CSS configured next: gsxui add button ``` -------------------------------- ### Install Toggle-group Source: https://ui.gsxhq.dev/components/toggle-group Command to add the toggle-group component to your project. ```bash gsxui add toggle-group ``` -------------------------------- ### Implement a full-featured Menubar Source: https://ui.gsxhq.dev/components/menubar A comprehensive example demonstrating the use of Menubar, MenubarMenu, submenus, checkbox items, and radio groups. ```go package menubar import ( "github.com/gsxhq/gsxui/ui" ) // Full mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/ // examples/menubar-demo.tsx) end to end: a File menu with a disabled item // and a submenu, an Edit menu with checkbox items, a View menu with a // radio group, and a Profiles-shaped menu — exercising every shared item // type Task 1/2 already shipped (Item, CheckboxItem, RadioGroup/RadioItem, // Sub/SubTrigger/SubContent) plus this task's own bar-level roving tabindex // and open-follows-hover. Every `inset` prop shadcn's demo passes maps to // the CSS-only data-inset attr axis (see docs/jsx-parity.md's // ## dropdown-menu ledger). component Full() { File File actions New Tab ⌘T New Window ⌘N New Incognito Window Share Email Link Messages Notes Print... ⌘P Edit Undo ⌘Z Redo ⇧⌘Z Find Search the web Find... Find Next Find Previous Cut Copy Paste View Always Show Bookmarks Bar Always Show Full URLs Reload ⌘R Force Reload ⇧⌘R Profiles Andy Benoit Luis Edit... Add Profile... } ``` -------------------------------- ### Basic Context Menu Implementation Source: https://ui.gsxhq.dev/components/context-menu A simple context menu with standard items, shortcuts, a separator, and a destructive action. ```Go // Package contextmenu holds the site's example gsx components for // ui/context-menu. package contextmenu import ( "github.com/gsxhq/gsxui/ui" ) // Basic mirrors shadcn's own context-menu-demo.tsx (registry/new-york-v4/ // examples/context-menu-demo.tsx): a dashed-border right-click zone, a few // browser-chrome-shaped items (Back/Forward/Reload) each carrying a // ContextMenuShortcut, a separator, and a destructive-variant item. The // Sub/checkbox/radio-group parts of the real demo are dropped along with // those components (see docs/jsx-parity.md's ## context-menu GAP entry). component Basic() { Right click here Back ⌘[ Forward ⌘] Reload ⌘R Delete } ``` -------------------------------- ### Implement Basic Command Component Source: https://ui.gsxhq.dev/components/command Creates an inline command palette with suggestions, separators, and keyboard shortcuts. Requires the gsxui/ui and gsxui/ui/icon packages. ```go // Package command holds the site's example gsx components for ui/command. package command import ( "github.com/gsxhq/gsxui/ui" "github.com/gsxhq/gsxui/ui/icon" ) // Basic mirrors shadcn's own command demo (registry/new-york-v4/examples/ // command-demo.tsx): an inline (non-dialog) palette with a suggestions // group, a separator, and a settings group with shortcuts. Type to see // score-ranked filtering; ArrowUp/ArrowDown move the selection while focus // stays in the input; Enter or click activates (these demo items emit // gsxui:select only — they carry no data-href). component Basic() {
No results found. Calendar Search Emoji Calculator Profile ⌘P Billing ⌘B Settings ⌘S Open settings
} ``` -------------------------------- ### Implement a Basic Menubar Source: https://ui.gsxhq.dev/components/menubar Creates a menubar with File and Edit menus, including keyboard shortcuts and separators. This implementation supports hover-based menu switching. ```go // Package menubar holds the site's example gsx components for ui/menubar. package menubar import ( "github.com/gsxhq/gsxui/ui" ) // Basic mirrors shadcn's own menubar-demo.tsx (registry/new-york-v4/ // examples/menubar-demo.tsx) shape, trimmed to two menus: File (plain items // with shortcuts, a separator) and Edit (plain items). Once one of the two // triggers is open, hovering the other switches menus with no click — the // open-follows-hover behavior this task's own ui/menubar.js adds. component Basic() { File New Tab ⌘T New Window ⌘N Print... ⌘P Edit Undo ⌘Z Redo ⇧⌘Z Cut Copy Paste } ``` -------------------------------- ### Install Toggle Component Source: https://ui.gsxhq.dev/components/toggle Command to add the toggle component to your project. ```bash gsxui add toggle ``` -------------------------------- ### Implement a Basic Drawer Component Source: https://ui.gsxhq.dev/components/drawer This example demonstrates a bottom-anchored drawer with a header, content area, and footer. It uses static markup for the goal-setting interface and standard button triggers for drawer control. ```go // Package drawer holds the site's example gsx components for ui/drawer. package drawer import ( "github.com/gsxhq/gsxui/ui" "github.com/gsxhq/gsxui/ui/icon" ) // Basic adapts shadcn's own drawer-demo.tsx (a bottom-anchored goal-counter // drawer): the recharts BarChart sparkline has no gsxui equivalent (the // roadmap defers charting entirely — "chart — defer until demanded"), so // it is replaced with a static decorative bar row of plain divs standing // in for the chart's shape, not a literal port. The +/- stepper buttons // are likewise static markup — shadcn's demo wires them to useState, which // has no server-rendered gsx equivalent; they render with the demo's own // styling (ui.Button variant="outline" size="icon" rounded-full) as a // visual stand-in around the fixed goal number. // // The trigger is one real Button carrying the drawer trigger style slot plus // Dialog's behavior/ARIA contract. The footer's Cancel button is a real Button // carrying data-gsxui-dialog-close directly rather than wrapped in // DrawerClose, the same button-in-button reasoning as // site/examples/sheet/basic.gsx's own Save-changes button. component Basic() {
Move Goal Set your daily activity goal. Close drawer
350
Calories/day
Submit Cancel
} ``` -------------------------------- ### Install Tabs Component Source: https://ui.gsxhq.dev/components/tabs Command to add the tabs component to your project. ```bash gsxui add tabs ``` -------------------------------- ### Implement basic Switch components Source: https://ui.gsxhq.dev/components/switch Demonstrates pairing unchecked and checked switches with labels using the ui.Switch component. ```go // Package switchctl holds the site's example gsx components for ui.Switch // ("switch" is a Go keyword, so this package keeps its legacy name). package switchctl import ( "github.com/gsxhq/gsxui/ui" ) // Basic pairs an unchecked and a checked Switch, each with a Label. component Basic() {
Airplane mode
Wi-Fi
} ``` -------------------------------- ### Serve vendored scripts with Go Source: https://ui.gsxhq.dev/docs/npm-free Example of serving the vendored JS directory statically using Go's http.ServeMux. ```go mux := http.NewServeMux() mux.Handle("/assets/gsxui/", http.StripPrefix("/assets/gsxui/", http.FileServer(http.Dir("web/gsxui")))) ``` -------------------------------- ### Install Spinner component Source: https://ui.gsxhq.dev/components/spinner Command to add the spinner component to the project. ```bash gsxui add spinner ``` -------------------------------- ### Install Radio Component Source: https://ui.gsxhq.dev/components/radio Command to add the radio component to the project. ```bash gsxui add radio ``` -------------------------------- ### Basic Item Implementation Source: https://ui.gsxhq.dev/components/item Demonstrates various Item configurations including muted, extra-small, image media, and grouped items with separators. ```gsx // Package item holds the site's example gsx components for ui/item. package item import ( "github.com/gsxhq/gsxui/ui" "github.com/gsxhq/gsxui/ui/icon" ) // Basic renders a standalone Item (media + content + actions row) followed // by an ItemGroup of a couple items split by an ItemSeparator. component Basic() {
Compact notification Muted item Just now Extra-small item Default media Profile Image media New comment on your post Sarah replied to "Launch week recap". View Jamie Lee jamie@example.com Remove Alex Chen alex@example.com Remove
} ```