GitHub

stack

Flex column with consistent vertical gap. Replaces the common pattern of adding margin-bottom to every child element.

stack({ gap: 'sm', align: 'start', content:
  button({ label: 'Primary action' }) +
  button({ label: 'Secondary action', variant: 'secondary' }) +
  button({ label: 'Ghost', variant: 'ghost' })
})
PropTypeDefault
contentstring (HTML)Raw HTML slot
gapstring'md''xs' · 'sm' · 'md' · 'lg' · 'xl'
alignstring'stretch''stretch' · 'start' · 'center' · 'end'