 <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 Avatar

Use ResourceHeader.Avatar for user resources.

 <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.

 <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.

 <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

 <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>