Components

Syntax-highlighted code block with bundled language icon, copy button, and optional scrollable or collapsible overflow. Server component powered by shiki.

Code diff viewer with line numbers and add/remove coloring. Supports unified and split layouts.

Tabbed CLI command block with package manager switching (pnpm, yarn, npm, bun, shadcn), bundled SVG icons, copy button, and localStorage persistence.

Compact single-line code snippet with syntax highlighting and an inline copy button. Ideal for imports, CLI commands, env vars, and config values.

Split button with a primary copy action and a dropdown of AI destinations. Copy content, view as markdown, or open in v0, ChatGPT, Claude, or Gemini.

Keyboard shortcut key rendered as a styled keycap. Three visual profiles: flat, raised, and sculpted.

Expandable prop reference table with color-coded types, optional descriptions, and full-type details. Designed for component documentation pages.

Collapsible file and folder tree with file-type icons, highlights, and configurable expand state. Designed for project structure docs, README displays, and dev-tool file explorers.

Numbered step-by-step layout with vertical connector lines, auto-incrementing step numbers, and status indicators. Designed for installation guides, tutorials, onboarding flows, and multi-step documentation. Composable — nest any content inside each step.

Color swatch display with name, hex/hsl/rgb values, and click-to-copy. Grid and horizontal scale strip layouts for design system documentation.

GitHub-style activity heatmap that visualizes daily counts as a color-intensity grid with month labels, day labels, and a Less/More legend. Includes a helper to fetch real GitHub contribution data by username.

GitHub Actions CI status badge showing passing, failing, pending, or cancelled state with colored status dot and optional duration. Two layouts: inline pill and expanded card. Async server component — fetches data at build time with ISR.

Git commit history as a vertical timeline with hashes, messages, author avatars, and branch/tag labels.

GitHub contributor display with avatar grid and detailed list layouts. Async server component with ISR caching.

Segmented button group displaying multiple GitHub repo metrics with per-segment links. Async server component — fetches data at build time with ISR.

Link button showing a GitHub repo's star count with the octocat icon. Async server component — fetches data at build time with ISR.

Live GitHub release badge showing latest tag, publish date, and pre-release indicator. Three layouts: inline pill, horizontal row, and expanded card. Async server component — fetches data at build time with ISR.

GitHub repository preview card with description, language dot, star and fork counts, license, and topic tags. Async server component — fetches data at build time with ISR.

Live Discord server badge showing server name and online count with the Discord icon. Two layouts: inline pill and expanded card. Async server component — fetches data at build time with ISR via the public widget API.

Tiny inline SVG sparkline showing npm download trends over time. Three chart types, trend indicator, date range, and average baseline. Pure SVG, zero charting dependencies. Async server component — fetches data at build time with ISR.

Software license badge with SPDX identifier, category color-coding, and OSI-approved indicator. Three layouts: inline pill, segmented row, and expanded card. Accepts a license string directly or fetches from the GitHub API.

Live npm package badge showing version, weekly downloads, license, and last publish date. Three layouts: inline pill, horizontal row, and expanded card. Async server component — fetches data at build time with ISR.

Link button showing a Product Hunt post's upvote count with the PH cat icon. Two layouts: inline button and expanded card. Async server component — fetches data at build time with ISR.

Visual cron expression display with field breakdown, human-readable summary, and optional next-run preview. Designed for dashboards, serverless function docs, and scheduling UIs.

Read-only environment variable table with masked values, click-to-reveal, per-row copy, and bulk copy as .env. Designed for settings pages, deploy previews, and documentation.

Collapsible, syntax-colored JSON tree with path copying, search, expand/collapse controls, and 65 editor color themes. Designed for dev dashboards, API documentation, and debugging tools.

Scrollable log output component for displaying streaming logs or CLI-style output in web apps. Three variants: terminal (full CLI-style with toolbar, line numbers, search), minimal (compact scrolling lines), and filterable (level filtering with counts). Supports colored log levels, timestamps, auto-scrolling, copy, and export.

Network request inspector showing headers, response body, and timing waterfall. Designed for dev dashboards, API documentation, and debugging tools.

"Trusted by" logo display with static grid and infinite-scroll marquee layouts. Grayscale by default, color on hover.

Customer testimonial display with standalone card, responsive grid, and infinite-scroll marquee layouts.

Operational status badge with colored dot and label for dashboards, status pages, and header bars.

Donation and tipping component with QR code, wallet address or handle display, and copy-to-clipboard. Supports crypto chains (Ethereum, Bitcoin, Solana, and more) and platforms (PayPal, Ko-fi, Patreon). Six layout variants for different contexts.

React hooks for DOM-free text measurement using @chenglou/pretext. Provides prepare/layout lifecycle, shrinkwrap search, and balanced-width computation.

Text wrapper that uses Pretext to balance line widths so all lines are roughly equal length. Deterministic and cross-browser consistent.

Message bubble with Pretext shrinkwrap that finds the tightest width for the same line count, eliminating dead space CSS fit-content leaves behind.

Text-aware masonry layout where card heights are predicted by Pretext without DOM measurement. Zero layout shift.