You're viewing the changeset-release/main deployment.
View on main →

Gha

GitHub-style alerts and callouts

Summary

GitHub-style alerts with multiple severity levels.

Aka. "GitHub alerts"

Callouts compose shadcn Card parts with each kind's Material background and matching foreground. The icon-and-label header sits above full-width rich content, using the standard Card spacing. They remain static editorial notes, so reading an article does not trigger an assertive screen-reader announcement.

<Gha keyword="NOTE">Highlights information that users should take into account, even when skimming.</Gha>

or better:

> [!NOTE]
> Highlights information that users should take into account, even when skimming.

result:

Note

Highlights information that users should take into account, even when skimming.

We also support: [!TIP], [!IMPORTANT], [!WARNING], [!CAUTION]

result:

Tip

Optional information to help a user be more successful.

Important

Crucial information necessary for users to succeed.

Warning

Critical content demanding immediate user attention due to potential risks.

Caution

Negative potential consequences of an action.

The title prop overrides the label derived from keyword (icon and background still follow the keyword). Only available via the JSX form:

<Gha keyword="TIP" title="MCP-server">Browse these docs from your MCP-compatible client.</Gha>

result:

MCP-server

Browse these docs from your MCP-compatible client.

Rich Markdown also works inside a callout:

Note

Keep headings, links and lists in your existing authoring content:

Custom labels wrap in full, and rich blocks retain their structure:

Before sharing a sandbox, check its dependencies and document the environment needed to reproduce the example

Reproduce the example

Run the example locally before sharing it:

pnpm install
pnpm dev
  • Document the requirements.
    • Include the supported Node.js version.
  • Link to the sandbox examples.

docs/authoring/gha.mdx

Edit this page