or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

core-components.md hooks.md index.md option-components.md utility-components.md

tile.json

Utility Components

Supporting components for menu structure, styling, and visual organization. These components enhance the menu experience with grouping, separation, and visual elements.

Capabilities

MenuGroup

Groups related menu items with an optional title for semantic organization and improved accessibility.

/**
 * Groups related menu items with optional title
 * @param props - Group properties including title and styling
 * @param ref - Forward ref to the group container element
 */
const MenuGroup: React.ForwardRefExoticComponent<MenuGroupProps>;

interface MenuGroupProps extends HTMLChakraProps<"div"> {
  /** Title text displayed above the group */
  title?: string;
  /** Group content - typically MenuItem components */
  children?: React.ReactNode;
  /** CSS class name for styling */
  className?: string;
}

Usage Examples:

import { Menu, MenuButton, MenuList, MenuGroup, MenuItem, MenuDivider } from "@chakra-ui/menu";

// Basic grouped menu
function GroupedMenu() {
  return (
    <Menu>
      <MenuButton>User Menu</MenuButton>
      <MenuList>
        <MenuGroup title="Account">
          <MenuItem>Profile Settings</MenuItem>
          <MenuItem>Account Preferences</MenuItem>
          <MenuItem>Billing Information</MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuGroup title="Support">
          <MenuItem>Help Center</MenuItem>
          <MenuItem>Contact Support</MenuItem>
          <MenuItem>Feature Requests</MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuGroup title="System">
          <MenuItem>Admin Panel</MenuItem>
          <MenuItem>System Logs</MenuItem>
          <MenuItem color="red.500">Sign Out</MenuItem>
        </MenuGroup>
      </MenuList>
    </Menu>
  );
}

// Group without title
function UntitledGroup() {
  return (
    <MenuList>
      <MenuGroup>
        <MenuItem>Grouped Item 1</MenuItem>
        <MenuItem>Grouped Item 2</MenuItem>
      </MenuGroup>
    </MenuList>
  );
}

// Custom styled group
function StyledGroup() {
  return (
    <MenuGroup 
      title="Custom Group"
      bg="gray.50"
      p={2}
      borderRadius="md"
    >
      <MenuItem>Item in styled group</MenuItem>
    </MenuGroup>
  );
}

MenuDivider

Visual separator component that creates horizontal lines between menu sections for better organization.

/**
 * Visual separator between menu sections
 * @param props - Divider styling properties
 */
const MenuDivider: React.FC<MenuDividerProps>;

interface MenuDividerProps extends HTMLChakraProps<"hr"> {
  /** CSS class name for styling */
  className?: string;
}

Usage Examples:

// Basic divider usage
<MenuList>
  <MenuItem>Edit</MenuItem>
  <MenuItem>Copy</MenuItem>
  <MenuDivider />
  <MenuItem color="red.500">Delete</MenuItem>
</MenuList>

// Custom styled divider
<MenuDivider 
  borderColor="blue.200"
  opacity={0.8}
  my={1}
/>

// Multiple dividers for complex menus
function ComplexMenu() {
  return (
    <Menu>
      <MenuButton>Actions</MenuButton>
      <MenuList>
        <MenuItem>New</MenuItem>
        <MenuItem>Open</MenuItem>
        <MenuItem>Save</MenuItem>
        
        <MenuDivider />
        
        <MenuItem>Cut</MenuItem>
        <MenuItem>Copy</MenuItem>
        <MenuItem>Paste</MenuItem>
        
        <MenuDivider />
        
        <MenuItem>Undo</MenuItem>
        <MenuItem>Redo</MenuItem>
        
        <MenuDivider />
        
        <MenuItem>Settings</MenuItem>
        <MenuItem>Help</MenuItem>
      </MenuList>
    </Menu>
  );
}

MenuCommand

Component for displaying keyboard shortcuts or command text aligned to the right side of menu items.

/**
 * Command/shortcut text display component
 * @param props - Command text styling properties  
 * @param ref - Forward ref to the command span element
 */
const MenuCommand: React.ForwardRefExoticComponent<MenuCommandProps>;

interface MenuCommandProps extends HTMLChakraProps<"span"> {
  /** Command text content */
  children?: React.ReactNode;
  /** CSS class name for styling */
  className?: string;
}

Usage Examples:

// Used within MenuItem (recommended)
<MenuItem command="⌘N">New File</MenuItem>
<MenuItem command="⌘S">Save File</MenuItem>
<MenuItem command="⌘⇧S">Save As...</MenuItem>

// Direct usage (advanced)
<MenuItem>
  Save Document
  <MenuCommand ml="auto">⌘S</MenuCommand>
</MenuItem>

// Custom styled command
<MenuItem>
  Advanced Action
  <MenuCommand 
    ml="auto"
    fontSize="xs"
    color="gray.500"
    fontFamily="mono"
  >
    Ctrl+Alt+A
  </MenuCommand>
</MenuItem>

// Platform-specific commands
function PlatformMenu() {
  const isMac = navigator.platform.includes('Mac');
  
  return (
    <MenuList>
      <MenuItem command={isMac ? "⌘C" : "Ctrl+C"}>
        Copy
      </MenuItem>
      <MenuItem command={isMac ? "⌘V" : "Ctrl+V"}>
        Paste
      </MenuItem>
      <MenuItem command={isMac ? "⌘Z" : "Ctrl+Z"}>
        Undo
      </MenuItem>
    </MenuList>
  );
}

MenuIcon

Wrapper component for menu item icons that ensures proper styling, accessibility attributes, and alignment.

/**
 * Icon wrapper with proper styling and accessibility
 * @param props - Icon container styling properties
 */
