Changelog — UI Block

Release notes that land as a pile of real cards you can throw, filter by New, Improved or Fixed, or switch to a readable list.

Pro
Changelog sections
1 section

Install

One command adds every section. Pro blocks need your API key in the registry settings.

$ npx shadcn@latest add @nexus-labs/changelog-blocks

Full setup guide

Install the complete Changelog family with its 1 variant. The registry command adds the source files, required utility imports, and npm packages used by this block.

1
Prepare a shadcn project
Use a Next.js project with Tailwind CSS and the @/ alias. If shadcn is not configured yet, run:
```
npx shadcn@latest init
```

Connect the registry with your API key

Replace your components.json with this, or add the registries key to your existing one. Replace YOUR_NEXUS_API_KEY with the key from your Nexus UI dashboard.

{
  "$schema": "https://ui.shadcn.com/schema.json",
  "style": "default",
  "rsc": true,
  "tsx": true,
  "tailwind": {
    "css": "src/app/globals.css",
    "baseColor": "neutral",
    "cssVariables": true,
    "prefix": ""
  },
  "aliases": {
    "components": "@/components",
    "utils": "@/lib/utils",
    "ui": "@/components/ui",
    "lib": "@/lib",
    "hooks": "@/hooks"
  },
  "registries": {
    "@nexus-labs": {
      "url": "https://www.nexus-ui.com/api/registry/{name}",
      "headers": {
        "Authorization": "Bearer YOUR_NEXUS_API_KEY"
      }
    }
  }
}

3
Install the full block family
Run this command from your project root. It installs every variant shown on this page.
```
npx shadcn@latest add @nexus-labs/changelog-blocks
```
4
Files added to your project
The component package installs these block source files:
components/
blocks/
motion-kit/
changelog-pile/
changelog-pile.tsx
5
Copy the example into your page
Switch to the Codetab on the variant you want. On the left you'll see a ready-to-use snippet — copy it and paste it into app/page.tsx:
```
// app/page.tsx
import YourBlock from "@/components/...";

export default function Page() {
  return (
    <main>
      <YourBlock />
    </main>
  );
}
```
The exact import path is shown in the Code tab sidebar for each variant.

1 of 1Pro

Changelog Pile

Changelog

What's new

Everything we shipped since September. Pick the cards up and throw them, or switch to the list to read.

Get updates

More blocks

See the whole wall ›