 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </Flex>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

API Reference

Root

The root container for the resource header. Provides a loading context to all children.

Prop	Type	Default
`loading`	`boolean`	`false`

Content

Groups the icon/avatar and text content.

Icon

Displays an icon using IconPanel. Renders a skeleton when loading.

Prop	Type	Default
`variant`	`"classic" \| "solid"`	`"classic"`

Avatar

Displays a user avatar with a text fallback. Renders a skeleton when loading.

Prop	Type	Default
`src`	`string`
`fallback`	`string`

Title

Renders a heading for the resource name.

Id

Renders a copyable ID chip. Renders a skeleton when loading.

Prop	Type	Default
`label`	`string`	`"ID"`

Accessories

Container for additional metadata next to the ID. Hidden when loading.

Actions

Container for action buttons. Hidden when loading.

Examples

With ID

Title and ID only, with no left accessory (icon or avatar).

Acme Corporation

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </Flex>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

With Avatar

Use ResourceHeader.Avatar for user resources.

Jane Cooper

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Avatar
      src="https://images.unsplash.com/photo-1502823403499-6ccfcf4fb453?&w=256&h=256&q=70&crop=focalpoint&fp-x=0.5&fp-y=0.3&fp-z=1&fit=crop"
      fallback="J"
    />
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Jane Cooper</ResourceHeader.Title>
      <ResourceHeader.Id label="User ID">
        user_01H2XJKL3M4N5P6Q7R8S
      </ResourceHeader.Id>
    </Flex>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

With Avatar Fallback

When no src is provided, the avatar displays the fallback text.

Jane Cooper

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Avatar fallback="J" />
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Jane Cooper</ResourceHeader.Title>
      <ResourceHeader.Id label="User ID">
        user_01H2XJKL3M4N5P6Q7R8S
      </ResourceHeader.Id>
    </Flex>
  </ResourceHeader.Content>
</ResourceHeader.Root>

With Accessories

Use ResourceHeader.Accessories to display additional metadata alongside the ID.

Acme Corporation

Enterprise

 <ResourceHeader.Root>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Accessories>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
        <Badge color="gray">Enterprise</Badge>
      </ResourceHeader.Accessories>
    </Flex>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

Loading State

Set loading on the root to show skeletons for all children.

 <ResourceHeader.Root loading>
  <ResourceHeader.Content>
    <ResourceHeader.Icon>
      <CubeIcon />
    </ResourceHeader.Icon>
    <Flex direction="column" gap="2">
      <ResourceHeader.Title>Acme Corporation</ResourceHeader.Title>
      <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
    </Flex>
  </ResourceHeader.Content>
  <ResourceHeader.Actions>
    <Button color="purple">Actions</Button>
  </ResourceHeader.Actions>
</ResourceHeader.Root>

Icon Variants

Classic Variant

Solid Variant

 <Flex direction="column" gap="6">
  <ResourceHeader.Root>
    <ResourceHeader.Content>
      <ResourceHeader.Icon variant="classic">
        <CubeIcon />
      </ResourceHeader.Icon>
      <Flex direction="column" gap="2">
        <ResourceHeader.Title>Classic Variant</ResourceHeader.Title>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
      </Flex>
    </ResourceHeader.Content>
  </ResourceHeader.Root>

  <ResourceHeader.Root>
    <ResourceHeader.Content>
      <ResourceHeader.Icon variant="solid">
        <CubeIcon />
      </ResourceHeader.Icon>
      <Flex direction="column" gap="2">
        <ResourceHeader.Title>Solid Variant</ResourceHeader.Title>
        <ResourceHeader.Id>org_01H2XJKL3M4N5P6Q7R8S</ResourceHeader.Id>
      </Flex>
    </ResourceHeader.Content>
  </ResourceHeader.Root>
</Flex>