Skip to component content
Collection066 / 155

GroupBox

Give related content a titled, themed boundary.

Example
Workspace details
Name
Personal studio
Members
3 people
A compact filled group without a legend.
Source
GroupBox.tsxtsx
import { GroupBox, LabeledContent, Text, VStack } from "@/ohmygui";

export default function Example() {
  return (
    <VStack align="stretch" gap="sm">
      <GroupBox title="Workspace details" variant="bordered" padding="md">
        <VStack gap="sm">
          <LabeledContent label="Name" value="Personal studio" />
          <LabeledContent label="Members" value="3 people" />
        </VStack>
      </GroupBox>
      <GroupBox variant="filled" padding="sm" aria-label="Workspace note">
        <Text color="muted">A compact filled group without a legend.</Text>
      </GroupBox>
    </VStack>
  );
}