---
title: "Turborepo Generators"
description: "Create turbo/generators/config.ts, define component and package generators, create templates, and run turbo gen."
canonical_url: "https://vercel.com/academy/production-monorepos/turborepo-generators"
md_url: "https://vercel.com/academy/production-monorepos/turborepo-generators.md"
docset_id: "vercel-academy"
doc_version: "1.0"
last_updated: "2026-04-12T06:26:14.172Z"
content_type: "lesson"
course: "production-monorepos"
course_title: "Production Monorepos with Turborepo"
prerequisites:  []
---

<agent-instructions>
Vercel Academy — structured learning, not reference docs.
Lessons are sequenced.
Adapt commands to the human's actual environment (OS, package manager, shell, editor) — detect from project context or ask, don't assume.
The lesson shows one path; if the human's project diverges, adapt concepts to their setup.
Preserve the learning goal over literal steps.
Quizzes are pedagogical — engage, don't spoil.
Quiz answers are included for your reference.
</agent-instructions>

# Turborepo Generators

# Turborepo generators

Creating new components means copying boilerplate: imports, types, tests, exports. In large teams, this leads to inconsistency and mistakes. Turborepo generators automate component and package creation with templates, ensuring every component follows team standards.

## Outcome

Create generators that scaffold new components and packages automatically.

## Fast track

1. Install @turbo/gen
2. Create generator config
3. Define component generator
4. Run and test generator

## Hands-on exercise 9.1

### 1. Install dependencies

```bash
pnpm add -D @turbo/gen
```

### 2. Create generator config

Create `turbo/generators/config.ts`:

```ts title="turbo/generators/config.ts"
import type { PlopTypes } from '@turbo/gen'

export default function generator(plop: PlopTypes.NodePlopAPI): void {
  // TODO: Add component generator with:
  //   - name: 'component'
  //   - description: 'Create a new UI component'
  //   - prompts: ask for component name
  //   - actions: create component file, test file, export
}
```

Solution

```ts title="turbo/generators/config.ts"
import type { PlopTypes } from '@turbo/gen'

export default function generator(plop: PlopTypes.NodePlopAPI): void {
  plop.setGenerator('component', {
    description: 'Create a new UI component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Component name (e.g., Input):',
      },
    ],
    actions: [
      {
        type: 'add',
        path: '{{turboRoot}}/packages/ui/src/{{kebabCase name}}.tsx',
        templateFile: 'templates/component.hbs',
      },
      {
        type: 'add',
        path: '{{turboRoot}}/packages/ui/src/{{kebabCase name}}.test.tsx',
        templateFile: 'templates/component-test.hbs',
      },
      {
        type: 'append',
        path: '{{turboRoot}}/packages/ui/src/index.ts',
        template: "export * from './{{kebabCase name}}'",
      },
    ],
  })
}
```

### 3. Create templates

Create `turbo/generators/templates/component.hbs`:

```handlebars
interface {{pascalCase name}}Props {
  children?: React.ReactNode
  className?: string
}

export function {{pascalCase name}}({ children, className = '' }: {{pascalCase name}}Props) {
  return (
    <div className={className}>
      {children}
    </div>
  )
}
```

Create `turbo/generators/templates/component-test.hbs`:

```handlebars
import { render, screen } from '@testing-library/react'
import { {{pascalCase name}} } from './{{kebabCase name}}'

describe('{{pascalCase name}} component', () => {
  it('renders children', () => {
    render(<{{pascalCase name}}>Test content</{{pascalCase name}}>)
    expect(screen.getByText('Test content')).toBeInTheDocument()
  })
})
```

## Run generator

### 1. Generate component

```bash
turbo gen component
```

Prompts:

```
? Component name (e.g., Input): Input
```

Output:

```
✔ Created packages/ui/src/input.tsx
✔ Created packages/ui/src/input.test.tsx
✔ Updated packages/ui/src/index.ts
```

### 2. Verify generated files

Check `packages/ui/src/input.tsx`:

```tsx
interface InputProps {
  children?: React.ReactNode
  className?: string
}

export function Input({ children, className = '' }: InputProps) {
  return (
    <div className={className}>
      {children}
    </div>
  )
}
```

Perfect boilerplate generated!

### 3. Run tests

```bash
pnpm --filter @geniusgarage/ui test
```

Output:

```
✓ src/input.test.tsx (1)
  ✓ Input component (1)
    ✓ renders children

Tests  15 passed (15)
```

Generated test works!

## Add package generator

Add to `turbo/generators/config.ts`:

```ts
plop.setGenerator('package', {
  description: 'Create a new shared package',
  prompts: [
    {
      type: 'input',
      name: 'name',
      message: 'Package name (e.g., db):',
    },
  ],
  actions: [
    {
      type: 'addMany',
      destination: '{{turboRoot}}/packages/{{name}}',
      base: 'templates/package',
      templateFiles: 'templates/package/**',
    },
  ],
})
```

Create template structure:

```
  turbo/generators/templates/package/
  ├── package.json
  ├── tsconfig.json
  ├── src/
  │   └── index.ts
  └── README.md
```

Run:

```bash
turbo gen package
? Package name: db
✔ Created packages/db
```

## Benefits

**Before generators:**

- Copy-paste component
- Forget to add export
- Inconsistent naming
- Missing tests

**With generators:**

- `turbo gen component`
- Consistent structure
- Tests included
- Auto-exported

**For 10-person team:**

- 100+ components created
- Zero boilerplate errors
- Enforced standards

## Done-when

Verify generators work:

- [ ] Installed @turbo/gen
- [ ] Created turbo/generators/config.ts
- [ ] Defined component generator
- [ ] Created component and test templates
- [ ] Ran `turbo gen component` and created Input
- [ ] Verified generated files are correct
- [ ] Ran tests and saw generated test pass
- [ ] (Optional) Created package generator
- [ ] Understood generators enforce consistency

## What's Next

Generators automate creation, but how do you version packages? Next lesson: **Changesets** - learn to manage versions, generate changelogs, and publish packages to npm with semantic versioning.


---

[Full course index](/academy/llms.txt) · [Sitemap](/academy/sitemap.md)