Nyx UI

Code Diff

src/components/Button.tsx
+4−3
12 interface ButtonProps {
13 variant: 'primary' | 'ghost' | 'outline';
12− size?: 'sm' | 'md' | 'lg';
13− onClick?: () => void;
14− disabled?: boolean;
+ size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+ onClick?: (e: React.MouseEvent) => void;
+ disabled?: boolean;
+ loading?: boolean;
23 }
24
25 export function Button({ variant, size = 'md', ...props }) {
+4 additions−3 deletions
diff --git a/src/components/Button.tsx

Code Diff is a terminal style diff viewer with syntax highlighted additions and deletions, a staggered line by line reveal animation, and a working copy button. It runs on a loop, so it works both as a live demo and as an ambient visual in a hero section. Built with React and Tailwind CSS. Suits changelog pages, code review tool marketing, and CI product screenshots.

Installation

Copy and paste the following code into your project.

Unlock the full library

Get all pro blocks, components & illustrations, and production-ready Next.js + Tailwind templates.

Get All Access

Update the import paths to match your project setup.