Skip to content
Frend Front

frend add <name>

This command allows you to easily install components and bloks from the @frend-digital/components package into your project.

Usage

Ensure to install the frend CLI first:

Terminal window
pnpm install -g @frend-digital/cli

When ready, run the command:

Terminal window
frend add <component-name>

Installing UI Components

To install a UI component from the package:

Terminal window
frend add Button

This will:

  1. Look for the component in @frend-digital/components/src/components/ui/Button
  2. If found, copy it to your project’s src/components/ui/Button directory
  3. Skip if the component already exists in your project

Installing Bloks

To install a blok component:

Terminal window
frend add ButtonBlok

This will:

  1. Look for the blok in @frend-digital/components/src/components/bloks/ButtonBlok
  2. If found:
    • Copy the blok to your project’s src/components/bloks/ButtonBlok directory
    • Automatically install the required BlokWrap.tsx if it doesn’t exist
  3. Skip if the blok already exists in your project

Directory Structure

The command works with the following directory structure:

node_modules/@frend-digital/components/
├── src/
│   ├── components/
│   │   └── ui/           # UI Components
│   └── components/
│       └── bloks/        # Blok Components

Your project structure will mirror this:

your-project/
├── src/
│   ├── components/
│   │   └── ui/           # Installed UI Components
│   └── components/
│       └── bloks/        # Installed Blok Components