const MenuIcon: React.FC<HTMLChakraProps<"span">>;

interface HTMLChakraProps<T extends keyof JSX.IntrinsicElements> {
  /** Icon element to wrap */
  children?: React.ReactNode;
  /** CSS class name for styling */
  className?: string;
  /** Custom styling properties */
  [key: string]: any;
}

Usage Examples:

// Used within MenuItem (recommended)
<MenuItem icon={<DownloadIcon />}>Download</MenuItem>
<MenuItem icon={<EditIcon />}>Edit</MenuItem>
<MenuItem icon={<DeleteIcon />}>Delete</MenuItem>

// Direct usage (advanced)
<MenuItem>
  <MenuIcon marginEnd="0.75rem">
    <CustomIcon />
  </MenuIcon>
  Custom Action
</MenuItem>

// Custom styled icon
<MenuItem>
  <MenuIcon 
    fontSize="1.2em"
    color="blue.500"
    marginEnd="1rem"
  >
    <InfoIcon />
  </MenuIcon>
  Information
</MenuItem>

// Conditional icons
function ConditionalIconMenu({ hasNotifications }) {
  return (
    <MenuList>
      <MenuItem 
        icon={
          <MenuIcon color={hasNotifications ? "red.500" : "gray.400"}>
            <BellIcon />
          </MenuIcon>
        }
      >
        Notifications {hasNotifications && "(New)"}
      </MenuItem>
    </MenuList>
  );
}

Common Patterns

Comprehensive Menu Structure

function ComprehensiveMenu() {
  return (
    <Menu>
      <MenuButton>Complete Menu</MenuButton>
      <MenuList>
        <MenuGroup title="File Operations">
          <MenuItem icon={<AddIcon />} command="⌘N">
            New File
          </MenuItem>
          <MenuItem icon={<EditIcon />} command="⌘O">
            Open File
          </MenuItem>
          <MenuItem icon={<DownloadIcon />} command="⌘S">
            Save File
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuGroup title="Edit Operations">
          <MenuItem icon={<CopyIcon />} command="⌘C">
            Copy
          </MenuItem>
          <MenuItem icon={<ClipboardIcon />} command="⌘V">
            Paste  
          </MenuItem>
          <MenuItem icon={<RepeatIcon />} command="⌘Z">
            Undo
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuGroup>
          <MenuItem icon={<SettingsIcon />}>
            Preferences
          </MenuItem>
          <MenuItem icon={<QuestionIcon />}>
            Help
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuItem icon={<CloseIcon />} color="red.500">
          Exit Application
        </MenuItem>
      </MenuList>
    </Menu>
  );
}

Application Menu

function ApplicationMenu() {
  return (
    <Menu>
      <MenuButton>Application</MenuButton>
      <MenuList minWidth="200px">
        <MenuGroup title="Recent Files">
          <MenuItem>
            <MenuIcon>
              <DocumentIcon />
            </MenuIcon>
            document1.txt
            <MenuCommand>Yesterday</MenuCommand>
          </MenuItem>
          <MenuItem>
            <MenuIcon>
              <DocumentIcon />
            </MenuIcon>
            document2.txt  
            <MenuCommand>2 days ago</MenuCommand>
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuItem icon={<FolderIcon />}>
          Open Folder...
        </MenuItem>
        <MenuItem icon={<SearchIcon />}>
          Search Files...
        </MenuItem>
        
        <MenuDivider />
        
        <MenuGroup title="Application">
          <MenuItem icon={<SettingsIcon />}>
            Preferences
          </MenuItem>
          <MenuItem icon={<InfoIcon />}>
            About
          </MenuItem>
          <MenuItem icon={<ExternalLinkIcon />}>
            Check for Updates
          </MenuItem>
        </MenuGroup>
      </MenuList>
    </Menu>
  );
}

Context Menu

function ContextMenu({ item }) {
  return (
    <Menu>
      <MenuButton as={Box} cursor="context-menu">
        Right-click me
      </MenuButton>
      <MenuList>
        <MenuItem icon={<ViewIcon />}>
          View Details
        </MenuItem>
        <MenuItem icon={<EditIcon />}>
          Edit Properties
        </MenuItem>
        
        <MenuDivider />
        
        <MenuGroup title="Actions">
          <MenuItem icon={<CopyIcon />}>
            Duplicate
          </MenuItem>
          <MenuItem icon={<DownloadIcon />}>
            Export
          </MenuItem>
          <MenuItem icon={<LinkIcon />}>
            Share Link
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuItem icon={<DeleteIcon />} color="red.500">
          Delete
        </MenuItem>
      </MenuList>
    </Menu>
  );
}

function NavigationMenu() {
  return (
    <Menu>
      <MenuButton>Navigate</MenuButton>
      <MenuList>
        <MenuGroup title="Main Sections">
          <MenuItem icon={<HomeIcon />}>
            Dashboard
          </MenuItem>
          <MenuItem icon={<UsersIcon />}>  
            Users
          </MenuItem>
          <MenuItem icon={<BarChartIcon />}>
            Analytics
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuGroup title="Tools">
          <MenuItem icon={<ToolIcon />}>
            Administration
          </MenuItem>
          <MenuItem icon={<DocumentIcon />}>
            Reports
          </MenuItem>
          <MenuItem icon={<SettingsIcon />}>
            System Settings
          </MenuItem>
        </MenuGroup>
        
        <MenuDivider />
        
        <MenuItem icon={<HelpIcon />}>
          Help & Support
        </MenuItem>
      </MenuList>
    </Menu>
  );
}

Version

Tile

Files