Strapi Plugin Section Divider

A Strapi custom field plugin that adds visual section dividers to organize your content-type forms.

Features

• 🎨 Visual section dividers with customizable labels
• 🌓 Automatic theme support (light/dark mode)
• 📏 Always 100% width for clear separation
• 🚀 No data storage - purely visual
• ✨ Seamless integration with Strapi Design System

Installation

npm install @tunghtml/strapi-plugin-section-divider
# or
yarn add @tunghtml/strapi-plugin-section-divider

Configuration

1. Enable the plugin

Add to config/plugins.js:

module.exports = {
  // ...
  "section-divider": {
    enabled: true,
  },
};

2. Rebuild admin panel

npm run build
# or
yarn build

3. Restart Strapi

npm run develop
# or
yarn develop

Usage

Adding a Section Divider

Method 1: Via Content-Type Builder UI

1. Go to Settings → Content-Type Builder
2. Select your content-type (e.g., Article, Product)
3. Click "Add another field"
4. Select "Section Divider" from the Custom tab
5. Configure:
   • Name: Field name (e.g., experienceSection)
   • Label: Display text (e.g., "Experience Details")
6. Click Save

Method 2: Edit schema directly

Add to your content-type schema:

{
  "attributes": {
    "experienceSection": {
      "type": "customField",
      "customField": "plugin::section-divider.section-divider"
    }
  }
}

Organizing Your Form

Use Configure the view to arrange fields:

1. Go to Settings → Content-Type Builder → [Your Content-Type]
2. Click "Configure the view" (eye icon)
3. Drag the section divider fields to organize your form

Example

{
  "kind": "collectionType",
  "collectionName": "products",
  "info": {
    "singularName": "product",
    "pluralName": "products",
    "displayName": "Product"
  },
  "attributes": {
    "name": {
      "type": "string"
    },
    "price": {
      "type": "decimal"
    },

    "detailsSection": {
      "type": "customField",
      "customField": "plugin::section-divider.section-divider"
    },

    "description": {
      "type": "richtext"
    },
    "features": {
      "type": "json"
    },

    "metaSection": {
      "type": "customField",
      "customField": "plugin::section-divider.section-divider"
    },

    "seo": {
      "type": "component",
      "component": "shared.seo"
    }
  }
}

This will create a form with clear visual sections:

┌─────────────────────────────┐
│ name: [input]               │
│ price: [input]              │
│                             │
│ Details                     │
│ ─────────────────────────── │
│                             │
│ description: [richtext]     │
│ features: [json]            │
│                             │
│ Meta                        │
│ ─────────────────────────── │
│                             │
│ seo: [component]            │
└─────────────────────────────┘

Benefits

• Better UX: Organize complex forms into logical sections
• No Data Impact: Dividers are purely visual - no database fields created
• Flexible: Add as many dividers as needed
• Theme-Aware: Automatically adapts to light/dark mode
• Easy to Use: Simple drag-and-drop in Content-Type Builder

Compatibility

• Strapi v4.x
• Strapi v5.x
• Node.js >= 18.x

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

Found a bug or have a feature request? Open an issue

License

MIT © Tung Le

Links

• GitHub Repository
• npm Package
• Strapi Documentation