51:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 52:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 53:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 54:T2705,import { useState } from "react" // assets import { CheckCircle2, RefreshCw, Terminal, Trash2 } from "lucide-react" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { ScrollArea } from "@/components/ui/scroll-area" interface LogEntry { line: number timestamp: string level: "INFO" | "WARN" | "ERROR" | "SUCCESS" message: string } const buildLogs: LogEntry[] = [ { line: 1, timestamp: "08:18:59.214", level: "INFO", message: "Initializing UIAble build pipeline (v1.1.0-next)...", }, { line: 2, timestamp: "08:18:59.230", level: "INFO", message: "Loading configuration from C:\\Users\\ADMIN\\.gemini\\config...", }, { line: 3, timestamp: "08:18:59.341", level: "INFO", message: "Scanning 67 component categories and 212 block templates.", }, { line: 4, timestamp: "08:18:59.502", level: "INFO", message: "Resolving Base UI (@base-ui/react v1.6.0) primitive definitions.", }, { line: 5, timestamp: "08:18:59.610", level: "WARN", message: "Deprecated prop 'scrollHideDelay' ignored on custom scroll-area viewport.", }, { line: 6, timestamp: "08:18:59.720", level: "INFO", message: "Building Tailwind CSS v4.3.2 stylesheet and theme tokens...", }, { line: 7, timestamp: "08:18:59.890", level: "SUCCESS", message: "✓ Generated registry indexes: components/uiable/registry.json.", }, { line: 8, timestamp: "08:19:00.120", level: "INFO", message: "Compiling TSX components for server/client boundaries...", }, { line: 9, timestamp: "08:19:00.440", level: "INFO", message: "Checking cross-browser overlay scrollbar compatibility (macOS / Win).", }, { line: 10, timestamp: "08:19:00.812", level: "INFO", message: "Transforming dynamic imports for /docs/components/scroll-area.", }, { line: 11, timestamp: "08:19:01.050", level: "WARN", message: "Bundle optimization: chunk 'shiki' size is 1.42 MB (pre-gzipped).", }, { line: 12, timestamp: "08:19:01.300", level: "INFO", message: "Running pre-flight accessibility checks on interactive ARIA nodes.", }, { line: 13, timestamp: "08:19:01.650", level: "SUCCESS", message: "✓ ARIA validation passed: 0 critical contrast or focus ring warnings.", }, { line: 14, timestamp: "08:19:02.110", level: "INFO", message: "Assembling component demos: Horizontal, Image Scroll, Bidirectional, Chat.", }, { line: 15, timestamp: "08:19:02.480", level: "INFO", message: "Optimizing SVG assets and custom ScrollArea thumb styling.", }, { line: 16, timestamp: "08:19:02.910", level: "ERROR", message: "Simulated latency check on node-prd-ap-south-02 (310ms threshold exceeded).", }, { line: 17, timestamp: "08:19:03.020", level: "INFO", message: "Retrying connection to edge telemetry pipeline... (Attempt 1 of 3).", }, { line: 18, timestamp: "08:19:03.340", level: "SUCCESS", message: "✓ Telemetry re-established. All edge workers responding normally.", }, { line: 19, timestamp: "08:19:03.780", level: "INFO", message: "Generating static parameters for 67 component routes.", }, { line: 20, timestamp: "08:19:04.120", level: "SUCCESS", message: "✓ Static generation finished. 149 modules bundled cleanly.", }, { line: 21, timestamp: "08:19:04.560", level: "INFO", message: "Finalizing production build manifest and sourcemaps.", }, { line: 22, timestamp: "08:19:04.890", level: "SUCCESS", message: "✨ BUILD COMPLETED successfully in 4.28s. Ready for deployment.", }, ] // ------------------------------ | SCROLL AREA - TERMINAL LOGS | ------------------------------ // export default function ScrollAreaTerminalLogs() { const [logs, setLogs] = useState(buildLogs) const clearLogs = () => setLogs([]) const restoreLogs = () => setLogs(buildLogs) return ( {/* Mac-style Window Controls & Header */}

bash - npm run registry:build

22 LOGS

{/* Terminal Log Scroller */}

{logs.length === 0 ? (

Terminal output cleared.

) : ( <> {logs.map((item) => (

{item.line < 10 ? `0${item.line}` : item.line} {item.timestamp} [{item.level}] {item.message}

))} {/* Interactive Prompt line at bottom */}

admin@uiable-build ~/shadcn/internal $

)}

{/* Footer bar */}

Target: win32-x64 / Node v22.1.0

Status: Idle

) } 4d:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L51",null,{"registryDependencies":["@uiable/badge","@uiable/button","@uiable/card","@uiable/scroll-area"]}]]}],["$","$L52",null,{"sourceUrl":"https://uiable.com/r/scroll-area-terminal-logs.json","proxyUrl":"https://shadcnregistry.com/r/uiable/scroll-area-terminal-logs","itemId":"@uiable/scroll-area-terminal-logs"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L53",null,{"files":[{"path":"src/components/uiable/scroll-area/scroll-area-terminal-logs.tsx","content":"$54","type":"registry:component","target":"@components/uiable/scroll-area/scroll-area-terminal-logs.tsx"}]}]]}],"$L55"]}]

Scroll Area Terminal Logs

Installation

Files

@components

Styles