CuiCui Documentation

New components in @cuicui/ui follow a specific directory and file structure. They consist of a base component implementation and one or more variants.

1. Directory Structure

Components are organized by [section], then [category], then [component_name]. The path follows this pattern: packages/ui/cuicui/[section]/[category]/[component_name]/

2. Implementation Steps

• Base Component: Create a component.ts file containing the core logic and a ComponentProps interface.
• Variants: Create .variant.tsx files (e.g., primary.variant.tsx) that wrap the BaseComponent with specific styles or props.
• Export Generation: After creating your files, you must run the pre-build script to generate the necessary component exports.

3. Example Structure

📁 [component_name]
├── 📄 [variant1_name].variant.tsx
├── 📄 [variant2_name].variant.tsx
└── 📄 component.ts

# 1. Create the directory
mkdir -p packages/ui/cuicui/[section]/[category]/YourComponentName

# 2. (After writing component.ts and *.variant.tsx)
# 3. Generate exports
pnpm pre-build

The Advanced Bottom Action Menu is a composite UI pattern consisting of three main components: MenuRoot, MenuTrigger, and MenuContent. It uses a shared context to manage the expansion state and provides smooth animations between a collapsed (small) and expanded (large) state.

Component Roles

• MenuRoot: The provider component that manages the openValue state. It wraps the entire menu structure and handles the container's size animations (transitioning between collapsed and expanded variants).
• MenuTrigger: The interactive element that toggles the menu. It requires a value prop (a unique string) to identify which menu content it controls. When clicked, it toggles the state between its own value and null.
• MenuContent: The container for the menu's expanded information. It only renders when the openValue in the MenuRoot matches its own value prop. It handles its own entry/exit animations via AnimatePresence.

Requirements

• MenuTrigger and MenuContent must be children of a MenuRoot component, otherwise they will throw a runtime error.
• Each MenuTrigger and its corresponding MenuContent must share the same value string to correctly link the toggle action to the content display.

import { MenuRoot, MenuTrigger, MenuContent } from './path-to-components';

export const MyMenu = () => (
  <MenuRoot>
    {/* The trigger that opens the menu */}
    <MenuTrigger value="main-menu">
      <span>Open Menu</span>
    </MenuTrigger>

    {/* The content that appears when 'main-menu' is active */}
    <MenuContent value="main-menu">
      <div>Menu Item 1</div>
      <div>Menu Item 2</div>
    </MenuContent>
  </MenuRoot>
);