craftbits*

Richtext Endpoint

A self-contained inline SVG that renders an HTTP method-verb pill next to a path segment. Designed to slot into prose, badge rows, status panels, table cells — anywhere a GET /api/feed visual needs to read as one atom without dragging a motion runtime or chip-detection regex.

Customize
Endpoint
GET
/api/feed/:id
260px
accent

Installation

npx shadcn@latest add https://craftbits.dev/r/richtext-endpoint.json

Usage

import { RichtextEndpoint } from "@craft-bits/core";
 
<RichtextEndpoint method="GET" path="/api/feed/:id" size={260} />

To tint the pill via the surrounding text color (the default currentColor accent), wrap in any text-cb-* utility.

Understanding the component

  1. One inline SVG, three layers. A rounded rect draws the method pill, a path group renders the verb glyph (down-arrow for GET, up-arrow for POST, pencil for PATCH, etc.), and a single text element with tspan children renders the path with per-segment tinting.
  2. Param highlighting via tspan. Path segments are split on /. Anything starting with : is rendered with the accent color and a heavier weight, slashes drop to 55% opacity, and the query string (if any) renders at 45% opacity.
  3. Decorative, never announced. The root SVG carries aria-hidden="true", focusable={false}, and pointer-events: none so it never enters the accessibility tree. Override aria-hidden="false" and pass aria-label if the consumer wants the glyph to announce itself.
  4. Color flows from the parent. accentColor defaults to currentColor, so the pill and param highlights inherit the wrapping text color. Pass any CSS color to override.
  5. Static — no motion. Fully static SVG. The source primitive's hover-pulse animation belongs to the parent layout, not a reusable widget.

Variants

  • GET request — <RichtextEndpoint method="GET" path="/api/feed/:id" />
  • POST request — <RichtextEndpoint method="POST" path="/api/posts" />
  • PATCH with multiple params — <RichtextEndpoint method="PATCH" path="/users/:id/posts/:postId" />
  • Query string — <RichtextEndpoint method="GET" path="/search?q=react" />
  • Explicit accent — <RichtextEndpoint method="DELETE" path="/sessions/:token" accentColor="#E5484D" />

Props

PropTypeDefaultDescription
methodstringrequiredHTTP verb shown in the pill. Custom glyphs ship for GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS.
pathstringrequiredEndpoint path. Segments starting with : highlight as parameters; query string after ? is preserved at lower opacity.
sizenumber200Width in px. Height scales from the fixed 200x32 viewBox.
accentColorstring'currentColor'CSS color for the method pill background, glyph, and param highlights.
classNamestring—Extra classes merged onto the root SVG.

Accessibility

  • The root SVG carries aria-hidden="true" and focusable={false} — RichtextEndpoint is decorative by default because the method-plus-path is also legible in the surrounding prose.
  • If the glyph is the only carrier of meaning, override aria-hidden="false" and pass an aria-label like "GET /api/feed/:id" so it announces itself.
  • pointer-events: none and user-select: none are applied so the pill never blocks clicks or text selection on layered content.
  • No motion is rendered — there is nothing to gate behind prefers-reduced-motion.
  • Color tinting flows from currentColor by default, so the pill inherits whatever contrast the wrapping text already meets.

Credits

  • Extracted from: terminal-dreams (src/components/ui/richtext-endpoint.tsx).