Command menus

React v2

A SquareKit-owned React v2 candidate for the search-first modal, with controlled open and selection state, filtering, focus, and active-menu shortcuts. No pristine upstream source exists at the pinned public commit.

Demo

hero
Composition
import { CommandMenu } from "@parentsquare/squarekit-react-v2/command-menus"; <CommandMenu isOpen={isOpen} onOpenChange={setIsOpen} items={groups} emptyState={<NoResults />} > <CommandMenu.Group> <CommandMenu.List> {(group) => ( <CommandMenu.Section {...group}> {(item) => <CommandMenu.Item key={item.id} {...item} />} </CommandMenu.Section> )} </CommandMenu.List> </CommandMenu.Group> </CommandMenu>

In context

in-context
View in a page

Family

family
CommandMenu
CommandMenu.Trigger
New document
Support
CommandMenu.Section
Olivia Rhye
Olivia Rhye@olivia
CommandMenu.Item
⌘/
CommandInput
⌘K
P
CommandShortcut
↑ ↓ to navigate · ↵ to select · esc to close
CommandMenu.Footer
esc
CommandMenuNavigationIcon

Types

cells

The item’s four leading types across both text layouts.

Default text

Olivia Rhye@olivia
default item, default text
Olivia Rhye@olivia
icon item, default text
Olivia Rhye
Olivia Rhye@olivia
avatar item, default text
Olivia Rhye@olivia
dot item, default text

Stacked text

Olivia Rhye@olivia
default item, stacked text
Olivia Rhye@olivia
icon item, stacked text
Olivia Rhye
Olivia Rhye@olivia
avatar item, stacked text
Olivia Rhye@olivia
dot item, stacked text

Layouts

cells

The field

⌘/
shortcut chip, the default
shortcut null
⌘/
with the help tooltip
⌘/
a typed query

The list

Invite colleagues
Create new project
Support
one untitled section
Invite colleagues
Create new project
Support
one titled section
Marketing site redesign
New document
Invite colleagues
Support
two sections, the rule between them
Marketing site redesign
New document
Invite colleagues
Support
↑ ↓ to navigate · ↵ to select · esc to close
the footer over the last row

Compositions

cells

All ten bars the sheet draws: six Types, four again stacked.

Text default

Command only
Marketing site redesign
New document
Invite colleagues
My profile
Team profile
Invite colleagues
Create new project
Support
Changelog
Keyboard shortcuts
Actions
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
↑ ↓ to navigate · ↵ to select · esc to close
Users, with the footer
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
Users menu
GitHub
GitHubgithub.com
Linear
Linearlinear.app
Figma
Figmafigma.com
Zapier
Zapierzapier.com
Notion
Notionnotion.so
Slack
Slackslack.com
Dropbox
Dropboxdropbox.com
Integrations menu

No projects found

Your search “Landing page design” did not match any projects. Please try again.

Empty state

Text stacked

Marketing site redesignProject by Olivia Rhye in Notion migration
New documentCreate a new blank document
Invite colleaguesCollaborate with your team on projects
My profileView and edit your personal profile
Team profileView and edit your team profile
Invite colleaguesCollaborate with your team on projects
Create new projectCreate a new blank project
SupportOur team are here to help if you get stuck
ChangelogLearn about our latest releases and updates
Keyboard shortcutsSpeed up your workflow with shortcuts
Actions
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
↑ ↓ to navigate · ↵ to select · esc to close
Users, with the footer
Phoenix Baker
Phoenix Baker@phoenix
Olivia Rhye
Olivia Rhye@olivia
Lana Steiner
Lana Steiner@lana
Demi Wilkinson
Demi Wilkinson@demi
Candice Wu
Candice Wu@candice
Natali Craig
Natali Craig@natali
Drew Cano
Drew Cano@drew
Kari Rasmussen
Kari Rasmussen@kari
Users menu, w-180
GitHub
GitHubgithub.com
Linear
Linearlinear.app
Figma
Figmafigma.com
Zapier
Zapierzapier.com
Notion
Notionnotion.so
Slack
Slackslack.com
Dropbox
Dropboxdropbox.com
Integrations menu, w-180

Content

cells
Marketing site redesign and rebrand for the Q3 launch
a long label wraps; the chip keeps its place
Keyboard shortcuts
label only
My profile
a two-key sequence
Olivia Rhye
Olivia RhyeProduct designer in Melbourne, on the marketing site redesign and the brand refresh, available Tuesdays and Thursdays
a long description, stacked, wraps

Behaviour

cells
Marketing site redesignProject by Olivia Rhye in Notion migration
New documentCreate a new blank document
Invite colleaguesCollaborate with your team on projects
My profileView and edit your personal profile
Team profileView and edit your team profile
Invite colleaguesCollaborate with your team on projects
Create new projectCreate a new blank project
SupportOur team are here to help if you get stuck
ChangelogLearn about our latest releases and updates
Keyboard shortcutsSpeed up your workflow with shortcuts
ten stacked rows: the list scrolls at max-h-117
from md, in a real viewport: the footer and the offset

Loading

cells

Rows

Loading commands
default row, length short
Loading commands
default row, length medium
Loading commands
default row, length long
Loading commands
stacked row, length short
Loading commands
stacked row, length medium
Loading commands
stacked row, length long

The menu

⌘/
Results
↑ ↓ to navigate · ↵ to select · esc to close
the whole menu: field, Results title and footer real
⌘/
Results
↑ ↓ to navigate · ↵ to select · esc to close
stacked rows, the same field and footer real

States

cells
Olivia Rhye
Olivia Rhye@olivia
Olivia Rhye
Olivia Rhye@olivia
selected, seeded by defaultSelectedKeys
Olivia Rhye@olivia
Olivia Rhye@olivia
hover and focus, live
⌘/
field focus, live: the hairline doubles and turns brand