Guidance Region — Cinder component documentation

Overview

GuidanceRegion provides a context-scoped claim registry. Claims are filtered by version windows and can be dismissed or reset through a consumer-owned storage adapter.

Usage

<script lang="ts">
  import { Button } from '@lostgradient/cinder/button';
  import {
    GuidanceRegion,
    type GuidanceClaim,
    useGuidance,
  } from '@lostgradient/cinder/guidance-region';

  const claims = [
    { id: 'welcome', anchor: 'workspace-start', content: 'Start by exploring the workspace.' },
  ] satisfies GuidanceClaim[];
</script>

<GuidanceRegion
  {claims}
  version="1.0.0"
  anchorResolver={() => document.getElementById('workspace-start')}
>
  {#snippet children()}
    {@const guidance = useGuidance()}
    <Button id="workspace-start" onclick={() => guidance.claim('welcome')}>
      Show welcome guidance
    </Button>
  {/snippet}
</GuidanceRegion>

Live preview

When to use

Use when

Coordinating coachmarks that must respect product versions and reversible dismissal.

Avoid when

Showing an isolated anchored explanation without registry lifecycle; use Popover.

Examples

Basic guidance region

Provide contextual guidance claims to an application surface.

Props

Props for guidance-region
Name	Type	Default	Description
`claims`	`GuidanceClaim[]`	`[]`
`version`	`text`
`storage`	`GuidanceStorage`
`storageKey`	`text`	`'cinder-guidance'`
`anchorResolver`	`(anchor: string) => HTMLElement\|null`		Resolves a claim anchor using consumer-owned DOM knowledge.
`children`	`snippet`