# Files changed · PR \#15 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/15/diffs)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

[Expand UI directory, add notice and roadmap](https://git.cafe/screen/col/pull/15.md)

Version: 0

Head commit: b7ad72456439eceb9c52666e57c3d11b553f94aa

Base commit: 7cdac1337158531eb7c4968216831b2f213ab45e

Comparison base: 7cdac1337158531eb7c4968216831b2f213ab45e

Showing up to 20 entries from this revision. If the pull request changes, reopen the first page before continuing.

## app/layout.tsx

Status: modified; +2; −0

```diff
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist_Mono, Geist_Pixel, Inter, Pixelify_Sans } from "next/font/google";
 import { siteUrl } from "@/lib/site";
+import { SiteNotice } from "@/components/SiteNotice";
 import "./globals.css";
 
 const inter = Inter({
@@ -62,6 +63,7 @@
         className={`${inter.variable} ${pixelifySans.variable} ${geistPixel.variable} ${geistMono.variable} min-h-screen font-sans`}
       >
         {children}
+        <SiteNotice />
       </body>
     </html>
   );
```

## app/page.tsx

Status: modified; +2; −0

```diff
@@ -1,5 +1,6 @@
 import { LibraryExplorer } from "@/components/LibraryExplorer";
 import { Header } from "@/components/Header";
+import { RoadmapSection } from "@/components/RoadmapSection";
 import { SponsorsSection } from "@/components/SponsorsSection";
 import { SiteFooter } from "@/components/SiteFooter";
 import { WhatsInsideSection } from "@/components/WhatsInsideSection";
@@ -13,6 +14,7 @@
       <main className="w-full max-w-full overflow-x-hidden">
         <LibraryExplorer />
         <WhatsInsideSection />
+        <RoadmapSection />
         <SponsorsSection />
       </main>
       <SiteFooter />
```

## components/RoadmapSection.tsx

Status: added; +40; −0

```diff
@@ -1,0 +1,40 @@
+import { ArrowUpRight } from "lucide-react";
+
+const items = [
+  { title: "Dedicated pages for each library", status: "In progress", issue: 1 },
+  { title: "Better library page experience", status: "Planned", issue: 2 },
+  { title: "MCP servers and connectors", status: "Planned", issue: 4 },
+] as const;
+
+export function RoadmapSection() {
+  return (
+    <section id="roadmap" aria-labelledby="roadmap-title" className="theme-border border-b bg-[#f7f7f5] px-5 py-24 dark:bg-black sm:px-8 sm:py-32">
+      <div className="mx-auto max-w-7xl">
+        <div className="flex flex-col gap-6 sm:flex-row sm:items-end sm:justify-between">
+          <div>
+            <h2 id="roadmap-title" className="theme-text text-4xl font-semibold tracking-[-0.04em] sm:text-5xl">Roadmap</h2>
+            <p className="theme-muted mt-4 max-w-xl text-base leading-7">
+              Upcoming features and changes are tracked as tickets in the GitHub repository.
+            </p>
+          </div>
+          <a href="https://github.com/screen-gd/Col/issues" target="_blank" rel="noopener noreferrer" className="theme-text inline-flex min-h-11 w-fit items-center gap-2 border-b border-current text-sm font-medium focus-visible:outline-2 focus-visible:outline-offset-2">
+            View all issues <ArrowUpRight className="size-4" aria-hidden />
+          </a>
+        </div>
+        <ul className="theme-border mt-12 border-t">
+          {items.map(({ title, status, issue }) => (
+            <li key={issue} className="theme-border border-b">
+              <a href={`https://github.com/screen-gd/Col/issues/${issue}`} target="_blank" rel="noopener noreferrer" className="theme-text flex min-h-20 flex-wrap items-center justify-between gap-x-6 gap-y-2 py-5 focus-visible:outline-2 focus-visible:outline-offset-2">
+                <span className="text-base font-medium sm:text-lg">{title}</span>
+                <span className="flex items-center gap-4 text-sm">
+                  <span className={status === "In progress" ? "text-[#1d4ed8] dark:text-[#69a9ff]" : "theme-muted"}>{status}</span>
+                  <ArrowUpRight className="size-4" aria-hidden />
+                </span>
+              </a>
+            </li>
+          ))}
+        </ul>
+      </div>
+    </section>
+  );
+}
```

## components/SiteFooter.tsx

Status: modified; +1; −1

```diff
@@ -17,7 +17,7 @@
             <div className="grid grid-cols-2 gap-x-10 gap-y-10 sm:grid-cols-3 sm:gap-x-14">
               <FooterLinks title="Discover" links={[["All libraries", "/libraries"], ["Search", "/libraries#library-search"], ["Contributors", "/contributors"]]} />
               <FooterLinks title="Contribute" links={[["Contribute", "https://github.com/screen-gd/Col/issues/new/choose"], ["Request a library", "https://github.com/screen-gd/Col/issues/new?template=library-request.yml"], ["Request a feature", "https://github.com/screen-gd/Col/issues/new?template=feature-request.yml"], ["Report a bug", "https://github.com/screen-gd/Col/issues/new?template=bug-report.yml"]]} />
