4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1a76,// react import { Fragment } from "react" // next import Link from "next/link" // shadcn import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { TextMarquee } from "@/components/ui/text-marquee" // project-imports import branding from "@/branding.json" import HoverBg from "@/components/animation/HoverBg" import BaseUi from "@/images/svg/icons/baseui" import Motion from "@/images/svg/icons/motion" import Shadcn from "@/images/svg/icons/shadcn" import Tailwind from "@/images/svg/icons/tailwind" import CodedThemeFabIcon from "@/images/svg/landing/ct-fab-logo" // assets import { IconArrowUpRight, IconBrandNextjs, IconBrandReact, IconBrandTypescript, } from "@tabler/icons-react" // ------------------------------ | CONSTANTS | ------------------------------ // const techIcons = [ { name: "React", Icon: IconBrandReact }, { name: "Next.js", Icon: IconBrandNextjs }, { name: "Shadcn", Icon: Shadcn }, { name: "Base UI", Icon: BaseUi }, { name: "Tailwind CSS", Icon: Tailwind }, { name: "Motion", Icon: Motion }, { name: "TypeScript", Icon: IconBrandTypescript }, ] const stats = [ { label: "Blocks", value: "390+" }, { label: "Templates", value: "7" }, { label: "Components", value: "790+" }, { label: "Dashboards", value: "2" }, ] // ------------------------------ | HELPERS | ------------------------------ // function StatItems() { return ( <> {stats.map((item, index) => ( {item.value} {item.label} {index < stats.length - 1 && ( )} ))} ) } // ------------------------------ | HERO | ------------------------------ // export default function Hero() { return (

{/* Mobile: scrolling marquee */}

{/* sm and up: single-row pill */}

{branding.title.startsWith("Components to") ? ( <> Components to{" "} {branding.title.replace("Components to", "").trim()} ) : ( branding.title )}

{branding.brandName} is a structured, shadcn-based UI system designed to help developers build scalable, production-ready applications faster.

{techIcons.map((item) => { const IconComponent = item.Icon return ( ) })}

{" "} Product by{" "} {" "} CodedThemes

) } 51:T1027,"use client" import { useEffect, useRef, useState } from "react" // project-imports import SparkleGrid from "@/images/svg/landing/sparkle-grid" interface HoverBgProps { className?: string } // ------------------------------ | HOVER BG | ------------------------------ // export default function HoverBg({ className = "" }: HoverBgProps) { const glowRef = useRef(null) const [isVisible, setIsVisible] = useState(false) const positionRef = useRef({ targetX: 0, targetY: 0, currentX: 0, currentY: 0, initialized: false, }) useEffect(() => { let rafId: number const el = glowRef.current const parent = el?.parentElement const handleMouseMove = (e: MouseEvent) => { if (!el || !parent) return const rect = parent.getBoundingClientRect() // Update targeted coordinates relative to the parent's bounding box positionRef.current.targetX = e.clientX - rect.left positionRef.current.targetY = e.clientY - rect.top // Snap immediately to mouse on first movement if (!positionRef.current.initialized) { positionRef.current.currentX = positionRef.current.targetX positionRef.current.currentY = positionRef.current.targetY positionRef.current.initialized = true setIsVisible(true) } } const handleMouseLeave = () => setIsVisible(false) const handleMouseEnter = () => setIsVisible(true) const animate = () => { if (el && positionRef.current.initialized) { const { targetX, targetY, currentX, currentY } = positionRef.current // Buttery-smooth easing interpolation (factor: 0.08) const nextX = currentX + (targetX - currentX) * 0.08 const nextY = currentY + (targetY - currentY) * 0.08 positionRef.current.currentX = nextX positionRef.current.currentY = nextY // Update the mask-image directly in JS for bulletproof browser compatibility const maskStyle = `radial-gradient(circle 180px at ${nextX}px ${nextY}px, black, transparent)` el.style.setProperty("-webkit-mask-image", maskStyle) el.style.setProperty("mask-image", maskStyle) } rafId = requestAnimationFrame(animate) } if (parent) { parent.addEventListener("mousemove", handleMouseMove) parent.addEventListener("mouseleave", handleMouseLeave) parent.addEventListener("mouseenter", handleMouseEnter) } rafId = requestAnimationFrame(animate) return () => { if (parent) { parent.removeEventListener("mousemove", handleMouseMove) parent.removeEventListener("mouseleave", handleMouseLeave) parent.removeEventListener("mouseenter", handleMouseEnter) } cancelAnimationFrame(rafId) } }, []) const hasOpacityClass = className .split(" ") .some( (c) => c.startsWith("opacity-") || c.startsWith("dark:opacity-") || c.includes(":opacity-") ) return (

