DocsCLIGenerate Component

Generate Component

Generates a new React or React Native component with a matching index file for clean imports.

Usage

Interactive:

remodel
# then select "Create Component"

Non-interactive:

remodel component --name UserProfile --ts --platform react

Short alias:

remodel c --name UserProfile --ts

Options

FlagTypeDefaultDescription
--name <name>string(required)Component name in PascalCase (e.g., UserProfile)
--dir <directory>string./src/componentsDirectory where the component folder is created
--tsbooleanfrom configUse TypeScript (.tsx)
--jsbooleanfrom configUse JavaScript (.jsx)
--platform <platform>stringfrom configreact or react-native
💡

Component names must be PascalCase (e.g., UserProfile, TodoList). The CLI validates this and will prompt you to re-enter if the name doesn’t match.

Generated Files

Running remodel component --name UserProfile --ts --platform react creates:

src/components/
  UserProfile/
    UserProfile.tsx
    index.ts

React Component

src/components/UserProfile/UserProfile.tsx
import React from 'react';
 
interface UserProfileProps {}
 
export function UserProfile({}: UserProfileProps) {
  return (
    <div>
      <h1>UserProfile</h1>
    </div>
  );
}

React Native Component

When --platform react-native is used:

src/components/UserProfile/UserProfile.tsx
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
 
interface UserProfileProps {}
 
export function UserProfile({}: UserProfileProps) {
  return (
    <View style={styles.container}>
      <Text>UserProfile</Text>
    </View>
  );
}
 
const styles = StyleSheet.create({
  container: {},
});

Index File

src/components/UserProfile/index.ts
export { UserProfile } from './UserProfile';

This barrel file allows clean imports:

import { UserProfile } from './components/UserProfile';

Interactive Flow

When running interactively, the Create Component screen walks you through:

  1. Component name — text input with PascalCase validation
  2. Language — skipped if .remodel config has a language set
  3. Platform — skipped if .remodel config has a platform set
  4. Directory — directory picker with filesystem autocomplete, defaults to ./src/components
  5. Generate — creates the component files
  6. Success — shows a summary of created files
Generate ModelConfiguration