-              <FooterLinks title="Project" links={[["Docs", "/docs"], ["Sponsors", "/#sponsors"], ["GitHub", "https://github.com/screen-gd/Col"], ["Contributing", "https://github.com/screen-gd/Col/blob/main/CONTRIBUTING.md"]]} />
+              <FooterLinks title="Project" links={[["Docs", "/docs"], ["Roadmap", "/#roadmap"], ["Sponsors", "/#sponsors"], ["GitHub", "https://github.com/screen-gd/Col"], ["Contributing", "https://github.com/screen-gd/Col/blob/main/CONTRIBUTING.md"]]} />
             </div>
           </div>
 
```

## components/SiteNotice.tsx

Status: added; +47; −0

```diff
@@ -1,0 +1,47 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+const noticeKey = "col:site-notice-dismissed";
+
+export function SiteNotice() {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    try {
+      setOpen(sessionStorage.getItem(noticeKey) !== "true");
+    } catch {
+      setOpen(true);
+    }
+  }, []);
+
+  const close = () => {
+    setOpen(false);
+    try {
+      sessionStorage.setItem(noticeKey, "true");
+    } catch {
+      // The notice still closes when storage is unavailable.
+    }
+  };
+
+  if (!open) return null;
+
+  return (
+    <aside aria-labelledby="site-notice-title" className="fixed inset-x-0 bottom-0 z-[60] border-t border-zinc-200 bg-white px-5 py-5 text-black dark:border-white/20 dark:bg-black dark:text-white sm:px-8">
+      <div className="mx-auto flex max-w-7xl flex-col gap-5 sm:flex-row sm:items-center sm:justify-between">
+        <div>
+          <h2 id="site-notice-title" className="text-base font-semibold">Col is still being built.</h2>
+          <p className="mt-1 text-sm leading-6">Found an issue or bug? Please report it on GitHub.</p>
+        </div>
+        <div className="flex shrink-0 flex-wrap items-center gap-x-5 gap-y-2">
+          <a href="https://github.com/screen-gd/Col/issues/new/choose" target="_blank" rel="noopener noreferrer" className="inline-flex min-h-11 items-center justify-center bg-[#0800ff] px-4 text-sm font-semibold text-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#0800ff]">
+            Open GitHub issue
+          </a>
+          <button type="button" onClick={close} className="min-h-11 text-sm font-medium underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current">
+            Close notice
+          </button>
+        </div>
+      </div>
+    </aside>
+  );
+}
```

## components/WhatsInsideSection.tsx

Status: modified; +1; −1

```diff
@@ -92,7 +92,7 @@
     Icon: FileText,
     name: "Dedicated library pages",
     description: "Each library will have its own page, plus agent-specific setup guides.",
