Extend UI Svelte
GitHub

Docs / Primitives / Group

Group

Joins related controls into one unit: adjacent items share edges, and separators or static text can sit between them. Dark mode is controlled by the parent through isDark; the toggle below lives outside the component.

Horizontal with separators

Last action: none

Vertical

With text

$
USD

Nested groups

Differences from upstream

  • Exported as Group, GroupText, GroupSeparator and the upstream aliases ButtonGroup, ButtonGroupText, ButtonGroupSeparator. className and class are both accepted.
  • children is a Svelte snippet instead of a React node.
  • GroupText has no render prop (Base UI useRender is React-only); it always renders a div.
  • GroupSeparator renders its own separator element instead of wrapping the shadcn Separator.
  • The dark-mode hover and pressed separator tints and the focus-ring separator shifts from upstream's class list are not ported; edge joining and orientation are.
  • Accepts isDark and onIsDarkChange; it reflects isDark and never calls onIsDarkChange.

Back to all components