@clogg/react

React components for clogg.one — AI-native changelogs from your GitHub releases.

Drop in a component, get a beautiful changelog. Automatically adapts to your shadcn/ui theme.

Install

npm install @clogg/react

Quick start

import { Changelog } from '@clogg/react'
import '@clogg/react/styles.css'

export default function ChangelogPage() {
  return <Changelog slug="my-project" />
}

That's it. The component fetches your published changelogs from clogg.one and renders a timeline with categorized entries.

Components

<Changelog />

Full changelog timeline with version history, categories, and release dates.

<Changelog
  slug="my-project"
  maxEntries={5}
  className="my-changelog"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | required | Your project slug on clogg.one | | baseUrl | string | "https://clogg.one" | API base URL | | maxEntries | number | all | Limit number of entries shown | | className | string | — | Additional CSS class on root element | | renderEntry | (entry: ChangelogEntry) => ReactNode | — | Custom render function per entry |

<ChangelogNotification />

Floating "What's new" badge that shows a popup with the latest version. Tracks seen versions via localStorage.

<ChangelogNotification
  slug="my-project"
  position="bottom-right"
/>

| Prop | Type | Default | Description | |------|------|---------|-------------| | slug | string | required | Your project slug on clogg.one | | baseUrl | string | "https://clogg.one" | API base URL | | position | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "bottom-right" | Fixed position on screen | | className | string | — | Additional CSS class on root element | | children | ReactNode | "What's new" | Custom trigger content |

Hooks

Build your own UI with the data hooks.

useChangelog(slug, baseUrl?)

import { useChangelog } from '@clogg/react'

const { data, error, loading } = useChangelog('my-project')
// data.changelogs — array of ChangelogEntry
// data.project — { name, slug, description, repo }

useLatestChangelog(slug, baseUrl?)

import { useLatestChangelog } from '@clogg/react'

const { data, isNew, markSeen, loading } = useLatestChangelog('my-project')
// data — { version, title, summary, releaseDate }
// isNew — true if user hasn't seen this version
// markSeen() — marks current version as seen in localStorage

Styling

Import the default stylesheet:

import '@clogg/react/styles.css'

shadcn/ui projects — components read your CSS variables automatically:

--foreground, --muted-foreground, --border, --card,
--card-foreground, --popover, --popover-foreground,
--accent, --radius

Non-shadcn projects — dark-theme fallbacks are applied. Override with --clogg-* variables:

.clogg-root {
  --clogg-fg: #fff;
  --clogg-border: rgba(255, 255, 255, 0.1);
  --clogg-card: #1a1a1a;
  --clogg-radius: 8px;

  /* Category colors */
  --clogg-feature: #4ade80;
  --clogg-fix: #fbbf24;
  --clogg-improvement: #60a5fa;
  --clogg-breaking: #f87171;
}

All CSS classes are namespaced with clogg- to avoid conflicts.

Types

import type {
  ChangelogEntry,
  ChangelogProject,
  ChangelogResponse,
  LatestResponse,
} from '@clogg/react'

Requirements

• React 18+
• A project on clogg.one with published changelogs

License

MIT