-    status: "Coming soon",
+    status: "In progress",
     background: detailLibrary ? (
       <div className="bento-preview absolute inset-x-5 top-5 rounded-lg border p-4">
         <div className="flex items-center gap-3">
```

## data/libraries.ts

Status: modified; +208; −8

```diff
@@ -83,11 +83,11 @@
     tags: ["animated", "text effects", "backgrounds"],
   },
   {
-    name: "Transition.dev",
+    name: "Transitions.dev",
     slug: "transition-dev",
     description:
+      "Copy-and-paste UI transitions for web apps, with a skill for coding agents.",
+    url: "https://transitions.dev",
-      "Ready-to-use animated transitions and motion primitives for modern React apps.",
-    url: "https://transition.dev",
     category: "Animation & Motion",
     stacks: ["React", "TypeScript"],
     useCases: ["Micro-interactions", "Marketing Sites"],
@@ -270,15 +270,15 @@
     tags: ["copy paste", "unstyled", "free"],
   },
   {
-    name: "Origin UI",
+    name: "coss ui",
     slug: "origin-ui",
     description:
-      "Beautiful copy-and-paste components built with Tailwind CSS and React, focused on inputs and application UI.",
+      "Copy-and-paste React components built on Base UI and Tailwind CSS, formerly Origin UI.",
+    url: "https://coss.com/ui",
-    url: "https://originui.com",
     category: "Component Library",
     stacks: ["React", "Tailwind CSS", "TypeScript"],
     useCases: ["Dashboards", "Rapid Prototyping"],
+    tags: ["origin ui", "base ui", "copy paste", "inputs", "shadcn"],
-    tags: ["copy paste", "inputs", "shadcn"],
   },
   {
     name: "Motion Primitives",
@@ -318,7 +318,7 @@
     slug: "recharts",
     description:
       "A composable, React-native charting library built on SVG components.",
-    url: "https://recharts.org",
+    url: "https://recharts.github.io",
     category: "Charts & Data Viz",
     stacks: ["React", "TypeScript"],
     useCases: ["Data Visualization", "Dashboards"],
@@ -448,4 +448,204 @@
     useCases: ["Creative & Experimental", "Micro-interactions"],
     tags: ["inspiration", "interaction gallery", "motion"],
   },
