managarten/apps/picture/packages/mobile-ui/cli

@memoro/ui CLI

CLI tool for copying UI components into your app (shadcn-style).

Installation

npm install -g @memoro/ui

Or use directly with npx:

npx @memoro/ui add button

Commands

add <component>

Add a component to your project.

memoro-ui add button
memoro-ui add text
memoro-ui add card

Options:

• -y, --yes - Skip confirmation prompts

The CLI will:

1. Check if the component exists in the registry
2. Resolve and install dependencies automatically
3. Copy component files to your components/ directory
4. Show import instructions

list

List all available components.

memoro-ui list

Options:

• -c, --category <category> - Filter by category (ui, navigation)

Shows:

• All available components
• Which components are already installed (✓)
• Component descriptions
• Dependencies

How it Works

This CLI follows the shadcn approach:

1. No NPM dependencies - Components are copied into your project
2. Full control - You own the code, modify as needed
3. Dependencies - Automatically installs component dependencies
4. Type-safe - All components are fully typed with TypeScript

Component Structure

Components are copied to:

your-project/
└── components/
    ├── ui/
    │   ├── Button/
    │   │   ├── Button.tsx
    │   │   ├── index.ts
    │   │   └── README.md
    │   ├── Text/
    │   └── ...
    └── navigation/
        └── ...

Import Pattern

import { Button } from '@/components/ui/Button';
import { Text } from '@/components/ui/Text';

function MyScreen() {
	return <Button title="Click me" onPress={() => {}} />;
}

Development

Build the CLI:

npm run build

Watch mode:

npm run dev

Link locally for testing:

npm link
memoro-ui list

Available Components

Run memoro-ui list to see all available components.

Current components:

• UI (14): Button, Text, Icon, Container, EmptyState, ErrorBanner, Slider, Skeleton, FAB, Tag, Badge, Card, Select, ToggleGroup
• Navigation (coming soon): Header, TabBar, HeaderButton

Philosophy

Copy, don't install - This CLI doesn't create NPM dependencies. It copies component source code into your project. This gives you:

• ✅ Full control over the code
• ✅ No version conflicts
• ✅ Customize freely without worrying about updates
• ✅ Smaller bundle size (only what you use)
• ✅ Better for AI context (components in your codebase)

When you want updates, run memoro-ui add <component> again to get the latest version (with confirmation).

License

Private - memoro internal use only.