{/* The SVG grid pattern repeated across the screen and revealed by the mask */}

) } 52:T46a,// types import type { SVGAttributes } from "react" // ------------------------------ | BASEUI ICON | ------------------------------ // export default function BaseUi(props: SVGAttributes) { return ( ) } 53:T586,// types import type { SVGAttributes } from "react" // ------------------------------ | TAILWIND ICON | ------------------------------ // export default function Tailwind(props: SVGAttributes) { return ( ) } 54:T5e7,// types import type { SVGAttributes } from "react" // ------------------------------ | BRAND LOGO — ABLE PRO | ------------------------------ // export default function AbleProLogo(props: SVGAttributes) { return ( ) } 55:T3ec0,// ------------------------------ | SVG - SPARKLE GRID | ------------------------------ // export default function SparkleGrid() { return ( ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@tabler/icons-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40tabler%2Ficons-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","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":"min-w-0 break-all text-xs font-medium","children":"@tabler/icons-react"}]]}]}]]}],["$","$L4e",null,{"namespace":"@uiable","registryDependencies":["@uiable/badge","@uiable/button","@uiable/text-marquee"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/components/uiable/blocks/landing/hero/hero.tsx","content":"$50","type":"registry:component","target":"@components/uiable/blocks/landing/hero/hero.tsx"},{"path":"src/branding.json","content":"{\n \"brandName\": \"UIAble\",\n \"title\": \"Components to Complete Interfaces\",\n \"company\": {\n \"name\": \"CodedThemes \",\n \"url\": \"https://codedthemes.com/\",\n \"socialLink\": {\n \"linkedin\": \"https://in.linkedin.com/company/codedthemes\",\n \"x\": \"https://x.com/uiable\",\n \"instagram\": \"#\",\n \"github\": \"https://github.com/codedthemes/uiable\",\n \"discord\": \"https://discord.com/invite/txPuEn5atw\",\n \"support\": \"https://codedthemes.support-hub.io/\"\n }\n },\n \"logo\": {\n \"main\": \"\",\n \"logoIcon\": \"\",\n \"logoFab\": \"\",\n \"logoWatermark\": \"\"\n }\n}\n","type":"registry:file","target":"src/branding.json"},{"path":"src/components/animation/HoverBg.tsx","content":"$51","type":"registry:component","target":"@components/animation/HoverBg.tsx"},{"path":"src/images/svg/icons/baseui.tsx","content":"$52","type":"registry:component","target":"src/images/svg/icons/baseui.tsx"},{"path":"src/images/svg/icons/motion.tsx","content":"// types\nimport type { SVGAttributes } from \"react\"\n\n// ------------------------------ | MOTION ICON | ------------------------------ //\n\nexport default function Motion(props: SVGAttributes) {\n return (\n \n \n \n )\n}\n","type":"registry:component","target":"src/images/svg/icons/motion.tsx"},{"path":"src/images/svg/icons/shadcn.tsx","content":"// types\nimport type { SVGAttributes } from \"react\"\n\n// ------------------------------ | SHADCN ICON | ------------------------------ //\n\nexport default function Shadcn(props: SVGAttributes) {\n return (\n \n \n \n )\n}\n","type":"registry:component","target":"src/images/svg/icons/shadcn.tsx"},{"path":"src/images/svg/icons/tailwind.tsx","content":"$53","type":"registry:component","target":"src/images/svg/icons/tailwind.tsx"},{"path":"src/images/svg/landing/ct-fab-logo.tsx","content":"$54","type":"registry:component","target":"src/images/svg/landing/ct-fab-logo.tsx"},{"path":"src/images/svg/landing/sparkle-grid.tsx","content":"$55","type":"registry:component","target":"src/images/svg/landing/sparkle-grid.tsx"}],"className":"h-[70svh] min-h-80"}]]}]