function Example() {
  const Child = () => {
    const { open } = useHints('first-hint-group');
    return (
      <Flex flexDirection="flex-col" alignItems="items-start" space="space-y-4">
        <Flex space="space-x-4">
          <Hints.Hint group="first-hint-group" label="This is a card component">
            <Hints.Hint group="second-hint-group" label="This hint belongs to a different group">
              <Hints.Hint
                group="third-hint-group"
                placement="bottom-start"
                label="Nested third group with different position"
              >
                <Card padding="sm" fontSize="text-sm">
                  <Heading as="h1" size="sm">
                    Test drive your search
                  </Heading>
                  Experience the speed of Sajari's search using the search preview.
                </Card>
              </Hints.Hint>
            </Hints.Hint>
          </Hints.Hint>
          <Hints.Hint group="first-hint-group" label="A simple string">
            <Card padding="sm" fontSize="text-sm">
              <Heading as="h1" size="sm">
                Set up the Search UI in Shopify
              </Heading>
              Set up the Search UI in your Shopify templates in a few easy steps.
            </Card>
          </Hints.Hint>
          <Hints.Hint
            group="first-hint-group"
            label={
              <Flex padding="px-1" flexDirection="flex-col">
                <Heading textColor="text-white" as="h5" display="flex" alignItems="items-center">
                  <Icon name="gear" size="md" margin="mr-1" /> Heading
                </Heading>
                <Text>
                  A more complex component could have a{' '}
                  <Link
                    textColor="text-white"
                    textDecoration="underline"
                    href="https://www.example.com"
                    target="_blank"
                  >
                    Link
                  </Link>{' '}
                  and more content.
                </Text>
              </Flex>
            }
          >
            <Card padding="sm" fontSize="text-sm">
              <Heading as="h1" size="sm">
                Play with pipelines
              </Heading>
              Fine tune your search algorithm using our powerful pipeline editor.
            </Card>
          </Hints.Hint>
        </Flex>
        <ButtonGroup>
          <Button onClick={() => open()} appearance="primary">
            Show hints
          </Button>
          <Button onClick={() => open('second-hint-group')} appearance="primary">
            Show second hints group
          </Button>
          <Button onClick={() => open('third-hint-group')} appearance="primary">
            Show third hints group
          </Button>
        </ButtonGroup>
      </Flex>
    );
  };
  return (
    <Hints>
      <Child />
    </Hints>
  );
}