update the docs link

.changeset/frank-camels-raise.md

@@ -0,0 +1,5 @@
+---
+'shimmer-from-structure': minor
+---
+
+Lock dependencies

README.md

@@ -2,7 +2,7 @@
 
 A structure-aware skeleton generator that mirrors your rendered UI at runtime. Automatically generates responsive shimmer states with zero layout duplication. Built for React, Vue, Angular, Svelte and SolidJS.
 
-**Documentation:** [Access Full Docs](https://shimmer-from-structure-docs.vercel.app)
+**Documentation:** <a href="https://shimmer-from-structure-docs.vercel.app" target="_blank" rel="noopener noreferrer">Access Full Docs</a>
 
 ![React](https://img.shields.io/badge/React-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
 ![Vue](https://img.shields.io/badge/Vue.js-35495E?style=for-the-badge&logo=vuedotjs&logoColor=4FC08D)

docs/app/components/Header.tsx

@@ -3,6 +3,7 @@
 import Link from 'next/link';
 import { useState, useEffect } from 'react';
 import { ThemeToggle } from './ThemeToggle';
+import { formatCompactNumber } from '@/lib/formatNumber';
 
 export function Header() {
   const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -78,7 +79,7 @@ export function Header() {
                   <svg viewBox="0 0 16 16" className="w-3 h-3 fill-yellow-500" aria-hidden="true">
                     <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
                   </svg>
-                  <span>{stars.toLocaleString()}</span>
+                  <span>{formatCompactNumber(stars)}</span>
                 </div>
               )}
             </a>
@@ -162,7 +163,7 @@ export function Header() {
                   <svg viewBox="0 0 16 16" className="w-3 h-3 fill-yellow-500" aria-hidden="true">
                     <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z" />
                   </svg>
-                  <span>{stars.toLocaleString()}</span>
+                  <span>{formatCompactNumber(stars)}</span>
                 </div>
               )}
             </a>

docs/app/components/HomeContent.tsx

@@ -15,24 +15,85 @@ interface HomeContentProps {
   latestRelease: Release;
 }
 
+/** macOS-style terminal window — always rendered outside any <Shimmer> wrapper */
+function CliSnippet() {
+  return (
+    <div className="w-full max-w-lg mx-auto mb-10 px-6">
+      <div
+        className="rounded-xl overflow-hidden text-left shadow-xl"
+        style={{ backgroundColor: '#0d0d0d', border: '1px solid #2d2d2d' }}
+      >
+        {/* Traffic-light dots */}
+        <div
+          className="flex items-center gap-1.5 px-4 py-3"
+          style={{ borderBottom: '1px solid #2d2d2d' }}
+        >
+          <span
+            style={{
+              display: 'inline-block',
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              backgroundColor: '#ff5f57',
+            }}
+          />
+          <span
+            style={{
+              display: 'inline-block',
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              backgroundColor: '#febc2e',
+            }}
+          />
+          <span
+            style={{
+              display: 'inline-block',
+              width: 12,
+              height: 12,
+              borderRadius: '50%',
+              backgroundColor: '#28c840',
+            }}
+          />
+        </div>
+
+        {/* Command line */}
+        <pre
+          style={{
+            margin: 0,
+            padding: '1rem 1.25rem',
+            fontSize: '0.875rem',
+            color: '#e5e7eb',
+            overflowX: 'auto',
+            fontFamily:
+              "'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace",
+          }}
+        >
+          <code>
+            <span style={{ color: '#6b7280' }}>$</span>{' '}
+            <span style={{ color: '#14b8a6' }}>npm</span>{' '}
+            <span style={{ color: '#ffffff' }}>install shimmer-from-structure</span>
+            {'\n'}
+            <span style={{ color: '#6b7280' }}># → Zero-maintenance shimmer for your UI</span>
+          </code>
+        </pre>
+      </div>
+    </div>
+  );
+}
+
 export function HomeContent({ latestRelease }: HomeContentProps) {
   const [loading, setLoading] = useState(true);
   const { resolvedTheme } = useTheme();
 
   useEffect(() => {
-    // Show shimmer for 3 seconds on first mount
-    const timer = setTimeout(() => {
-      setLoading(false);
-    }, 3000);
-
+    const timer = setTimeout(() => setLoading(false), 3000);
     return () => clearTimeout(timer);
   }, []);
 
   const handleShowDemo = () => {
     setLoading(true);
-    setTimeout(() => {
-      setLoading(false);
-    }, 3000);
+    setTimeout(() => setLoading(false), 3000);
   };
 
   const isDark = resolvedTheme === 'dark';
@@ -42,6 +103,7 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
   return (
     <ShimmerProvider config={{ shimmerColor, backgroundColor }}>
       <div className="min-h-screen flex flex-col">
+        {/* ── Block 1: header + hero title/description ── */}
         <Shimmer loading={loading} shimmerColor={shimmerColor} backgroundColor={backgroundColor}>
           <Header />
 
@@ -57,21 +119,30 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
             </button>
           </div>
 
-          {/* Hero Section */}
-          <section className="flex-1 flex items-center justify-center px-6 py-20">
+          <section className="flex-1 flex items-center justify-center px-6 pt-20 pb-6">
             <div className="max-w-4xl mx-auto text-center">
               <h1 className="text-5xl md:text-6xl font-bold mb-6 w-fit mx-auto">
                 Shimmer From Structure
               </h1>
-              <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8">
+              <p className="text-xl md:text-2xl text-gray-600 dark:text-gray-300">
                 <span className="block w-fit mx-auto">
                   A structure-aware skeleton loader that mirrors your rendered UI at runtime.
                 </span>
                 <span className="block w-fit mx-auto">
                   Zero layout duplication. Built for modern frameworks.
                 </span>
               </p>
+            </div>
+          </section>
+        </Shimmer>
+
+        {/* ── CLI snippet — never inside a Shimmer ── */}
+        <CliSnippet />
 
+        {/* ── Block 2: CTA buttons + badges + features ── */}
+        <Shimmer loading={loading} shimmerColor={shimmerColor} backgroundColor={backgroundColor}>
+          <section className="px-6 pb-20">
+            <div className="max-w-4xl mx-auto text-center">
               <div className="flex flex-wrap gap-4 justify-center mb-12">
                 <Link
                   href="/docs/getting-started"
@@ -97,21 +168,14 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
 
               {/* Framework Badges */}
               <div className="flex flex-wrap gap-3 justify-center">
-                <span className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
-                  React
-                </span>
-                <span className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
-                  Vue
-                </span>
-                <span className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
-                  Svelte
-                </span>
-                <span className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
-                  Angular
-                </span>
-                <span className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium">
-                  SolidJS
-                </span>
+                {['React', 'Vue', 'Svelte', 'Angular', 'SolidJS'].map((fw) => (
+                  <span
+                    key={fw}
+                    className="px-4 py-2 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-full text-sm font-medium"
+                  >
+                    {fw}
+                  </span>
+                ))}
               </div>
             </div>
           </section>
@@ -190,7 +254,6 @@ export function HomeContent({ latestRelease }: HomeContentProps) {
           />
 
           {/* Quick Example */}
-
           <section className="px-6 py-20 bg-gray-50 dark:bg-gray-900/50">
             <div className="max-w-4xl mx-auto">
               <h2 className="text-3xl font-bold text-center mb-12 w-fit mx-auto">Quick Example</h2>

docs/lib/formatNumber.ts

@@ -0,0 +1,21 @@
+/**
+ * Formats a number into a compact string representation
+ * @param num - The number to format
+ * @returns Formatted string (e.g., 1000 -> "1k", 1234 -> "1.2k", 999 -> "999")
+ */
+export function formatCompactNumber(num: number): string {
+  if (num < 1000) {
+    return num.toString();
+  }
+
+  const thousands = num / 1000;
+  const rounded = Math.round(thousands * 10) / 10;
+
+  // If the rounded value is a whole number, show without decimal
+  if (rounded % 1 === 0) {
+    return `${Math.round(rounded)}k`;
+  }
+
+  // Otherwise show one decimal place
+  return `${rounded}k`;
+}

packages/shimmer-from-structure/package.json

@@ -1,6 +1,6 @@
 {
   "name": "shimmer-from-structure",
-  "version": "2.5.0",
+  "version": "2.4.5",
   "description": "Universal UI skeleton generator for React, Vue and Svelte. Auto-adapts to your component structure with zero maintenance and pixel-perfect accuracy.",
   "main": "index.js",
   "types": "index.d.ts",