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

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

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

Visibility: public

[Add twelve libraries and refresh search and social preview](https://git.cafe/screen/col/pull/51.md)

Version: 0

Head commit: a2feef23f622e9ed916deae265d9978b728aefd2

Base commit: 8f997d90f5cc208f34ba35aee0dfc4e5b805eca2

Comparison base: 60fa90ea3e7900fd4ee2e6dfc906c6b64be13186

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

## CONTRIBUTING.md

Status: modified; +1; −0

```diff
@@ -28,6 +28,7 @@
 
 - Use the official project name and canonical URL.
 - Use a unique lowercase kebab-case `slug`.
+- Set `addedAt` to the current ISO timestamp, including its timezone. The "new additions" label expires after seven days. Keep this timestamp unchanged when editing an existing library.
 - Write a factual one-sentence description.
 - Select existing category, stack, and use-case values where possible.
 - Add only useful search tags; do not repeat every field.
```

## README.md

Status: modified; +3; −0

```diff
@@ -117,6 +117,7 @@
 {
   name: "Library name",
   slug: "library-name",
+  addedAt: "2026-10-03T12:00:00Z", // Replace with the current ISO timestamp.
   description: "A factual one-sentence description of what the library provides.",
   url: "https://library.example",
   category: "Component Library",
@@ -128,6 +129,8 @@
 
 The `slug` must be unique, lowercase, and kebab-case. See [CONTRIBUTING.md](CONTRIBUTING.md) for the full checklist.
 
+Set `addedAt` when the library joins the catalog. It shows the "new additions" label for seven days; editing an existing entry should keep its original timestamp.
+
 ### Adding components
 
 Components live in [`data/components.ts`](data/components.ts), keyed by the owning library's `slug`, so searching "date picker" or "stroke text" finds the libraries that document it and links straight to that component's page.
```

## app/globals.css

Status: modified; +38; −1

```diff
@@ -1581,6 +1581,43 @@
   transition: transform 260ms cubic-bezier(.32,.72,0,1), box-shadow 260ms ease;
 }
 .lib-row-logo { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--lib-field); box-shadow: var(--lib-depth-1); }
+:root { --lib-new-accent: #fffff0; --lib-new-ink: #202020; }
+html.light { --lib-new-accent: #202020; --lib-new-ink: #fffff0; }
+html.light .lib-card > .new-addition-label { --lib-new-accent: #fffff0; --lib-new-ink: #202020; }
+.new-addition-label {
+  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px;
+  border-radius: 6px; background: var(--lib-new-accent); color: var(--lib-new-ink);
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-new-ink) 15%, transparent), 0 1px 3px rgba(0,0,0,.2);
+  font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap;
+}
+.new-addition-label::before { content: ""; width: 5px; height: 5px; flex-shrink: 0; border-radius: 50%; background: currentColor; }
+.lib-card > .new-addition-label {
+  position: absolute; top: 12px; right: 12px; z-index: 1; pointer-events: none;
+  transition: transform 180ms cubic-bezier(.32,.72,0,1);
+}
+.lib-card:hover > .new-addition-label,
+.lib-card:focus-within > .new-addition-label,
+.lib-card:has(.lib-card-save[aria-pressed="true"]) > .new-addition-label { transform: translateX(-38px); }
+.lib-card:focus-within .lib-card-save { opacity: 1; }
+@media (hover: none) { .lib-card > .new-addition-label { transform: translateX(-38px); } }
+@media (prefers-reduced-motion: reduce) {
+  .lib-card > .new-addition-label, .lib-card .lib-card-save { transition: none; }
+}
+.lib-row-actions > .new-addition-label { margin-right: 8px; }
+.ld-side-card > .new-addition-label { position: absolute; top: 12px; right: 12px; z-index: 1; pointer-events: none; }
+/* The label's expiry also removes the tint, including on pages left open. */
+html .app-frame :is(.lib-card, .lib-row, .ld-side-card):has(> .new-addition-label),
+html .app-frame .lib-row:has(.lib-row-actions > .new-addition-label) {
+  background: color-mix(in srgb, var(--lib-new-accent) 9%, var(--lib-surface));
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lib-new-accent) 28%, transparent), var(--lib-depth-2);
+}
+html .app-frame .lib-card:has(> .new-addition-label):hover {
+  background: color-mix(in srgb, var(--lib-new-accent) 12%, var(--lib-surface-hover));
+}
+html .app-frame .lib-card:has(> .new-addition-label):has(.lib-card-name:focus-visible),
+html .app-frame .lib-row:has(.lib-row-actions > .new-addition-label):has(.lib-row-name:focus-visible) {
+  outline: 2px solid var(--lib-focus); outline-offset: 2px;
+}
 .lib-row-id { display: grid; min-width: 0; line-height: 1.25; }
 .lib-row-name { overflow: hidden; color: var(--lib-text); font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; outline: none; }
 /* The name link covers the whole row, so the row is one click target. */
@@ -2254,7 +2291,7 @@
 .ld-related-row:is(:hover, :focus-visible) svg { transform: translateX(2px); }
 .ld-related-row:is(:hover, :focus-visible) .ld-related-name { text-decoration: underline; text-decoration-color: var(--lib-text-3); text-underline-offset: 4px; }
 .ld-side { position: sticky; top: calc(var(--ld-top) + var(--ld-back-height) + var(--ld-layout-gap)); }
-.ld-side-card { overflow: hidden; border-radius: 16px; background: var(--lib-surface); box-shadow: var(--lib-depth-2); }
+.ld-side-card { position: relative; overflow: hidden; border-radius: 16px; background: var(--lib-surface); box-shadow: var(--lib-depth-2); }
 .ld-side-media { margin: 0; overflow: hidden; aspect-ratio: 1200 / 630; border-radius: 0 0 12px 12px; background: var(--lib-media); box-shadow: inset 0 -1px 0 var(--lib-edge); }
 .ld-side-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--frame-ease); }
 .ld-side-card:hover .ld-side-media img { transform: scale(1.03); }
```

## components/LibraryCard.tsx

Status: modified; +3; −0

```diff
@@ -9,6 +9,7 @@
 import { hostname } from "@/lib/utils";
 import { libraryPath } from "@/lib/site";
 import { libraryPreviews } from "@/data/library-previews";
+import { NewAdditionLabel } from "./NewAdditionLabel";
 
 interface LibraryCardProps {
   library: Library;
@@ -47,6 +48,7 @@
           }
           className="lib-card-media"
         />
+        <NewAdditionLabel addedAt={library.addedAt} />
         <button type="button" onClick={handleToggleSaved} aria-label={saved ? `Remove ${library.name} from saved` : `Save ${library.name}`} aria-pressed={saved} className="library-save lib-card-save">
           <Heart fill={saved ? "currentColor" : "none"} aria-hidden />
         </button>
@@ -103,6 +105,7 @@
         )}
       </div>
       <div className="lib-row-actions">
+        <NewAdditionLabel addedAt={library.addedAt} />
         <button type="button" onClick={handleToggleSaved} aria-label={saved ? `Remove ${library.name} from saved` : `Save ${library.name}`} aria-pressed={saved} className="library-save lib-row-action">
           <Heart fill={saved ? "currentColor" : "none"} aria-hidden />
         </button>
```

## components/LibraryDetail.tsx

Status: modified; +2; −0

```diff
@@ -10,6 +10,7 @@
 import { AgentPrompt, InstallTabs } from "./LibraryDetailParts";
 import { LibraryLogo } from "./LibraryLogo";
 import { categoryIcons } from "./MaskIcon";
+import { NewAdditionLabel } from "./NewAdditionLabel";
 
 interface LibraryDetailProps {
   library: Library;
@@ -164,6 +165,7 @@
 
         <aside className="ld-side ld-reveal" style={reveal(2)} aria-label={`About ${library.name}`}>
           <div className="ld-side-card">
+            <NewAdditionLabel addedAt={library.addedAt} />
             {preview && (
               <figure className="ld-side-media">
                 {/* eslint-disable-next-line @next/next/no-img-element */}
```

## components/NewAdditionLabel.tsx

Status: added; +24; −0

```diff
@@ -1,0 +1,24 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { isNewAddition, NEW_ADDITION_DURATION_MS } from "@/lib/new-additions";
+
+/** Check in the browser so cached static pages never keep an expired label. */
+export function NewAdditionLabel({ addedAt }: { addedAt?: string }) {
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const now = Date.now();
+    const active = isNewAddition(addedAt, now);
+    setVisible(active);
+    if (!active || !addedAt) return;
+
+    const timer = window.setTimeout(
+      () => setVisible(false),
+      Date.parse(addedAt) + NEW_ADDITION_DURATION_MS - now,
+    );
+    return () => window.clearTimeout(timer);
+  }, [addedAt]);
+
+  return visible ? <span className="new-addition-label">New additions</span> : null;
+}
```

## components/SiteChrome.tsx

Status: modified; +7; −2

```diff
@@ -10,6 +10,7 @@
 import { createDirectorySearch } from "@/lib/directory";
 import { libraryPath } from "@/lib/site";
 import { directoryQuery, useDirectoryQuery } from "@/lib/directory-query";
+import styles from "./SiteSearch.module.css";
 
 const compactNumber = new Intl.NumberFormat("en", { notation: "compact", maximumFractionDigits: 1 });
 const searchDirectory = createDirectorySearch(libraries, componentIndex);
@@ -94,8 +95,10 @@
           }}
           placeholder="Search libraries"
           aria-label="Search libraries or components"
+          aria-description="Press slash to focus search"
+          aria-keyshortcuts="/"
         />
-        <kbd aria-hidden="true">/</kbd>
+        <span className={styles.shortcut} title="Press / to search" aria-hidden="true">Press <kbd>/</kbd></span>
       </form>
     );
   }
@@ -141,8 +144,10 @@
         }}
         placeholder="Search"
         aria-label="Search libraries or components"
+        aria-description="Press slash to focus search"
+        aria-keyshortcuts="/"
       />
-      <kbd aria-hidden="true">/</kbd>
+      <span className={styles.shortcut} title="Press / to search" aria-hidden="true">Press <kbd>/</kbd></span>
       {open && query.trim() && (
         <div className="site-search-results" aria-label="Library search results">
           {results.length ? (
```

## components/SiteSearch.module.css

Status: added; +23; −0

```diff
@@ -1,0 +1,23 @@
+.shortcut {
+  display: inline-flex;
+  align-items: center;
+  flex: 0 0 auto;
+  gap: 4px;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--lib-text-2);
+}
+
+:global(.app-frame .site-search) .shortcut kbd {
+  color: inherit;
+}
+
+:global(.site-search:focus-within) .shortcut {
+  opacity: 0;
+}
+
+@media (max-width: 760px), (any-pointer: coarse) {
+  .shortcut {
+    display: none;
+  }
+}
```

## data/components.ts

Status: modified; +94; −0

```diff
@@ -36,6 +36,100 @@
 export type ComponentIndex = Record<string, LibraryComponent[]>;
 
 export const componentIndex: ComponentIndex = {
+  "intent-ui": [
+    { name: "Button", url: "https://intentui.com/docs/components/buttons/button" },
+    { name: "Combo Box", url: "https://intentui.com/docs/components/pickers/combo-box" },
+    { name: "Text Field", url: "https://intentui.com/docs/components/forms/text-field" },
+    { name: "Dialog", url: "https://intentui.com/docs/components/overlays/dialog" },
+    { name: "Table", url: "https://intentui.com/docs/components/collections/table" },
+    { name: "Date Picker", url: "https://intentui.com/docs/components/date-and-time/date-picker" },
+  ],
+  "reui": [
+    { name: "Data Grid", url: "https://reui.io/docs/components/base/data-grid" },
+    { name: "Kanban", url: "https://reui.io/docs/components/base/kanban" },
+    { name: "Gantt", url: "https://reui.io/docs/components/base/gantt" },
+    { name: "File Upload", url: "https://reui.io/docs/components/base/file-upload" },
+    { name: "Number Field", url: "https://reui.io/docs/components/base/number-field" },
+    { name: "Tree", url: "https://reui.io/docs/components/base/tree" },
+  ],
+  "elevenlabs-ui": [
+    { name: "Orb", url: "https://ui.elevenlabs.io/docs/components/orb" },
+    { name: "Audio Player", url: "https://ui.elevenlabs.io/docs/components/audio-player" },
+    { name: "Waveform", url: "https://ui.elevenlabs.io/docs/components/waveform" },
+    { name: "Live Waveform", url: "https://ui.elevenlabs.io/docs/components/live-waveform" },
+    { name: "Conversation", url: "https://ui.elevenlabs.io/docs/components/conversation" },
+    { name: "Voice Button", url: "https://ui.elevenlabs.io/docs/components/voice-button" },
+  ],
+  "inspira-ui": [
+    { name: "Breathing Text", url: "https://inspira-ui.com/docs/en/components/text-animations/breathing-text" },
+    { name: "Card Stack", url: "https://inspira-ui.com/docs/en/components/cards/card-stack" },
+    { name: "Circular Gallery", url: "https://inspira-ui.com/docs/en/components/miscellaneous/circular-gallery" },
+    { name: "Cube Carousel", url: "https://inspira-ui.com/docs/en/components/cards/cube-carousel" },
+    { name: "Ribbon Background", url: "https://inspira-ui.com/docs/en/components/backgrounds/ribbon-background" },
+    { name: "Path Marquee", url: "https://inspira-ui.com/docs/en/components/miscellaneous/path-marquee" },
+  ],
+  "reka-ui": [
+    { name: "Accordion", url: "https://reka-ui.com/docs/components/accordion" },
+    { name: "Dialog", url: "https://reka-ui.com/docs/components/dialog" },
+    { name: "Popover", url: "https://reka-ui.com/docs/components/popover" },
+    { name: "Combobox", url: "https://reka-ui.com/docs/components/combobox" },
+    { name: "Select", url: "https://reka-ui.com/docs/components/select" },
+    { name: "Tooltip", url: "https://reka-ui.com/docs/components/tooltip" },
+  ],
+  "melt-ui": [
+    { name: "Accordion", url: "https://next.melt-ui.com/components/accordion/" },
+    { name: "Dialog", url: "https://next.melt-ui.com/components/dialog/" },
+    { name: "Combobox", url: "https://next.melt-ui.com/components/combobox/" },
+    { name: "PIN Input", url: "https://next.melt-ui.com/components/pin-input/" },
+    { name: "Toggle", url: "https://next.melt-ui.com/components/toggle/" },
+    { name: "Toaster", url: "https://next.melt-ui.com/components/toaster/" },
+  ],
+  "zard-ui": [
+    { name: "Button", url: "https://www.zardui.com/docs/components/button" },
+    { name: "Card", url: "https://www.zardui.com/docs/components/card" },
+    { name: "Dialog", url: "https://www.zardui.com/docs/components/dialog" },
+    { name: "Combobox", url: "https://www.zardui.com/docs/components/combobox" },
+    { name: "Date Picker", url: "https://www.zardui.com/docs/components/date-picker" },
+    { name: "Table", url: "https://www.zardui.com/docs/components/table" },
+  ],
+  "spartan-ui": [
+    { name: "Button", url: "https://spartan.ng/components/button" },
+    { name: "Dialog", url: "https://spartan.ng/components/dialog" },
+    { name: "Data Table", url: "https://spartan.ng/components/data-table" },
+    { name: "Combobox", url: "https://spartan.ng/components/combobox" },
+    { name: "Calendar", url: "https://spartan.ng/components/calendar" },
+    { name: "Select", url: "https://spartan.ng/components/select" },
+  ],
+  "corvu": [
+    { name: "Dialog", url: "https://corvu.dev/docs/primitives/dialog/" },
+    { name: "Drawer", url: "https://corvu.dev/docs/primitives/drawer/" },
+    { name: "Resizable", url: "https://corvu.dev/docs/primitives/resizable/" },
+    { name: "Calendar", url: "https://corvu.dev/docs/primitives/calendar/" },
+    { name: "OTP Field", url: "https://corvu.dev/docs/primitives/otp-field/" },
+    { name: "Accordion", url: "https://corvu.dev/docs/primitives/accordion/" },
+  ],
+  "starwind-ui": [
+    { name: "Button", url: "https://starwind.dev/docs/components/button/" },
+    { name: "Dialog", url: "https://starwind.dev/docs/components/dialog/" },
+    { name: "Accordion", url: "https://starwind.dev/docs/components/accordion/" },
+    { name: "Tabs", url: "https://starwind.dev/docs/components/tabs/" },
+    { name: "Select", url: "https://starwind.dev/docs/components/select/" },
+    { name: "Carousel", url: "https://starwind.dev/docs/components/carousel/" },
+  ],
+  "webcoreui": [
+    { name: "Accordion", url: "https://webcoreui.dev/docs/accordion" },
+    { name: "Alert", url: "https://webcoreui.dev/docs/alert" },
+    { name: "Button", url: "https://webcoreui.dev/docs/button" },
+    { name: "Data Table", url: "https://webcoreui.dev/docs/data-table" },
+  ],
+  "web-awesome": [
+    { name: "Button", url: "https://webawesome.com/docs/components/button/" },
+    { name: "Input", url: "https://webawesome.com/docs/components/input/" },
+    { name: "Dialog", url: "https://webawesome.com/docs/components/dialog/" },
+    { name: "Drawer", url: "https://webawesome.com/docs/components/drawer/" },
+    { name: "Select", url: "https://webawesome.com/docs/components/select/" },
+    { name: "Tab Group", url: "https://webawesome.com/docs/components/tab-group/" },
+  ],
   // 209 components
   "react-bits": [
       { name: "ASCII Text", url: "https://www.reactbits.dev/text-animations/ascii-text" },
```

## data/libraries.ts

Status: modified; +136; −0

```diff
@@ -9,6 +9,8 @@
  * - `url` must be the library's primary website or docs.
  * - Pick from the existing Category / Stack / UseCase values when possible.
  * - Keep descriptions to one or two short sentences.
+ * - Set `addedAt` to an ISO timestamp when adding a library. Its new additions
+ *   label expires seven days after that timestamp.
  *
  * Verified components live separately in `data/components.ts`, keyed by this
  * file's `slug`. They grow on a different cadence: libraries arrive rarely,
@@ -70,6 +72,8 @@
   useCases: UseCase[];
   /** Free-form tags for extra search keywords. */
   tags?: string[];
+  /** When this library joined the catalog, used for the seven-day new label. */
+  addedAt?: string;
 }
 
 export const libraries: Library[] = [
@@ -661,6 +665,138 @@
     useCases: ["Rapid Prototyping", "Creative & Experimental"],
     tags: ["css", "snippets", "motion"],
   },
+  {
+    name: "Intent UI",
+    slug: "intent-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Accessible React components built with React Aria and Tailwind CSS, installed as editable source.",
+    url: "https://intentui.com",
+    category: "Component Library",
+    stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
+    tags: ["react aria", "copy paste", "registry", "justd"],
+  },
+  {
+    name: "ReUI",
+    slug: "reui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "React components and patterns for shadcn/ui projects, with Base UI and Radix UI variants.",
+    url: "https://reui.io",
+    category: "Component Library",
+    stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
+    useCases: ["Dashboards", "Data Visualization", "Rapid Prototyping"],
+    tags: ["shadcn", "registry", "base ui", "radix", "data grid"],
+  },
+  {
+    name: "ElevenLabs UI",
+    slug: "elevenlabs-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "React components for audio players, waveforms, transcription, and voice agent interfaces.",
+    url: "https://ui.elevenlabs.io",
+    category: "Component Library",
+    stacks: ["React", "Next.js", "Tailwind CSS", "TypeScript"],
+    useCases: ["Rapid Prototyping", "Micro-interactions", "Creative & Experimental"],
+    tags: ["audio", "voice agents", "waveform", "ai", "shadcn"],
+  },
+  {
+    name: "Inspira UI",
+    slug: "inspira-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Animated Vue and Nuxt components for text effects, backgrounds, and interactive websites.",
+    url: "https://inspira-ui.com",
+    category: "Animation & Motion",
+    stacks: ["Vue", "Tailwind CSS", "TypeScript"],
+    useCases: ["Landing Pages", "Marketing Sites", "Creative & Experimental"],
+    tags: ["nuxt", "animated", "copy paste", "motion-v", "shadcn-vue"],
+  },
+  {
+    name: "Reka UI",
+    slug: "reka-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Unstyled, accessible Vue primitives for custom design systems, formerly Radix Vue.",
+    url: "https://reka-ui.com",
+    category: "Component Library",
+    stacks: ["Vue", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["nuxt", "headless", "primitives", "radix vue", "unstyled"],
+  },
+  {
+    name: "Melt UI",
+    slug: "melt-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Headless, accessible builders and component wrappers for Svelte 5, using the next-generation melt package.",
+    url: "https://next.melt-ui.com",
+    category: "Component Library",
+    stacks: ["Svelte", "SvelteKit", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["headless", "builders", "svelte 5", "runes", "unstyled"],
+  },
+  {
+    name: "Zard UI",
+    slug: "zard-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Accessible Angular components styled with Tailwind CSS and copied into your project through a CLI.",
+    url: "https://www.zardui.com",
+    category: "Component Library",
+    stacks: ["Angular", "Tailwind CSS", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
+    tags: ["shadcn", "copy paste", "angular cdk", "standalone", "analog"],
+  },
+  {
+    name: "Spartan UI",
+    slug: "spartan-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Accessible Angular primitives with editable Tailwind styles, split into brain behavior and helm components.",
+    url: "https://spartan.ng",
+    category: "Component Library",
+    stacks: ["Angular", "Tailwind CSS", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
+    tags: ["spartan-ng", "brain", "helm", "headless", "copy paste", "analog"],
+  },
+  {
+    name: "Corvu",
+    slug: "corvu",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Unstyled, accessible SolidJS primitives for overlays, calendars, drawers, and resizable layouts.",
+    url: "https://corvu.dev",
+    category: "Component Library",
+    stacks: ["SolidJS", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards"],
+    tags: ["headless", "primitives", "unstyled", "solid", "resizable"],
+  },
+  {
+    name: "Starwind UI",
+    slug: "starwind-ui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Editable Tailwind components for Astro and React, with Vue and Svelte adapters in public beta.",
+    url: "https://starwind.dev",
+    category: "Component Library",
+    stacks: ["Astro", "React", "Next.js", "Vue", "Svelte", "SvelteKit", "Tailwind CSS", "TypeScript"],
+    useCases: ["Accessibility-first", "Landing Pages", "Rapid Prototyping"],
+    tags: ["copy paste", "cli", "portable runtime", "vue beta", "svelte beta"],
+  },
+  {
+    name: "WebcoreUI",
+    slug: "webcoreui",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Configurable components, blocks, and templates for Astro, Svelte, and React, styled with Sass.",
+    url: "https://webcoreui.dev",
+    category: "Component Library",
+    stacks: ["Astro", "Svelte", "React", "TypeScript"],
+    useCases: ["Landing Pages", "Marketing Sites", "Rapid Prototyping"],
+    tags: ["sass", "scss", "themes", "blocks", "multi framework"],
+  },
+  {
+    name: "Web Awesome Core",
+    slug: "web-awesome",
+    addedAt: "2026-10-03T23:44:09+04:00",
+    description: "Framework-independent web components from Font Awesome, with built-in themes and React wrappers.",
+    url: "https://webawesome.com",
+    category: "Component Library",
+    stacks: ["Vanilla JS", "React", "Vue", "Angular", "Svelte", "TypeScript"],
+    useCases: ["Accessibility-first", "Dashboards", "Rapid Prototyping"],
+    tags: ["web components", "custom elements", "font awesome", "shoelace", "themes"],
+  },
 ];
 
 /** Looks up a library by slug, throwing so a stale hard-coded slug fails the build instead of rendering a broken link. */
```

## data/library-details/corvu.ts

Status: added; +45; −0

```diff
@@ -1,0 +1,45 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://corvu.dev/docs/installation/",
+  repoUrl: "https://github.com/corvudev/corvu",
+  preview: {
+    src: "https://corvu.dev/banner.jpg",
+    alt: "Corvu official preview",
+  },
+  install: [
+    { label: "All primitives (npm)", command: "npm install corvu" },
+    { label: "All primitives (pnpm)", command: "pnpm add corvu" },
+    { label: "Dialog only", command: "npm install @corvu/dialog" },
+    { label: "Drawer only", command: "npm install @corvu/drawer" },
+  ],
+  gettingStarted: [
+    "Use an existing SolidJS app. Install `corvu` for the full collection, or a separate `@corvu/<primitive>` package for only the primitive you need; choose one installation approach.",
+    "For a dialog, import `Dialog` from `corvu/dialog`, or from `@corvu/dialog` when using the separate package. Compose the root, trigger, portal, overlay, content, label, description, and close control following https://corvu.dev/docs/primitives/dialog/.",
+    "Supply styles yourself. Corvu exposes data attributes for component state and accepts the app's CSS or utility classes; it does not install a theme.",
+    "Tailwind CSS v4 can target data attributes directly, so the optional `@corvu/tailwind` plugin is unnecessary there. The installation guide also documents an UnoCSS preset for projects already using UnoCSS.",
+    "Keep reactive options connected to Solid signals and follow the state and dynamic-component guides. Preserve labels, descriptions, focus management, and dismissal behavior when building styled wrappers.",
+  ],
+  agentPrompt: `Add Corvu (https://corvu.dev) to this existing SolidJS project.
+
+Corvu supplies unstyled, accessible UI primitives. It can be installed as the corvu collection or as separate @corvu packages.
+
+Prerequisites:
+- An existing SolidJS application and a working styling system. Inspect its package manager and reactive state conventions.
+
+Steps:
+1. Read https://corvu.dev/docs/installation/ and the requested primitive's page. Consult the state and styling guides before creating wrappers.
+2. Install npm install corvu for the collection, or npm install @corvu/dialog for the dialog-only example. Do not add both for the same primitive.
+3. Import Dialog from corvu/dialog or @corvu/dialog to match the chosen package. Follow the documented anatomy: root, Trigger, Portal, Overlay, Content, Label, Description, and Close.
+4. Style each part with the app's existing CSS or utilities and documented data attributes. Tailwind CSS v4 supports those attributes directly, so do not add the older Tailwind plugin unnecessarily.
+5. Wire controlled state using Solid signals and preserve reactivity when passing options or accessing context. Keep the primitive's focus, dismissal, labels, and keyboard behavior intact.
+6. Integrate the component into an existing screen, then run the project's typecheck and build.
+
+Corvu is not a React library. Use the SolidJS APIs shown in its documentation rather than translating React hooks.`,
+  pricing: {
+    model: "free",
+    summary: "Corvu primitives and utilities are free and open source under MIT.",
+    license: "MIT",
+    source: "https://github.com/corvudev/corvu",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/elevenlabs-ui.ts

Status: added; +46; −0

```diff
@@ -1,0 +1,46 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://ui.elevenlabs.io/docs",
+  repoUrl: "https://github.com/elevenlabs/ui",
+  preview: {
+    src: "https://github.com/user-attachments/assets/a5b73bfc-b0a3-4b4e-8915-f90a086c5723",
+    alt: "ElevenLabs UI official preview",
+  },
+  registrySetup: {
+    description: "Use a React project with Tailwind CSS and shadcn/ui initialized. The official Next.js setup requires Node.js 18 or later, subject to the framework's own minimum. Install a component with the ElevenLabs CLI or its direct shadcn registry URL; no named registry configuration is required for the URL command.",
+  },
+  install: [
+    { label: "Initialize shadcn/ui if needed", command: "npx shadcn@latest init" },
+    { label: "Add an orb with the ElevenLabs CLI", command: "npx @elevenlabs/cli@latest components add orb" },
+    { label: "Add an orb with shadcn", command: "npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json" },
+  ],
+  gettingStarted: [
+    "Start with React, Tailwind CSS, and shadcn/ui configured. The repository documents a Next.js setup with Node.js 18 or later; the app framework may require a newer Node.js version.",
+    "Install one component with `npx @elevenlabs/cli@latest components add orb`, or use the direct shadcn URL `https://ui.elevenlabs.io/r/orb.json`. Both approaches copy source and install the component's dependencies.",
+    "Import from the generated files and use the matching page at https://ui.elevenlabs.io/docs/components/orb. Audio, waveform, microphone, and agent components have different props and runtime needs.",
+    "Render browser-dependent components within the app's client boundary. Microphone features need user permission, and any ElevenLabs API integration needs its own authentication and service setup; the UI source alone does not connect a live agent.",
+  ],
+  agentPrompt: `Add ElevenLabs UI (https://ui.elevenlabs.io) to this existing React project.
+
+This MIT-licensed source registry provides audio players, waveforms, microphone controls, transcription, and voice agent interfaces on top of shadcn/ui.
+
+Prerequisites:
+- React, Tailwind CSS, and shadcn/ui configured. The repository's Next.js guide specifies Node.js 18+, but honor the app framework's minimum too.
+- Inspect components.json and the current component directory before installing.
+
+Steps:
+1. Read https://ui.elevenlabs.io/docs and the matching component page. Installation commands are also documented in https://github.com/elevenlabs/ui.
+2. Initialize shadcn/ui only if missing. Add one requested component with npx @elevenlabs/cli@latest components add orb, or npx shadcn@latest add https://ui.elevenlabs.io/r/orb.json for the orb example. Use the catalog's exact name for other components.
+3. Inspect the copied source and dependency changes, then import from its actual generated path. Keep interactive audio and visualization code inside the framework's client boundary.
+4. Wire the component to real project state. For audio or microphone features, handle permissions and cleanup. For live agent or transcription services, follow that component's authentication guide and keep private API keys on the server.
+5. Preserve existing design tokens and accessibility behavior. Run the project's typecheck and build.
+
+The UI components are free; usage of external ElevenLabs services has separate pricing and credentials. Do not install the entire registry for a single requested component.`,
+  pricing: {
+    model: "free",
+    summary: "The UI components are free under MIT; ElevenLabs API and agent services have separate usage pricing.",
+    license: "MIT",
+    source: "https://github.com/elevenlabs/ui/blob/main/LICENSE.md",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/index.ts

Status: modified; +24; −0

```diff
@@ -55,6 +55,18 @@
 import wensity_ui from "./wensity-ui";
 import ai_canvas from "./ai-canvas";
 import codefronts from "./codefronts";
+import intent_ui from "./intent-ui";
+import reui from "./reui";
+import elevenlabs_ui from "./elevenlabs-ui";
+import inspira_ui from "./inspira-ui";
+import reka_ui from "./reka-ui";
+import melt_ui from "./melt-ui";
+import zard_ui from "./zard-ui";
+import spartan_ui from "./spartan-ui";
+import corvu from "./corvu";
+import starwind_ui from "./starwind-ui";
+import webcoreui from "./webcoreui";
+import web_awesome from "./web-awesome";
 
 export type { LibraryDetails };
 
@@ -122,4 +134,16 @@
   "wensity-ui": wensity_ui,
   "ai-canvas": ai_canvas,
   "codefronts": codefronts,
+  "intent-ui": intent_ui,
+  "reui": reui,
+  "elevenlabs-ui": elevenlabs_ui,
+  "inspira-ui": inspira_ui,
+  "reka-ui": reka_ui,
+  "melt-ui": melt_ui,
+  "zard-ui": zard_ui,
+  "spartan-ui": spartan_ui,
+  "corvu": corvu,
+  "starwind-ui": starwind_ui,
+  "webcoreui": webcoreui,
+  "web-awesome": web_awesome,
 };
```

## data/library-details/inspira-ui.ts

Status: added; +42; −0

```diff
@@ -1,0 +1,42 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://inspira-ui.com/docs/en/getting-started/installation",
+  repoUrl: "https://github.com/unovue/inspira-ui",
+  preview: {
+    src: "https://cdn.inspira-ui.com/og-image-v2.png",
+    alt: "Inspira UI official preview",
+  },
+  install: [
+    { label: "Supporting dependencies (npm)", command: "npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins" },
+    { label: "Supporting dependencies (pnpm)", command: "pnpm add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins" },
+  ],
+  gettingStarted: [
+    "Use a Vue or Nuxt project with Tailwind CSS v4 configured. Projects using Tailwind CSS v3 should follow the separate v1 documentation at https://v1.inspira-ui.com.",
+    "Install `@vueuse/core`, `motion-v`, `tw-animate-css`, and `@inspira-ui/plugins`, then follow Motion's Vue integration guide at https://motion.dev/docs/vue for the current framework setup.",
+    "Merge the installation page's CSS imports and theme variables into the global stylesheet. Existing shadcn-vue projects can skip the theme-variable setup; Nuxt UI projects use the documented Nuxt UI token mapping.",
+    "Choose a component from the official catalog, copy its Vue source and helpers into the app, and install any dependencies listed on that component page. The supporting packages alone do not install all component source.",
+    "Some examples use Iconify icons. Add icon support only when the chosen component requires it, and check client-only rendering for browser or WebGL effects in Nuxt.",
+  ],
+  agentPrompt: `Add Inspira UI (https://inspira-ui.com) components to this existing Vue or Nuxt project.
+
+Inspira UI provides editable Vue components with animation and visual effects. Its current guide uses Tailwind CSS v4; Tailwind v3 projects have separate documentation at https://v1.inspira-ui.com.
+
+Prerequisites:
+- Inspect the Vue/Nuxt version, Tailwind setup, global CSS, aliases, and existing shadcn-vue or Nuxt UI configuration.
+
+Steps:
+1. Read https://inspira-ui.com/docs/en/getting-started/installation and the exact component page before copying code.
+2. Install the documented supporting dependencies: npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins, using the project's package manager.
+3. Follow https://motion.dev/docs/vue for Motion's framework integration. Merge the required CSS imports and theme variables into the existing stylesheet. Use the Nuxt UI mapping if applicable; keep existing shadcn-vue tokens when already configured.
+4. Copy only the requested component and its required helpers from the official page. Preserve the project's import aliases and install component-specific dependencies or Iconify support only when needed.
+5. Connect its props to project state, preserve reduced-motion behavior, and use client-only rendering for effects that require browser APIs. Run typecheck and build using the app's existing scripts.
+
+Use Vue component APIs from the current documentation rather than translating remembered React examples.`,
+  pricing: {
+    model: "free",
+    summary: "Inspira UI components are free and open source under MIT.",
+    license: "MIT",
+    source: "https://github.com/unovue/inspira-ui",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/intent-ui.ts

Status: added; +47; −0

```diff
@@ -1,0 +1,47 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://intentui.com/docs/getting-started/installation",
+  repoUrl: "https://github.com/irsyadadl/intentui",
+  preview: {
+    src: "https://intentui.com/opengraph-image-12gd74.png?06407fbb03c20cb7",
+    alt: "Intent UI official preview",
+  },
+  registrySetup: {
+    description: "Start with React and Tailwind CSS configured. For a new setup, initialize the Intent UI theme with the command below. In an existing shadcn project, preserve components.json, aliases, and theme customizations, and follow the official framework guide before adding components.",
+  },
+  install: [
+    { label: "Initialize the default theme", command: "npx shadcn@latest init @intentui/theme-default" },
+    { label: "Add a combo box", command: "npx shadcn@latest add @intentui/combo-box" },
+    { label: "Add form controls", command: "npx shadcn@latest add @intentui/select @intentui/text-field" },
+  ],
+  gettingStarted: [
+    "Choose the Next.js, Vite, TanStack Router, or Laravel React guide linked from the installation page. Intent UI uses React Aria Components and Tailwind CSS; it installs component source rather than a single UI runtime package.",
+    "For an unconfigured project, run `npx shadcn@latest init @intentui/theme-default`. Inspect an existing components.json and global CSS before applying a theme so existing paths and design tokens are preserved.",
+    "Add only the components you need with the shadcn CLI, for example `npx shadcn@latest add @intentui/combo-box`. The CLI installs the dependencies and source files declared by the registry item.",
+    "Import from the generated component path and follow the component's documented composition and props. For a combo box, use https://intentui.com/docs/components/pickers/combo-box rather than the API of a Radix-based select.",
+    "Agent documentation is available at https://intentui.com/llms.txt, with editor integration described at https://intentui.com/docs/getting-started/ai.",
+  ],
+  agentPrompt: `Add Intent UI (https://intentui.com) to this existing React project.
+
+Intent UI supplies editable React components built on React Aria Components and Tailwind CSS. Components are installed through the shadcn registry, rather than npm installing an intentui runtime.
+
+Prerequisites:
+- Confirm the app uses React and has a working Tailwind CSS setup.
+- Inspect the package manager, components.json, import aliases, and global theme CSS before changing setup.
+
+Steps:
+1. Read https://intentui.com/docs/getting-started/installation and the linked guide for this app's framework. Use https://intentui.com/llms.txt to find the current component APIs.
+2. If the project is not configured yet, initialize with npx shadcn@latest init @intentui/theme-default. For an existing shadcn project, follow its documented integration path and preserve existing aliases, registries, and customized theme tokens.
+3. Install only the requested component, for example npx shadcn@latest add @intentui/combo-box. Select and text-field can be added with npx shadcn@latest add @intentui/select @intentui/text-field.
+4. Inspect the generated files and import from their actual location. Copy the composition from the matching Intent UI component page; React Aria props and events differ from Radix APIs.
+5. Integrate it into an existing screen using the project's styles and state conventions. Keep labels, focus handling, and keyboard behavior intact, then run the project's typecheck and build.
+
+Treat the copied components as project source. Add a client boundary where the framework requires one for interactive React components.`,
+  pricing: {
+    model: "freemium",
+    summary: "The component library is free under MIT; Intent UI Design offers separate paid blocks, patterns, and templates.",
+    license: "MIT",
+    source: "https://design.intentui.com/license",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/melt-ui.ts

Status: added; +44; −0

```diff
@@ -1,0 +1,44 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://next.melt-ui.com/guides/installation",
+  repoUrl: "https://github.com/melt-ui/next-gen",
+  preview: {
+    src: "https://raw.githubusercontent.com/melt-ui/next-gen/main/static/banner.png",
+    alt: "Melt UI official preview",
+  },
+  install: [
+    { label: "Svelte 5 package (npm)", command: "npm install melt" },
+    { label: "Svelte 5 package (pnpm)", command: "pnpm add melt" },
+  ],
+  gettingStarted: [
+    "This entry covers next-generation Melt UI for Svelte 5, installed as `melt`. The guide requires Node.js 18+ and Svelte 5+; follow the framework's higher minimum where applicable. The older `@melt-ui/svelte` library has a different API.",
+    "Install `melt`, then choose between builders from `melt/builders` and component wrappers from `melt/components`. Both approaches are headless and leave markup and styling to the application.",
+    "For a builder, import `Toggle` from `melt/builders`, create `new Toggle(...)`, and spread `toggle.trigger` onto a button. Pass reactive values through getters so Svelte runes remain connected to builder state.",
+    "For the wrapper approach, import `Toggle` from `melt/components`, use `bind:value`, and render the trigger inside its children snippet. The wrapper exposes a builder instance rather than styled elements.",
+    "Read https://next.melt-ui.com/guides/how-to-use for reactive state and attribute merging. The next-generation package remains pre-1.0, so inspect release changes when upgrading.",
+  ],
+  agentPrompt: `Add next-generation Melt UI (https://next.melt-ui.com) to this existing Svelte 5 project.
+
+This entry uses the melt package from https://github.com/melt-ui/next-gen. It is distinct from the older @melt-ui/svelte package and its action/store API.
+
+Prerequisites:
+- Svelte 5 or newer and Node.js 18 or newer, honoring any higher framework minimum.
+- Inspect existing Svelte state and styling conventions. Melt supplies no default styling.
+
+Steps:
+1. Read https://next.melt-ui.com/guides/installation, https://next.melt-ui.com/guides/how-to-use, and the requested component's documentation.
+2. Install the next-generation package with npm install melt, or the project's equivalent package-manager command.
+3. Choose builders from melt/builders or wrappers from melt/components. Follow the project's existing pattern. For a builder example, import Toggle, create new Toggle with documented options, and spread toggle.trigger onto the button.
+4. Pass reactive options through getters backed by Svelte runes. If using wrappers, follow the documented bind:value and children snippet pattern. Do not substitute the older library's actions or stores.
+5. Provide markup, labels, and styles using the app's design system. Keep the builder's event handlers and ARIA attributes intact when merging custom attributes.
+6. Run the project's Svelte checks and build. Review release notes before upgrades because the package is still pre-1.0.
+
+Use the exact documented API for the installed melt version.`,
+  pricing: {
+    model: "free",
+    summary: "Next-generation Melt UI is free and open source under MIT.",
+    license: "MIT",
+    source: "https://github.com/melt-ui/next-gen",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/reka-ui.ts

Status: added; +44; −0

```diff
@@ -1,0 +1,44 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://reka-ui.com/docs/overview/installation",
+  repoUrl: "https://github.com/unovue/reka-ui",
+  preview: {
+    src: "https://reka-ui.com/og.jpg",
+    alt: "Reka UI official preview",
+  },
+  install: [
+    { label: "npm", command: "npm install reka-ui" },
+    { label: "pnpm", command: "pnpm add reka-ui" },
+    { label: "Optional Vue auto imports", command: "npm install -D unplugin-vue-components" },
+  ],
+  gettingStarted: [
+    "Install `reka-ui` in an existing Vue project. Reka UI is the successor to Radix Vue and provides behavior and accessible markup without a default visual theme.",
+    "Import the parts you need from `reka-ui`, for example `PopoverRoot`, `PopoverTrigger`, `PopoverPortal`, and `PopoverContent`. Follow the complete example at https://reka-ui.com/docs/overview/getting-started.",
+    "Style the parts with the project's CSS or Tailwind classes, including documented data attributes for interaction states. Follow https://reka-ui.com/docs/guides/styling rather than expecting an installed stylesheet.",
+    "In Nuxt, add `reka-ui/nuxt` to the existing modules array for auto imports. In Vite, optional auto imports use `unplugin-vue-components` with `RekaResolver` from `reka-ui/resolver`.",
+    "Use https://reka-ui.com/llms.txt or append `.md` to a docs URL for agent-readable API references. Check the migration guide when replacing an existing Radix Vue installation.",
+  ],
+  agentPrompt: `Add Reka UI (https://reka-ui.com) to this existing Vue or Nuxt project.
+
+Reka UI, formerly Radix Vue, provides unstyled, accessible primitives. The application supplies its own styles.
+
+Prerequisites:
+- Inspect the Vue version, existing UI primitives, styling system, and any Radix Vue dependency.
+
+Steps:
+1. Read https://reka-ui.com/docs/overview/installation and https://reka-ui.com/docs/overview/getting-started. Use https://reka-ui.com/llms.txt to locate the requested component's current API.
+2. Install reka-ui with the project's package manager, for example npm install reka-ui. If the app already uses Radix Vue, follow the official migration guide before changing imports.
+3. Import the documented parts from reka-ui and compose them as the component page shows. For a popover, start with PopoverRoot, PopoverTrigger, PopoverPortal, and PopoverContent, preserving its accessibility semantics.
+4. Apply the project's own styles and documented state selectors. Do not add an unrelated theme package.
+5. In Nuxt, merge reka-ui/nuxt into the modules array if auto imports are wanted. For Vite auto imports, use unplugin-vue-components with the resolver exported by reka-ui/resolver.
+6. Integrate controlled state through the documented Vue models and events, then run the project's typecheck and build. Preserve focus management, labels, and keyboard behavior.
+
+Read the component page before guessing props or part names.`,
+  pricing: {
+    model: "free",
+    summary: "Reka UI is free and open source under MIT.",
+    license: "MIT",
+    source: "https://github.com/unovue/reka-ui",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/reui.ts

Status: added; +51; −0

```diff
@@ -1,0 +1,51 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://reui.io/docs/get-started",
+  repoUrl: "https://github.com/keenthemes/reui",
+  preview: {
+    src: "https://reui.io/og?title=Free%20Shadcn%20UI%20Components%2C%20Blocks%2C%20Icons%2C%20Templates%20%26%20MCP&description=Free%20Shadcn%20UI%20components%20and%20pro%20blocks%20for%20React%20and%20Tailwind%20CSS%2C%20plus%20hand-crafted%20icons%2C%20templates%20and%20a%20hosted%20MCP%20server%20for%20coding%20agents.&v=dpl_DEcWbDEap8UuDo5vtPZYzyfdChok",
+    alt: "ReUI official preview",
+  },
+  registrySetup: {
+    description: "Use a React 19 project with Tailwind CSS v4 and shadcn/ui initialized. Merge the @reui registry into components.json. Its style must be a supported base/variant pairing, such as base-nova or radix-lyra; choose the pairing that matches the project's primitives before installing.",
+    config: `{
+  "registries": {
+    "@reui": "https://reui.io/r/{style}/{name}.json"
+  }
+}`,
+  },
+  install: [
+    { label: "Initialize shadcn/ui if needed", command: "npx shadcn@latest init" },
+    { label: "Add the data grid", command: "npx shadcn@latest add @reui/data-grid" },
+  ],
+  gettingStarted: [
+    "The current setup guide targets React 19 and Tailwind CSS v4. Initialize shadcn/ui if needed, then configure the @reui registry without replacing other components.json settings.",
+    "ReUI resolves `{style}` from components.json. Supported styles pair `base` or `radix` with a documented variant, for example `base-nova` or `radix-lyra`. See https://reui.io/docs/registry before selecting a style.",
+    "Install through the shadcn CLI, for example `npx shadcn@latest add @reui/data-grid`. The @reui namespace is a registry alias, not an npm package scope for this library.",
+    "Use the documentation for the selected primitive variant. Data Grid's Base UI page is https://reui.io/docs/components/base/data-grid; its generated files and dependencies must match the documented API.",
+    "Merge ReUI's additional semantic CSS tokens using https://reui.io/docs/styling. Free components need no license key; paid registry items require the authenticated configuration documented at https://reui.io/docs/license-setup.",
+  ],
+  agentPrompt: `Add ReUI (https://reui.io) to this existing React project.
+
+ReUI distributes editable components through the shadcn registry, with Base UI and Radix UI variants. The @reui alias is not the library's npm scope.
+
+Prerequisites:
+- React 19, Tailwind CSS v4, and shadcn/ui configured with components.json.
+- Inspect existing primitives, style, aliases, and CSS tokens before selecting a ReUI variant.
+
+Steps:
+1. Read https://reui.io/docs/get-started, https://reui.io/docs/registry, and https://reui.io/docs/styling. Find the requested component in the official catalog or https://reui.io/llms.txt.
+2. Initialize shadcn/ui only if missing. Merge "@reui": "https://reui.io/r/{style}/{name}.json" into the existing registries object.
+3. Select a documented style pairing matching the app's primitives, such as base-nova or radix-lyra. Keep the rest of components.json intact and assess existing components before changing its style.
+4. Add the requested item through shadcn, for example npx shadcn@latest add @reui/data-grid. Do not npm install @reui/data-grid. Inspect the generated files and installed dependencies before importing them.
+5. Use the component docs for the same Base UI or Radix variant. Merge the required CSS tokens and integrate with the app's state and data types. Run typecheck and build.
+
+Free c-* components and their supporting primitives are publicly available. Use paid blocks or icons only when the project has the required license, following https://reui.io/docs/license-setup. Keep secrets out of source files.`,
+  pricing: {
+    model: "freemium",
+    summary: "The open source components are free under MIT; premium blocks, icons, and templates require a paid license.",
+    license: "MIT",
+    source: "https://reui.io/pricing",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/spartan-ui.ts

Status: added; +47; −0

```diff
@@ -1,0 +1,47 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://spartan.ng/documentation/installation",
+  repoUrl: "https://github.com/spartan-ng/spartan",
+  preview: {
+    src: "https://www.spartan.ng/assets/og-image.png",
+    alt: "Spartan UI official preview",
+  },
+  install: [
+    { label: "Install the CLI plugin", command: "npm install -D @spartan-ng/cli" },
+    { label: "Initialize (Angular CLI)", command: "ng g @spartan-ng/cli:init" },
+    { label: "Add components (Angular CLI)", command: "ng g @spartan-ng/cli:ui" },
+    { label: "Initialize (Nx)", command: "npx nx g @spartan-ng/cli:init" },
+    { label: "Add components (Nx)", command: "npx nx g @spartan-ng/cli:ui" },
+  ],
+  gettingStarted: [
+    "Spartan UI separates accessible behavior in the installed `@spartan-ng/brain` package from helm component source copied into the app. The current installation guide requires Tailwind CSS v4.",
+    "Install `@spartan-ng/cli` as a development dependency, then run `ng g @spartan-ng/cli:init`, or `npx nx g @spartan-ng/cli:init` in an Nx workspace.",
+    "Run the corresponding `@spartan-ng/cli:ui` generator and select only the needed components. It installs the brain dependency and required packages while copying editable helm source.",
+    "Review the Tailwind layers, theme variables, and `@spartan-ng/brain/hlm-tailwind-preset.css` import. The preset includes animation CSS and Angular CDK overlay styles; follow the manual setup guide when merging into an existing theme.",
+    "Import the generated helm components from the configured aliases and use the composition shown on each component page. Keep Angular CDK and brain versions compatible with the Angular version documented at https://spartan.ng/documentation/version-support.",
+  ],
+  agentPrompt: `Add Spartan UI (https://spartan.ng) to this existing Angular project.
+
+Spartan UI has two layers: @spartan-ng/brain supplies accessible behavior, and helm components are copied into the app for styling and customization.
+
+Prerequisites:
+- Check the app's Angular version against https://spartan.ng/documentation/version-support.
+- The current installation guide requires Tailwind CSS v4. Inspect global CSS, import aliases, and whether the workspace uses Angular CLI or Nx.
+
+Steps:
+1. Read https://spartan.ng/documentation/installation and the requested component page before selecting imports or selectors.
+2. Install the generator plugin with npm install -D @spartan-ng/cli, using the existing package manager.
+3. Initialize with ng g @spartan-ng/cli:init for Angular CLI, or npx nx g @spartan-ng/cli:init for Nx. Keep existing configuration and style customizations intact.
+4. Add only the required components with ng g @spartan-ng/cli:ui or npx nx g @spartan-ng/cli:ui. The generator installs brain and dependencies and copies helm source into the configured directory.
+5. Review CSS layers and theme variables. Follow the documented import of @spartan-ng/brain/hlm-tailwind-preset.css, which includes animation and CDK overlay styles. Avoid duplicating global styles already supplied by the preset.
+6. Import the generated helm components and documented brain primitives, connect them to typed Angular state, and run the project's typecheck and build.
+
+Customize helm source in the project. Preserve the primitives' accessibility behavior and use the exact APIs documented for the installed version.`,
+  pricing: {
+    model: "free",
+    summary: "Spartan UI is free and open source under MIT.",
+    license: "MIT",
+    source: "https://github.com/spartan-ng/spartan",
+  },
+} satisfies LibraryDetails;
```

## data/library-details/starwind-ui.ts

Status: added; +47; −0

```diff
@@ -1,0 +1,47 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+  docsUrl: "https://starwind.dev/docs/getting-started/installation/",
+  repoUrl: "https://github.com/starwind-ui/starwind-ui",
+  preview: {
+    src: "https://starwind.dev/og/home-b3ca1db3.png",
+    alt: "Starwind UI official preview",
+  },
+  install: [
+    { label: "Initialize an existing project", command: "npx starwind@latest init" },
+    { label: "Add a button", command: "npx starwind@latest add button" },
+    { label: "Initialize Vue beta", command: "npx starwind@latest init --framework vue" },
+    { label: "Initialize Svelte beta", command: "npx starwind@latest init --framework svelte" },
+  ],
+  gettingStarted: [
+    "Start with an existing framework project. Astro and React adapters are stable; Vue 3.5 and Svelte 5 adapters are public betas with separate framework guides and version requirements.",
+    "Run `npx starwind@latest init` from the app root and inspect the detected framework and paths. Starwind writes starwind.config.json, connects the framework adapter, and configures its Tailwind CSS v4 stylesheet.",
+    "Add source with `npx starwind@latest add button`. Styled components are copied into the app; shared behavior comes from the installed adapter and portable runtime.",
+    "Use the framework-specific example and generated path, such as `import { Button } from '@/components/starwind/button'`. Import the Starwind stylesheet in the correct global entry and preserve existing aliases and theme tokens.",
+    "Vue beta uses `@starwind-ui/vue@beta` and Vue 3.5; Svelte beta uses `@starwind-ui/svelte@beta` and Svelte >=5.29.0 <6. Follow the current repository and framework guides for those beta setups. The styled Image component remains Astro-only.",
+    "For coding agents, the official docs provide https://starwind.dev/llms.txt, https://starwind.dev/llms-full.txt, and MCP setup at https://starwind.dev/docs/getting-started/mcp/.",
+  ],
+  agentPrompt: `Add Starwind UI (https://starwind.dev) to this existing project.
+
+Starwind copies styled Tailwind CSS v4 components into the app and supplies shared behavior through a framework adapter and portable runtime. Astro and React are stable; Vue and Svelte adapters are public betas.
+
+Prerequisites:
+- Identify the framework, versions, global stylesheet, path aliases, and existing Tailwind configuration.
+- For Vue beta, confirm Vue 3.5; for Svelte beta, check the current >=5.29.0 <6 requirement against the official repository.
+
+Steps:
+1. Read https://starwind.dev/docs/getting-started/installation/ and the matching framework guide. Use https://starwind.dev/llms.txt to find current component APIs.
+2. Run npx starwind@latest init from the application root. For a beta host, use the documented --framework vue or --framework svelte setup and verify the matching beta adapter package.
+3. Review starwind.config.json, the adapter, CSS imports, and aliases. Merge changes into the existing application without replacing its custom styling.
+4. Add only the requested component, for example npx starwind@latest add button. Import it from the generated path and use the example for the project's framework.
+5. Keep the shared stylesheet and runtime integration in place. For Vue and Svelte beta, inspect installed prop types and current framework examples; do not assume APIs match React. Styled Image remains Astro-only.
+6. Connect the component to project state and run the existing typecheck and build.
+
+Treat the generated styled components as editable source. Use the documented adapter APIs for shared behavior.`,
+  pricing: {
+    model: "freemium",
+    summary: "The component library is free under MIT; Starwind Pro offers separate paid blocks and templates.",
+    license: "MIT",
+    source: "https://pro.starwind.dev/pricing/",
+  },
+} satisfies LibraryDetails;
```

[Next page](https://git.cafe/screen/col/pull/51/diffs?after=ImRhdGEvbGlicmFyeS1kZXRhaWxzL3N0YXJ3aW5kLXVpLnRzIg&expectedVersion=0&format=markdown)