Thickness — Set the height of the divider line in pixels. A value of 1 creates a thin hairline, while 2–3 pixels gives a more visible separator.

Color — Choose the line color using the color picker or enter a hex value. Light grays are commonly used for subtle separation, while bolder colors can create visual accents.

Width — Set the divider width as a percentage of the screen. Use 100% for a full-width line or a smaller percentage (e.g., 60%) for a centered, shorter divider.

Margin top — Add space above the divider to push it away from the component above.

Margin bottom — Add space below the divider to push away the component below.

Margin left / right — Add horizontal margins if you want the divider inset from the screen edges.

Style — Choose between solid, dashed, or dotted line styles.

Opacity — Adjust the transparency of the divider line. Lower values create a more subtle separator.

Use dividers sparingly. Too many lines can make your layout feel cluttered rather than organized. Often, generous spacing (margins) between components is enough.

A light gray divider (e.g., #E0E0E0 or #EEEEEE) with 1 pixel thickness creates a clean, modern separation that doesn't compete with your content.

For a more design-forward look, use a shorter width (50–70%) centered on the screen instead of a full-width line.

Dividers work well between content sections that would otherwise blend together, such as between a text block and a product grid.

If you need visual separation without a visible line, consider using an invisible divider — set the color to transparent and use only the margins for spacing.

Dashed or dotted styles can add personality to your layout when used thoughtfully. They work well for playful or casual brands.

Custom Component

Heading and Text Components

Styling and Custom CSS