--- title: Divider description: >- The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization. api_version: 2026-01 source_url: html: >- https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider md: >- https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/divider.md --- # Divider The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization. Dividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](https://shopify.dev/docs/api/admin-extensions/latest/web-components/layout-and-structure/section). ### Support Targets (46) ### Supported targets * [admin.​abandoned-checkout-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/abandoned-checkouts#abandoned-checkout-details-action-) * [admin.​abandoned-checkout-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/abandoned-checkouts#abandoned-checkout-details-block-) * [admin.​catalog-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/catalogs#catalog-details-action-) * [admin.​catalog-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/catalogs#catalog-details-block-) * [admin.​collection-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-details-action-target) * [admin.​collection-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-details-block-target) * [admin.​collection-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/collections#collection-index-targets) * [admin.​company-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-details-action-) * [admin.​company-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-details-block-) * [admin.​company-location-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/companies#company-location-details-block-) * [admin.​customer-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-details-action-) * [admin.​customer-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-details-block-) * [admin.​customer-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-index-targets) * [admin.​customer-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-index-selection-action-) * [admin.​customer-segment-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/customers#customer-segment-targets) * [admin.​discount-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/discounts#discount-details-action-) * [admin.​discount-details.​function-settings.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/function-settings#discount-details-function-settings-) * [admin.​discount-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/discounts#discount-index-targets) * [admin.​draft-order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-details-action-) * [admin.​draft-order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-details-block-) * [admin.​draft-order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-index-targets) * [admin.​draft-order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/draft-orders#draft-order-index-selection-action-) * [admin.​gift-card-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/gift-cards#gift-card-details-action-) * [admin.​gift-card-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/gift-cards#gift-card-details-block-) * [admin.​order-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-details-action-) * [admin.​order-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-details-block-) * [admin.​order-details.​print-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-details-print-action-) * [admin.​order-fulfilled-card.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-fulfilled-card-targets) * [admin.​order-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-index-targets) * [admin.​order-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-index-selection-action-) * [admin.​order-index.​selection-print-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/orders#order-index-selection-print-action-) * [admin.​product-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-action-) * [admin.​product-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-block-) * [admin.​product-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-configuration-) * [admin.​product-details.​print-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-print-action-) * [admin.​product-details.​reorder.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-details-reorder-) * [admin.​product-index.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-index-targets) * [admin.​product-index.​selection-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-index-selection-action-) * [admin.​product-index.​selection-print-action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-index-selection-print-action-) * [admin.​product-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/products#product-purchase-option-action-) * [admin.​product-variant-details.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-action-) * [admin.​product-variant-details.​block.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-block-) * [admin.​product-variant-details.​configuration.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-details-configuration-) * [admin.​product-variant-purchase-option.​action.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/product-variants#product-variant-purchase-option-action-) * [admin.​settings.​order-routing-rule.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/function-settings#order-routing-rule-function-settings-) * [admin.​settings.​validation.​render](https://shopify.dev/docs/api/admin-extensions/2026-01/targets/function-settings#validation-function-settings-) #### Use cases * **Section separation:** Separate distinct sections in forms or settings panels. * **Visual breaks:** Create visual breaks between groups of related content. * **Content organization:** Improve readability by dividing long forms into digestible sections. * **Hierarchy:** Establish clear hierarchy in complex interfaces with multiple content groups. *** ## Properties Configure the following properties on the divider component. * **direction** **"inline" | "block"** **Default: 'inline'** **required** The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values). * `inline`: Horizontal divider for separating vertically stacked content * `block`: Vertical divider for separating horizontally arranged content * **color** **"base" | "strong"** **Default: 'base'** **required** The visual prominence of the divider line. * `base`: Standard divider for most separations (default) * `strong`: More prominent divider for major section breaks *** ## Examples ### Add a horizontal divider Create a horizontal divider to visually separate content sections. This example shows the default divider with base color and inline direction. ## html ```html ``` ### Increase visual emphasis with a strong divider Use the `color` property to display a more prominent divider that marks a major section break. This example shows a strong-colored divider for increased visual emphasis. ## html ```html ``` ### Create a vertical divider between inline items Use the `direction` property to create a vertical divider between horizontally arranged items. This example shows a vertical divider separating text items in an inline stack. ## html ```html Item 1 Item 2 ``` ### Separate form sections with a divider Place a divider between groups of form fields to visually distinguish related sections. This example shows a divider separating store details from contact information fields. ## html ```html ``` *** ## Best practices * **Use for truly distinct boundaries:** Dividers work best when separating fundamentally different content sections. Overusing dividers creates visual clutter and makes interfaces feel fragmented. Consider whether whitespace alone could achieve the same grouping. * **Match visual weight to hierarchy:** The divider's prominence should reflect the importance of the separation. Major section breaks can support stronger visual dividers, while minor groupings need subtler separation or just whitespace. * **Align with layout direction:** The divider's orientation should match your content flow. A horizontal divider between vertically stacked items or a vertical divider between horizontally arranged items creates clear, predictable separation. * **Prefer whitespace for subtle grouping:** Whitespace often provides cleaner visual grouping than dividers. Before adding a divider, try using spacing properties on your layout components. Dividers should enhance clarity, not replace thoughtful spacing. ***