Section Separator

Section separator is a divider line that compartmentalizes content, typically used on cards or white backgrounds. This should only be used on light backgrounds (with our variable $bg_light).

Line Separator

Dashed Separator

Text Separator



Pass anything (including any of our kits) to the children prop to customize a separator's content.

NOTE: passing children overrides any content passed to text

Things to Avoid

Do not use section separators to handle list; instead, use List Kit.

UI Samples using Section Separator Kit

Get the full picture. See how this kit is used in our samples.

Available Props