bon-ui
Spacing
Edit
bon.config.ts → spacing. Use Page, Section, Panel from @/components/ui.Page shell
Page edge padding relative to the viewport.
- pageXstep 6 · --bon-page-x
Page horizontal padding
- pageYstep 6 · --bon-page-y
Page vertical padding (desktop)
- pageYMobilestep 10 · --bon-page-y-mobile
Page vertical padding (mobile)
Layout structure
Gaps between and inside page sections.
- sectionGapstep 5 · --bon-section-gap
Gap between sections
- sectionInnerstep 3 · --bon-section-inner
Section inner stack
Surface inset
Inner padding for bordered panels and cards.
- panelPaddingstep 3 · --bon-panel-padding
Panel padding
Local gap
Tight gaps inside control groups and small stacks.
- inlineGapstep 3 · --bon-inline-gap
Inline / button group gap
- stackTightstep 2 · --bon-stack-tight
Tight vertical stack