+  {
+    name: "Ark UI",
+    slug: "ark-ui",
+    description: "Headless, accessible components for React, Vue, Svelte, and Solid design systems.",
+    url: "https://ark-ui.com",
+    category: "Component Library",
+    stacks: ["React", "Vue", "Svelte", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["headless", "primitives", "solid"],
+  },
+  {
+    name: "Park UI",
+    slug: "park-ui",
+    description: "Styled, customizable design system components built with Ark UI and Panda CSS.",
+    url: "https://park-ui.com",
+    category: "Component Library",
+    stacks: ["React", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["ark ui", "panda css", "design system", "solid"],
+  },
+  {
+    name: "Headless UI",
+    slug: "headless-ui",
+    description: "Unstyled, accessible components for React and Vue from the Tailwind CSS team.",
+    url: "https://headlessui.com",
+    category: "Component Library",
+    stacks: ["React", "Vue", "Tailwind CSS", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["headless", "unstyled", "tailwind"],
+  },
+  {
+    name: "Tailwind CSS",
+    slug: "tailwind-css",
+    description: "A utility-first CSS framework for building custom interfaces directly in markup.",
+    url: "https://tailwindcss.com",
+    category: "CSS Framework",
+    stacks: ["Tailwind CSS"],
+    useCases: ["Landing Pages", "Dashboards", "Rapid Prototyping"],
+    tags: ["utilities", "css", "styling"],
+  },
+  {
+    name: "Kibo UI",
+    slug: "kibo-ui",
+    description: "Composable components and blocks distributed through a shadcn-compatible registry.",
+    url: "https://www.kibo-ui.com",
+    category: "Component Library",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Dashboards", "Rapid Prototyping"],
+    tags: ["shadcn", "registry", "copy paste"],
+  },
+  {
+    name: "shadcnblocks",
+    slug: "shadcnblocks",
+    description: "Ready-made page sections, components, and templates for shadcn/ui projects.",
+    url: "https://www.shadcnblocks.com",
+    category: "Templates & Blocks",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Landing Pages", "Marketing Sites", "Rapid Prototyping"],
+    tags: ["shadcn", "blocks", "templates"],
+  },
+  {
+    name: "Ruixen UI",
+    slug: "ruixen-ui",
+    description: "Marketing sections and components for shadcn projects, with Radix and Base UI variants.",
+    url: "https://ruixen.com",
+    category: "Templates & Blocks",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Landing Pages", "Marketing Sites"],
+    tags: ["shadcn", "registry", "base ui", "radix"],
+  },
+  {
+    name: "Fancy Components",
+    slug: "fancy-components",
+    description: "Playful React components and interactions, including physics-based Gravity effects.",
+    url: "https://www.fancycomponents.dev",
+    category: "Animation & Motion",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["gravity", "physics", "animated"],
+  },
+  {
+    name: "Anime.js",
+    slug: "anime-js",
+    description: "JavaScript animation engine for DOM, SVG, CSS, and timelines.",
+    url: "https://animejs.com",
+    category: "Animation & Motion",
+    stacks: ["Vanilla JS", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["timeline", "svg", "animation"],
+  },
+  {
+    name: "React Spring",
+    slug: "react-spring",
+    description: "Spring-based animation tools for interactive React interfaces.",
+    url: "https://react-spring.dev",
+    category: "Animation & Motion",
+    stacks: ["React", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["spring", "gestures", "animation"],
+  },
+  {
+    name: "Lenis",
+    slug: "lenis",
+    description: "Smooth scrolling library for websites and scroll-driven experiences.",
+    url: "https://lenis.dev",
+    category: "Animation & Motion",
+    stacks: ["Vanilla JS", "React", "TypeScript"],
+    useCases: ["Marketing Sites", "Creative & Experimental"],
+    tags: ["smooth scroll", "scroll animation"],
+  },
+  {
+    name: "Rive",
+    slug: "rive",
+    description: "Create interactive animations and run them across web and native apps.",
+    url: "https://rive.app",
+    category: "Animation & Motion",
+    stacks: ["React", "Vanilla JS", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["interactive animation", "state machines", "runtime"],
+  },
+  {
+    name: "dotLottie",
+    slug: "dotlottie",
+    description: "A compact animation format and players for Lottie animations.",
+    url: "https://dotlottie.io",
+    category: "Animation & Motion",
+    stacks: ["React", "Vanilla JS", "TypeScript"],
+    useCases: ["Micro-interactions", "Marketing Sites"],
+    tags: ["lottie", "animation format", "player"],
+  },
+  {
+    name: "GodUI",
+    slug: "godui",
+    description: "Open-source motion components for React and shadcn/ui projects.",
+    url: "https://godui.design",
+    category: "Animation & Motion",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["shadcn", "motion", "registry"],
+  },
+  {
+    name: "UI by Hampton",
+    slug: "hampton-ui",
+    description: "Open-source React components, blocks, and layouts for web apps.",
+    url: "https://ui.hampton.io",
+    category: "Component Library",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Dashboards", "Landing Pages"],
+    tags: ["shadcn", "blocks", "layouts"],
+  },
+  {
+    name: "DiMAAC UI",
+    slug: "dimaac-ui",
+    description: "Animated React components for galleries, cards, scrolling, and text effects.",
+    url: "https://ui.dimaac.com",
+    category: "Animation & Motion",
+    stacks: ["React", "TypeScript"],
+    useCases: ["Micro-interactions", "Creative & Experimental"],
+    tags: ["gsap", "gallery", "scroll animation"],
+  },
+  {
+    name: "Satisium UI",
+    slug: "satisium-ui",
+    description: "Animated React components for shadcn/ui projects.",
+    url: "https://ui.satisium.com/",
+    category: "Animation & Motion",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Micro-interactions", "Landing Pages"],
+    tags: ["shadcn", "gsap", "motion"],
+  },
+  {
+    name: "Wensity UI",
+    slug: "wensity-ui",
+    description: "React components, blocks, and templates installed as source through the Wensity CLI.",
+    url: "https://ui.wensity.com",
+    category: "Component Library",
+    stacks: ["React", "Tailwind CSS", "TypeScript"],
+    useCases: ["Landing Pages", "Rapid Prototyping"],
+    tags: ["blocks", "templates", "copy paste"],
+  },
+  {
+    name: "AI Canvas",
+    slug: "ai-canvas",
+    description: "A React component registry with previews and agent-assisted installation.",
+    url: "https://aicanvas.me",
+    category: "Component Library",
+    stacks: ["React", "TypeScript"],
+    useCases: ["Rapid Prototyping", "Landing Pages"],
+    tags: ["registry", "mcp", "ai"],
+  },
+  {
+    name: "CodeFronts",
+    slug: "codefronts",
+    description: "CSS components, motion examples, generators, and frontend tools.",
+    url: "https://codefronts.com",
+    category: "Templates & Blocks",
+    stacks: ["Vanilla JS", "Tailwind CSS"],
+    useCases: ["Rapid Prototyping", "Creative & Experimental"],
+    tags: ["css", "snippets", "motion"],
+  },
 ];
```