Built on Base UI primitives from day one

4f: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"] 50: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"] 51:T26c1,import type { ReactNode } from "react" // third-party import { cn } from "cn" // project-imports import BaseUi from "@/images/svg/icons/baseui" import Shadcn from "@/images/svg/icons/shadcn" import Tailwind from "@/images/svg/icons/tailwind" import FeatureBuild from "@/images/svg/landing/feature-build" import FeatureMotion from "@/images/svg/landing/feature-motion" import FigmaLogo from "@/images/svg/landing/figma-logo" import FigmaOrbitRing from "@/images/svg/landing/figma-orbit-ring" // assets import { IconBrandNextjs, IconBrandReact, IconBrandTypescript, } from "@tabler/icons-react" import { Sparkle } from "lucide-react" // ------------------------------ | PRIMITIVES | ------------------------------ // function Card({ children, className, }: { children: ReactNode className?: string }) { return (

{children}

) } function Title({ children }: { children: ReactNode }) { return (

{children}

) } // ------------------------------ | CARD 1 — BASE UI GRID | ------------------------------ // function BaseUiGrid() { const cols = 5 const rows = 3 const highlight = 1 * cols + 2 // centre cell return (

{Array.from({ length: cols * rows }).map((_, i) => (

{i === highlight && }

))}

) } // ------------------------------ | CARD 3 — FIGMA MCP | ------------------------------ // function FigmaOrbit() { return (

) } // ------------------------------ | CARD 4 — CODE EDITOR | ------------------------------ // function CodeEditor() { const lines: ReactNode[] = [ <> export function{" "} FeatureBlock {"() {"} , <> {" "} const{" "} {"{ state }"} ={" "} useControl {"();"} , <> {" "} <motion.div{" "} layout , <> {" "} className= "grid-item" > , <> {" "} </motion.div> , ] return (

CardPrimitive.tsx

React + TS

          {lines.map((line, i) => (
            
              {line}
            
          ))}

) } // ------------------------------ | CARD 5 — TECH BELT | ------------------------------ // const TECH_BELT_PATH = "M-40 172C20 172 55 112 185.5 112C316 112 351 172 411 172" const TECH_BELT_DURATION = 22 const TECH_BELT_RIDERS = 6 const techIcons = [ { name: "base-ui", node: , bg: "bg-neutral-950", }, { name: "typescript", node: , bg: "bg-[#3178C6]", }, { name: "nextjs", node: , bg: "bg-neutral-950", }, { name: "react", node: , bg: "bg-[#5ED3F0]", }, { name: "shadcn", node: , bg: "bg-neutral-950", }, { name: "tailwind", node: , bg: "bg-[#38BDF8]", }, ] function TechBelt() { const step = TECH_BELT_DURATION / TECH_BELT_RIDERS return (

) } // ------------------------------ | FEATURE | ------------------------------ // export default function Feature() { return (

Built on Base UI primitives from day one

Built for the way you build

Connect your agent with Figma MCP

Full control over your code. Zero lock-in.

Works with Base UI, TypeScript, Next.js, React, shadcn/ui and Tailwind CSS

Smooth animations with motion

) } 52:T3cbb,import { SVGAttributes } from "react" // ------------------------------ | DARK FAVICON | ------------------------------ // export default function DarkFav({ width = "130", height = "124", preserveAspectRatio = "none", ...props }: SVGAttributes) { return ( ) } 53:T3d01,import { SVGAttributes } from "react" // ------------------------------ | LIGHT FAVICON | ------------------------------ // export default function LightFav({ width = "130", height = "124", preserveAspectRatio = "none", ...props }: SVGAttributes) { return ( ) } 54:T46a,// types import type { SVGAttributes } from "react" // ------------------------------ | BASEUI ICON | ------------------------------ // export default function BaseUi(props: SVGAttributes) { return ( ) } 55:T586,// types import type { SVGAttributes } from "react" // ------------------------------ | TAILWIND ICON | ------------------------------ // export default function Tailwind(props: SVGAttributes) { return ( ) } 56:Ta42b,// types import type { SVGAttributes } from "react" // ------------------------------ | FEATURE BUILD | ------------------------------ // export default function FeatureBuild(props: SVGAttributes) { return ( ) } 57:Ta1f,// types import type { SVGAttributes } from "react" // project-imports import DarkFav from "@/images/brand/dark-fav" import LightFav from "@/images/brand/light-fav" // ------------------------------ | FEATURE — SMOOTH ANIMATIONS WITH MOTION | ------------------------------ // const FIGMA_CURVE = "C68.4968 143.61 260.141 -19.547 215.92 192.498C196.882 283.789 33.6447 159.574 236.423 159.574C305.742 159.574 326.244 177.533 370.667 203.972" const MOTION_PATH = `M-58 152L-0.333496 149.098${FIGMA_CURVE}L424 234` const VISIBLE_PATH = `M-0.333496 149.098${FIGMA_CURVE}` /** seconds for one full loop — bump up to slow the whole thing down */ const MOTION_DURATION = 7 export default function FeatureMotion(props: SVGAttributes) { return ( ) } function Favicon() { return (

) } 58:Ta97,// types import type { SVGAttributes } from "react" // ------------------------------ | FEATURE — FIGMA ORBIT RING | ------------------------------ // // Orbit ring — exact path exported from Figma (Ellipse 71). export default function FigmaOrbitRing(props: SVGAttributes) { return ( ) } 4e:["$","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"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-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":"lucide-react"}]]}]}]]}],["$","$L4f",null,{"namespace":"@uiable","registryDependencies":[]}]]}],null]}],["$","$L50",null,{"files":[{"path":"src/components/uiable/blocks/landing/feature/Feature.tsx","content":"$51","type":"registry:component","target":"@components/uiable/blocks/landing/feature/Feature.tsx"},{"path":"src/images/brand/dark-fav.tsx","content":"$52","type":"registry:component","target":"src/images/brand/dark-fav.tsx"},{"path":"src/images/brand/light-fav.tsx","content":"$53","type":"registry:component","target":"src/images/brand/light-fav.tsx"},{"path":"src/images/svg/icons/baseui.tsx","content":"$54","type":"registry:component","target":"src/images/svg/icons/baseui.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":"$55","type":"registry:component","target":"src/images/svg/icons/tailwind.tsx"},{"path":"src/images/svg/landing/feature-build.tsx","content":"$56","type":"registry:component","target":"src/images/svg/landing/feature-build.tsx"},{"path":"src/images/svg/landing/feature-motion.tsx","content":"$57","type":"registry:component","target":"src/images/svg/landing/feature-motion.tsx"},{"path":"src/images/svg/landing/figma-logo.tsx","content":"// types\nimport type { SVGAttributes } from \"react\"\n\n// ------------------------------ | FEATURE — FIGMA LOGO | ------------------------------ //\n\nexport default function FigmaLogo(props: SVGAttributes) {\n return (\n \n )\n}\n","type":"registry:component","target":"src/images/svg/landing/figma-logo.tsx"},{"path":"src/images/svg/landing/figma-orbit-ring.tsx","content":"$58","type":"registry:component","target":"src/images/svg/landing/figma-orbit-ring.tsx"}],"className":"h-[70svh] min-h-80"}]]}]