Skip to content
Pinky UI

onboarding

Coach Mark

A single attached teaching surface for a new contextual feature.

  • onboarding
  • coach
  • teaching
  • context

Quick usage

usage
import { CoachMark } from "@pinky-ui/systems";

<CoachMark target="#new-filter" title="New filters">Try saved views here.</CoachMark>

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Pointer and keyboard paths expose the same state change.
  • Status and focus remain meaningful when motion is disabled.

Performance

  • Uses local state and transforms; no per-frame React pointer loop.

Reduced motion

Resolves state changes without layout animation while preserving semantics.

When to use

  • Product workflows with a clear reversible or inspectable state.

When not to use

  • Decorative motion without a user task.

Skill

Purpose

Use for one dismissible teaching hint attached to a relevant element.

Use when

A new feature needs a short explanation in its local context.

Avoid

Multiple competing marks or an uncloseable interruption.

Accessibility

Give the mark a readable status/description and a dismiss button.

Keyboard and touch

Placement must not depend on hover; controls remain reachable on small screens.

Reduced motion and performance

Update position only on meaningful resize/layout events and skip decorative movement.

Composition and anti-patterns

Escalate to SpotlightTour only when several relationships must be taught.

Open this skill on its own page