\n \n \n
\n ![\"\"](\"public/logos/Rareui.svg\") \n Built by @swamimalode \n",
+ }
+ ],
+ },
+ {
+ slug: "obsidian-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/Atharvsinh-codez/ObsidianUI",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "obsidian-ui install and usage",
+ url: "https://github.com/Atharvsinh-codez/ObsidianUI#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "0b96262a414f9e35b0e5c53b17fcf4a48fe9b269",
+ content: "## Quick start\n\nChoose a component from the [showcase](https://www.obsidianui.dev/components), then install it with the shadcn CLI. For example:\n\n```bash\nnpx shadcn@latest add \"https://www.obsidianui.dev/r/hover-img.json\"\n```\n\nFor the interactive prism:\n\n```bash\nnpx shadcn@latest add \"https://www.obsidianui.dev/r/v-prism.json\"\n```\n\nEach component page includes a preview, installation steps, and source files. Install the listed dependencies when copying files manually.\n\n## Running locally\n\n```bash\ngit clone https://github.com/Atharvsinh-codez/ObsidianUI.git\ncd ObsidianUI\nnpm ci\nnpm run dev\n```\n\nOpen [localhost:3000](http://localhost:3000) in your browser.\n\n- **Primitives:** `src/components/ui`\n- **Blocks and effects:** `src/components/block`\n- **Documentation:** `src/content`\n\nAfter updating a component or registry source, rebuild the registry output with `npm run registry:build`.\n\n## Commands\n\n| Command | Purpose |\n| --- | --- |\n| `npm run dev` | Start the local development server |\n| `npm run build` | Build the production site, registry manifests, and search index |\n| `npm run registry:build` | Rebuild installation manifests from component sources |\n| `npm run agent:build` | Rebuild `llms.txt`, Markdown pages, and agent route maps |\n| `npm run mcp` | Launch local Model Context Protocol (MCP) server over stdio |\n| `npm run lint` | Run ESLint check |\n| `npm run typecheck` | Run TypeScript verification |\n| `npm test` | Run unit and component test suites |\n| `npm run check` | Run lint, types, tests, and production build |\n\n## Star History\n\n\n \n \n \n ![\"Star](\"https://api.star-history.com/chart?repos=atharvsinh-codez/obsidianui&type=date&legend=top-left\") \n \n\n\n## Contributing\n\nIssues and pull requests are welcome. Read [CONTRIBUTING.md](CONTRIBUTING.md) for the full walkthrough, from creating a component to a working install command.\n\n## License\n\nObsidianUI is released under the [MIT License](LICENSE).\n\n",
+ }
+ ],
+ },
+ {
+ slug: "ark-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/chakra-ui/ark",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "ark-ui install and usage",
+ url: "https://github.com/chakra-ui/ark#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "b94f858a97e3bf8c65b5df3510aac693c0799487",
+ content: "#installation\">Installation •\n Features •\n Components •\n Roadmap •\n Contributing\n\n\n
\n\n## Overview\n\nArk UI is a headless component library that provides the foundation for building high-quality, accessible design systems\nand web applications. Built on top of [Zag.js](https://zagjs.com) state machines, Ark UI delivers robust,\nframework-agnostic component logic with perfect parity across **React**, **Solid**, **Vue**, and **Svelte**.\n\n### Why Ark UI?\n\n- **🎨 Completely Unstyled** - Zero styling opinions. Bring your own styles with CSS-in-JS, Tailwind, vanilla CSS, or\n any styling solution\n- **♿️ Accessibility First** - WCAG compliant components tested with real assistive technologies out of the box\n- **🔄 State Machine Powered** - Predictable, testable behavior powered by Zag.js finite state machines\n- **🌍 Multi-Framework** - Same API across React, Solid, Vue, and Svelte - write once, use everywhere\n- **📦 Truly Composable** - Granular component primitives that work together seamlessly\n- **⚡️ Production Ready** - Battle-tested in products like Chakra UI, used by teams at OVHCloud, PluralSight, and more\n- **🎯 Type-Safe** - Fully typed with TypeScript for exceptional developer experience\n\n## Installation\n\nChoose your framework and install the corresponding package:\n\n```bash\n# React\nnpm install @ark-ui/react\n\n# Solid\nnpm install @ark-ui/solid\n\n# Vue\nnpm install @ark-ui/vue\n\n# Svelte\nnpm install @ark-ui/svelte\n```\n\n## Quick Start\n\nHere's a simple example showing how consistent the API is across frameworks:\n\n### React\n\n```tsx\nimport { Dialog } from '@ark-ui/react/dialog'\n\nexport const MyDialog = () => (\n \n Open Dialog\n \n \n \n Dialog Title\n Dialog description\n Close\n \n \n \n)\n```\n\n### Vue\n\n```vue\n\n\n\n \n Open Dialog\n \n \n \n Dialog Title\n Dialog description\n Close\n \n \n \n\n```\n\n### Solid\n\n```tsx\nimport { Dialog } from '@ark-ui/solid/dialog'\n\nexport const MyDialog = () => (\n \n Open Dialog\n \n \n \n Dialog Title\n Dialog description\n Close\n \n \n \n)\n```\n\n### Svelte\n\n```svelte\n\n\n\n Open Dialog\n \n \n \n Dialog Title\n Dialog description\n Close\n \n \n\n```\n\n## Features\n\n### Zero-Styling Freedom\n\nEvery component is completely unstyled, giving you total control over your design. Use any styling solution:\n\n```tsx\n// Tailwind CSS\nOpen\n\n// CSS-in-JS\nOpen\n\n// Vanilla CSS\nOpen\n```\n\n### Accessibility Built-In\n\nAll components follow WAI-ARIA design patterns and are tested with screen readers:\n\n- ✅ Proper ARIA attributes and roles\n- ✅ Keyboard navigation support\n- ✅ Focus management\n- ✅ Screen reader announcements\n- ✅ RTL support\n\n### State Machine Architecture\n\nPowered by Zag.js, each component uses finite state machines for predictable behavior:\n\n- 🔒 Type-safe state transitions\n- 🧪 Easier to test and debug\n- 🐛 Fewer edge cases and bugs\n- 📊 Visualizable component logic\n\n### Framework Parity\n\nMaintain a single design system across multiple frameworks without rewriting component logic:\n\n```tsx\n// Same API, same behavior, different frameworks\nconst packages = ['@ark-ui/react', '@ark-ui/solid', '@ark-ui/vue', '@ark-ui/svelte']\n```\n\n## Components\n\nArk UI provides **45+ production-ready components** covering common UI patterns:\n\n### Layout & Navigation\n\n- Accordion\n- Tabs\n- Splitter\n- Steps\n- Tree View\n- Tour\n\n### Overlays & Dialogs\n\n- Dialog",
+ }
+ ],
+ },
+ {
+ slug: "park-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/chakra-ui/park-ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "park-ui install and usage",
+ url: "https://park-ui.com/docs/installation",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "the guide to setup Park UI in your project. Quickstart Short on time? Jump into our quickstart examples and start to explore Park UI in seconds. Next.js Icon Next.js Solid Start Icon Solid Start Setup Guide 1 Prerequisite Before you start, ensure that your Panda project is set up and ready to go. If not, please refer to the Panda CSS Getting Started Guide and once you've completed that, come back to this guide. 2 Install Dependencies Park UI is built on Ark UI as its headless foundation and uses Lucide Icons by default, but you can swap it out for any icon library of your choice. react solid npm install @ark-ui/react lucide-react 3 Initialize Park UI Next, initialize Park UI in your project. This will set up the necessary configuration files and directories. npx @park-ui/cli init Don't forget to run panda codegen after updating your Panda configuration. Info Park UI uses its own color system . To remove Panda’s default color tokens (50–950 shades), add this plugin to your Panda config: // panda.config.ts plugins : [ { name: 'Remove Panda Preset Colors' , hooks: { 'preset:resolved' : ({ utils , preset , name }) => name === '@pandacss/preset-panda' ? utils. omit (preset, [ 'theme.tokens.colors' , 'theme.semanticTokens.colors' ]) : preset, }, }, ], 4 Add components You can now start adding components to your project. npx @park-ui/cli add button The command above will add the Button component to your project. You can then import it like this: react solid import { Button } from '@/components/ui' export const App = () => { return < Button >Park UI</ Button > } If you need additional color palettes, you can do so at any time using the CLI: npx @park-ui/cli add teal And that's it! Happy hacking! ✌️ Previous page Introduction Next page Theming On this page Quickstart Setup Guide",
+ }
+ ],
+ },
+ {
+ slug: "headless-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/tailwindlabs/headlessui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "headless-ui install and usage",
+ url: "https://github.com/tailwindlabs/headlessui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "eea57cf46fd6767ed1059012f7073b88eb159fba",
+ content: "### Installing the latest version\n\nYou can install the latest version by using:\n\n- `npm install @headlessui/react@latest`\n- `npm install @headlessui/vue@latest`\n\n### Installing the insiders version\n\nYou can install the insiders version (which points to whatever the latest commit on the `main` branch is) by using:\n\n- `npm install @headlessui/react@insiders`\n- `npm install @headlessui/vue@insiders`\n\n**Note:** The insiders build doesn't follow semver and therefore doesn't guarantee that the APIs will be the same once they are released.\n\n## Packages\n\n| Name | Version | Downloads |\n| :------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------: |\n| [`@headlessui/react`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-react) | [](https://www.npmjs.com/package/@headlessui/react) | [](https://www.npmjs.com/package/@headlessui/react) |\n| [`@headlessui/vue`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-vue) | [](https://www.npmjs.com/package/@headlessui/vue) | [](https://www.npmjs.com/package/@headlessui/vue) |\n| [`@headlessui/tailwindcss`](https://github.com/tailwindlabs/headlessui/tree/main/packages/%40headlessui-tailwindcss) | [](https://www.npmjs.com/package/@headlessui/tailwindcss) | [](https://www.npmjs.com/package/@headlessui/tailwindcss) |\n\n## Community\n\nFor help, discussion about best practices, or feature ideas:\n\n[Discuss Headless UI on GitHub](https://github.com/tailwindlabs/headlessui/discussions)\n\n## Contributing\n\nIf you're interested in contributing to Headless UI, please read our [contributing docs](https://github.com/tailwindlabs/headlessui/blob/main/.github/CONTRIBUTING.md) **before submitting a pull request**.",
+ }
+ ],
+ },
+ {
+ slug: "tailwind-css",
+ permission: {
+ status: "granted",
+ source: "https://github.com/tailwindlabs/tailwindcss",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "tailwind-css install and usage",
+ url: "https://tailwindcss.com/docs",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "le, and reliable — with zero-runtime. Installation Using Vite Using PostCSS Tailwind CLI Framework Guides Play CDN Installing Tailwind CSS as a Vite plugin Installing Tailwind CSS as a Vite plugin is the most seamless way to integrate it with frameworks like Laravel, SvelteKit, React Router, Nuxt, and SolidJS. 01 Create your project Start by creating a new Vite project if you don’t have one set up already. The most common approach is to use Create Vite . Terminal npm create vite@latest my-project cd my-project 02 Install Tailwind CSS Install tailwindcss and @tailwindcss/vite via npm. Terminal npm install tailwindcss @tailwindcss/vite 03 Configure the Vite plugin Add the @tailwindcss/vite plugin to your Vite configuration. vite.config.ts import { defineConfig } from 'vite' import tailwindcss from '@tailwindcss/vite' export default defineConfig ( { plugins : [ tailwindcss () , ] , } ) 04 Import Tailwind CSS Add an @import to your CSS file that imports Tailwind CSS. CSS @import \"tailwindcss\" ; 05 Start your build process Run your build process with npm run dev or whatever command is configured in your package.json file. Terminal npm run dev 06 Start using Tailwind in your HTML Make sure your compiled CSS is included in the <head> (your framework might handle this for you) , then start using Tailwind’s utility classes to style your content. HTML <! doctype html > < html > < head > < meta charset = \"UTF-8\" > < meta name = \"viewport\" content = \"width=device-width, initial-scale=1.0\" > < link href = \"/src/style.css\" rel = \"stylesheet\" > </ head > < body > < h1 class = \"text-3xl font-bold underline\" > Hello world! </ h1 > </ body > </ html > Are you stuck? Setting up Tailwind with Vite can be a bit different across different build tools. Check our framework guides to see if we have more specific instructions for your particular setup. Explore our framework guides Tailwind CSS Documentation Playground Blog Showcase Resources Refactoring UI Headless UI Heroicons Hero Patterns Community GitHub X Tailwind CSS Documentation Playground Blog Showcase Resources Refactoring UI Headless UI Heroicons Hero Patterns Community GitHub X Copyright © 2026 Tailwind Labs Inc. · Trademark Policy",
+ }
+ ],
+ },
+ {
+ slug: "kibo-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/shadcnblocks/kibo",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "kibo-ui install and usage",
+ url: "https://www.kibo-ui.com",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "6 Productize compelling ROI Dec 11, 2025 Generate dynamic users Mar 24, 2026 Synthesize transparent models Feb 23, 2026 Empower back-end synergies Apr 15, 2026 Incubate one-to-one relationships Jan 30, 2026 Today May 21, 2026 Jan 01, 2025 Thousands of ready-to-use patterns Browse through 1000+ production-ready patterns built with shadcn/ui. Copy, customize, and ship faster than ever. Explore patterns What people are saying We're proud to have a community of users who love using Kibo UI. Get started with Kibo UI Install your first component in seconds with the Kibo UI or shadcn CLI. Terminal $ npx kibo-ui add announcement Kibo UI Kibo UI Docs Benefits Community How to Contribute Introduction MCP Server New Components Philosophy Setup Troubleshooting Usage Components Announcement Avatar Stack Banner Calendar Choicebox Code Block Color Picker Combobox Comparison Contribution Graph Credit Card Cursor Deck Dialog Stack Dropzone Editor Gantt Glimpse Image Crop Image Zoom Kanban List Marquee Mini Calendar Pill QR Code Rating Reel Relative Time Sandbox Snippet Spinner Status Stories Table Tags Theme Switcher Ticker Tree Typography Video Player Blocks About Awards Blog Blog Post Careers Case Studies Case Study Changelog Code Example Codebase Collaborative Canvas Community Compare Compliance Contact CTA Download Experience FAQ Feature Footer Form Hero Pricing Roadmap Stats Team Testimonial Patterns Accordion Alert Alert Dialog Aspect Ratio Avatar Badge Breadcrumb Button Button Group Calendar Card Carousel Chart Checkbox Collapsible Combobox Command Context Menu Data Table Date Picker Dialog Drawer Dropdown Menu Empty Field Form Hover Card Input Input Group Input OTP Item Kbd Label Menubar Navigation Menu Pagination Popover Progress Radio Group Scroll Area Separator Sheet Skeleton Slider Sonner Spinner Switch Table Tabs Textarea Toggle Toggle Group Tooltip Arthur Brito @ arthurbritom · Follow I'm in love with Kibo UI. Feels like the missing parts of shadcn/ui. And that's the whole point of the lib. As the docs say: \"While shadcn/ui focuses on wrapping primitives from Radix UI, Kibo UI is designed to be a more comprehensive library of components that can be used to Show more Watch on X Watch on X 11:59 AM · May 14, 2025 9 Reply Copy link Read 2 replies Dmytro @ webpnkdotdev · Follow Was looking for a stack dialog component for shadcn - came across amazing Kibo UI components by @haydenbleasel It's really NUTS 🔥 kibo-ui.com/components 3:45 PM · Apr 25, 2025 2 Reply Copy link Read more on X jQueryScript @ jqueryscript · Follow Extend your #shadcnui toolkit with Kibo UI! Adds complex, open-source components like Gantt, Kanban, Editor, Color Picker, Dropzone & more directly into your #React project 👉 next.jqueryscript.net/shadcn-ui/comp… #WebDev #UI 3:22 AM · Apr 1, 2025 1 Reply Copy link Read more on X Rajiv S @ rjv_im · Follow I was exploring kibo-ui.com/overview by @haydenbleasel - amazing work. Cherry on the top: Cool codebase: github.com/haydenbleasel/… Ju",
+ }
+ ],
+ },
+ {
+ slug: "ruixen-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/ruixenui/ruixen.com",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "ruixen-ui install and usage",
+ url: "https://github.com/ruixenui/ruixen.com#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "f6b20860623fa39122ac2b5f0e5bd29a9eb10941",
+ content: "## Quick start\n\n```bash\n# Tailwind v4 + Radix (default)\nnpx shadcn@latest add \"https://ruixen.com/r/staggered-faq-section\"\n\n# Tailwind v3 + Radix\nnpx shadcn@latest add \"https://ruixen.com/r/tw3/staggered-faq-section\"\n\n# Tailwind v4 + Base UI\nnpx shadcn@latest add \"https://ruixen.com/r/baseui/staggered-faq-section\"\n\n# Tailwind v3 + Base UI\nnpx shadcn@latest add \"https://ruixen.com/r/baseui/tw3/staggered-faq-section\"\n```\n\nThe component lands in your project with dependencies resolved. Just JSX — yours to edit, ship, and refactor.\n\n
\n\n## Built with intention\n\nThe catalog isn't styled to look good in a screenshot — it's built to feel right in production. Where it matters, components carry weight:\n\n- **Motion as physics, not transitions.** Buttons, switches, badges, and accordions use spring configs from `motion/react` — momentum, overshoot, settling. Not a 300ms ease-out timer pretending to be life.\n- **Audio as feedback.** Interactive primitives ship with a 3ms Web Audio click on press for a tactile feel. Opt out per-component with `sound={false}`.\n- **Tokens, not hex.** Every component reads from shadcn theme tokens (`bg-card`, `border-border`, `text-foreground`). Change one CSS variable, re-skin the catalog.\n- **Identical code, different wrappers.** Switching from Radix to Base UI doesn't change the component file — just the underlying primitive layer. Component logic stays portable.\n\nMost of the catalog is pure render. Physics and audio are a flavor on the interactive primitives, not a tax on everything else.\n\n
\n\n## Showcase\n\n\n\n\n\nFAQ Chat Accordion
Conversational FAQ section\n | \n\n\nWordmark Footer
Half-cut brand footer with luminance gradient\n | \n\n\nSplit Feature Showcase
Side-by-side feature highlight section\n | \n \n\n\n\nIntegration & Stats Section
Logos and metrics block for trust-building\n | \n\n\nRising Glow
Animated particles for hero accents\n | \n\n\nBadge Morph
Spring-animated status badge\n | \n \n \n\n\nBrowse all 240+ components →\n \n\n
\n\n## What's inside\n\n**Sections** — 59 marketing blocks across 8 categories\n\n| | | | |\n|:---|:---|:---|:---|\n| Navbars (16) | Hero Sections (9) | Pricing (10) | FAQs (6) |\n| Featured (6) | Testimonials (4) | Clients (4) | Footers (4) |\n\n**Components** — primitives and effects across 24 categories\n\nButtons · Inputs · Cards · Forms · Accordions · Avatars · Badges · Banners · Backgrounds · Text Effects · Loaders · Carousels · AI Chat Inputs · Audio & Media · Image Tools · Video Players · Checkboxes · Selects · Sliders · Tabs · Charts · Dialogs · Docks · Stepper\n\n**App UI** — bonus catalog for product interfaces\n\nCalendars · Event Calendars · Date Pickers · Pagination · File Management · Notifications · Drawer · Menu · Breadcrumbs\n\n**Gradients** — 31 hand-tuned 4K gradients (3840 × 2160) across 6 collections: Shade Shifters, Crimson Aura, Fractional Walls, Hero Gradients, Hue Flows, Moon Backgrounds. Free for personal and commercial use.\n\n
\n\n## Pro\n\nWhen the free catalog isn't enough — when you need everything to look like it shipped from a design team that's been working together for a year:\n\n- **50+ premium components** with motion polish and theme d",
+ }
+ ],
+ },
+ {
+ slug: "fancy-components",
+ permission: {
+ status: "granted",
+ source: "https://github.com/danielpetho/fancy",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ ],
+ },
+ {
+ slug: "anime-js",
+ permission: {
+ status: "granted",
+ source: "https://github.com/juliangarnier/anime",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "anime-js install and usage",
+ url: "https://github.com/juliangarnier/anime#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "01b81be1df6843ccfe0a71c0699a746bf740dd77",
+ content: "## Usage\n\nAnime.js V4 works by importing ES modules like so:\n\n\n\n\n | \n\n```javascript\nimport {\n animate,\n stagger,\n} from 'animejs';\n\nanimate('.square', {\n x: 320,\n rotate: { from: -180 },\n duration: 1250,\n delay: stagger(65, { from: 'center' }),\n ease: 'inOutQuint',\n loop: true,\n alternate: true\n});\n```\n\n | \n \n ![\"Anime.js](\"./assets/images/usage-example-result.gif\") \n | \n \n \n\n## V4 Documentation\n\nThe full documentation is available [here](https://animejs.com/documentation).\n\n## V3 Migration guide\n\nYou can find the v3 to v4 migration guide [here](https://github.com/juliangarnier/anime/wiki/Migrating-from-v3-to-v4).\n\n## NPM development scripts\n\nFirst, run `npm i` to install all the necessary packages.\nThen, execute the following scripts with `npm run \n```\n\n\n
\n\n## Setup\n\n### Basic:\n\n```js\n// Initialize Lenis\nconst lenis = new Lenis({\n autoRaf: true,\n});\n\n// Listen for the scroll event and log the event data\nlenis.on('scroll', (e) => {\n console.log(e);\n});\n```\n\n### Custom raf loop:\n\n```js\n// Initialize Lenis\nconst lenis = new Lenis();\n\n// Use requestAnimationFrame to continuously update the scroll\nfunction raf(time) {\n lenis.raf(time);\n requestAnimationFrame(raf);\n}\n\nrequestAnimationFrame(raf);\n```\n\n### Recommended CSS:\n\n**Import stylesheet:**\n```js\nimport 'lenis/dist/lenis.css'\n```\n\n**Or link the CSS file:**\n\n```html\n\n```\n\n**Or add it manually:**\n\n[See lenis.css stylesheet](./packages/core/lenis.css)\n\n### GSAP ScrollTrigger:\n```js\n// Initialize a new Lenis instance for smooth scrolling\nconst lenis = new Lenis();\n\n// Synchronize Lenis scrolling with GSAP's ScrollTrigger plugin\nlenis.on('scroll', ScrollTrigger.update);\n\n// Add Lenis's requestAnimationFrame (raf) method to GSAP's ticker\n// This ensures Lenis's smooth scroll animation updates on each GSAP tick\ngsap.ticker.add((time) => {\n lenis.raf(time * 1000); // Convert time from seconds to milliseconds\n});\n\n// Disable lag smoothing in GSAP to prevent any delay in scroll animations\ngsap.ticker.lagSmoothing(0);\n\n```\n\n
\n\n## No-code usage\n\nOne line, no build step — just drop this into your HTML:\n\n```html\n\n```\n\n```js\nimport { DotLottie } from '@lottiefiles/dotlottie-web';\n\nconst dotLottie = new DotLottie({\n canvas: document.getElementById('canvas'),\n src: 'https://your-animation-url.lottie',\n autoplay: true,\n loop: true,\n});\n```\n\n\n ⚛️ React\n\n ```bash\n npm install @lottiefiles/dotlottie-react\n ```\n\n ```jsx\n import { DotLottieReact } from '@lottiefiles/dotlottie-react';\n\n const App = () => (\n \n );\n ```\n \n\n\n 💚 Vue\n\n ```bash\n npm install @lottiefiles/dotlottie-vue\n ```\n\n ```vue\n \n\n \n \n \n ```\n \n\n\n 🧡 Svelte\n\n ```bash\n npm install @lottiefiles/dotlottie-svelte\n ```\n\n ```svelte\n \n\n \n ```\n \n\n\n 🔵 Solid\n\n ```bash\n npm install @lottiefiles/dotlottie-solid\n ```\n\n ```jsx\n import { DotLottieSolid } from '@lottiefiles/dotlottie-solid';\n\n const App = () => (\n \n );\n ```\n \n\n\n 🌐 Web Component (drop-in, no build step)\n\n ```html\n \n\n \n ```\n\n Or via npm:\n\n ```bash\n npm install @lottiefiles/dotlottie-wc\n ```\n\n ```js\n import '@lottiefiles/dotlottie-wc';\n ```\n \n\n## Features\n\n### 🤖 Interactive State Machines\n\ndotLottie v2 ships **state machines** built into the file format — no JS glue required. Define states, transitions, and inputs in a single `.lottie` and drive them at runtime through pointer events, custom events, or input values.\n\n```js\nconst dotLottie = new DotLottie({\n canvas: document.getElementById('canvas'),\n src: 'interactive-button.lottie',\n stateMachineId: 'main',\n autoplay: true,\n});\n```\n\nThe player exposes typed events for `stateMachineStart`, `stateMachineTransition`, `stateMachineStateEntered`, custom events, and input changes — perfect for wiring animations into your UI logic.\n\n### 🎨 Runtime Theming\n\nSwitch palettes, animate gradients, swap text, or replace images at runtime — without re-exporting from After Effects. Themes can be embedded in the `.lottie` manifest or supplied programmatically.\n\n```js\n// Use a theme defined in the .lottie manifest\ndotLottie.setTheme('dark');\n\n// Or supply a theme object at runtime\ndotLottie.setThemeData({\n rules: [\n { id: 'primary', type: 'Color', value: [0.9, 0.2, 0.4, 1.0] },\n ],\n});\n```\n\nThe full `Theme` type covers color, scalar, position, vector, gradient, image, and text rules — all keyframe-aware.\n\n### 🔊 Audio Support\n\n`dotLottie` files can carry embedded audio tracks alongside the animation timeline — handy for UI sound effects, onboarding flows, or interactive characters. Audio is decoded and played in lockstep with the animation timeline.\n\n> Audio is an experimental feature in `dotlottie-rs`. Browser autoplay policies still apply — initiate playback from a user gesture.\n\n### 🧵 Off-Main-Thread Rendering\n\nFor pages with many animations, swap `DotLottie` for `DotLottieWorker`. Identical API, but rendering happens on a Web Worker with an `OffscreenCanvas`, freeing the main thread for layout, scrolling, and your app code.\n\n```js\nimport { DotLottieWorker } from '@lottiefiles/dotlottie-web';\n\nconst player = new DotLottieWorker({\n canvas: document.getElementById('canvas'),\n src: 'animation.lottie',\n autoplay: true,\n loop: true,\n workerId: 'shared-pool', // optional: share one worker across many instances\n});\n```\n\nAll `DotLottieWorker` methods are async (Promise-returning) since they cross a worker boundary.\n\n### ⚡ Hardware-Accelerated Rendering\n\nThe default Software backend works everywhere. For demanding workloads — many concurrent animations, large canvases, complex masks — opt in to GPU rendering via subpath imports:\n\n```js\n// WebGL2 — broadly supported\nimport { DotLottie } from '@lottiefiles/dotlottie-web/webgl';\n\n// WebGPU — experimental, modern C",
+ }
+ ],
+ },
+ {
+ slug: "godui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/LucasBassetti/godui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "godui install and usage",
+ url: "https://github.com/LucasBassetti/godui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "1f632a76a346f09dc9fe066969906c6f98763e1e",
+ content: "## Installation\n\nGodUI is distributed as a shadcn registry. Components are copied straight into\nyour project, so you own the source.\n\n**1. Create or set up a project:**\n\n```bash\npnpm dlx shadcn@latest init\n```\n\n**2. Add the GodUI registries** to the `registries` field of your\n`components.json` (one-time setup). `@godui` serves the animated shadcn/ui\ndrop-ins; `@godui-lab` serves Lab, GodUI's expressive, experimental pieces\nbeyond the shadcn catalog:\n\n```json\n{\n \"registries\": {\n \"@godui\": \"https://godui.design/r/{name}.json\",\n \"@godui-lab\": \"https://godui.design/r/lab/{name}.json\"\n }\n}\n```\n\nLab used to be called Extras: an existing `\"@godui-extras\"` entry pointing at\n`https://godui.design/r/extras/{name}.json` keeps working.\n\n**3. Add any component by name:**\n\n```bash\npnpm dlx shadcn@latest add @godui/dialog\n```\n\nThis replaces `components/ui/dialog.tsx` with the animated version and merges\nthe `godui-motion` tokens into your global stylesheet. Lab components install\nthe same way from the second registry, into `components/godui/`:\n\n```bash\npnpm dlx shadcn@latest add @godui-lab/magic-button\n```\n\n> To skip step 2, install with the full registry URL:\n> `pnpm dlx shadcn@latest add https://godui.design/r/lab/magic-button.json`\n\nSee the full [installation guide](https://godui.design/docs/installation) for\ntypography and dark-mode setup.\n\n## Quick start\n\nCore components keep shadcn's import paths:\n\n```tsx\nimport { Button } from \"@/components/ui/button\";\n\nexport function Demo() {\n return ;\n}\n```\n\nLab components import from `components/godui/`:\n\n```tsx\nimport { MagicButton } from \"@/components/godui/magic-button\";\n\nexport function Demo() {\n return Get Started;\n}\n```\n\n## Components\n\n[Components](https://godui.design/docs/components) covers the shadcn/ui\ncatalog: accordion, dialog, dropdown menu, select, sidebar, tabs and the rest.\n[Lab](https://godui.design/docs/lab) groups its pieces by category: buttons,\ntext, overlays, navigation, layout, effects, glass, backgrounds,\nvisualizations, inputs, AI and collaboration.\n\n## Local development\n\nGodUI is a [pnpm](https://pnpm.io) + [Turborepo](https://turborepo.com)\nmonorepo. Requires **Node >= 20.19.0** and **pnpm 10.x**.\n\n```bash\n# Clone\ngit clone https://github.com/LucasBassetti/godui.git\ncd godui\n\n# Install dependencies\npnpm install\n\n# Start everything (docs + storybook) in dev\npnpm dev\n\n# Build the shadcn registry from registry.json\npnpm build:registry\n\n# Run tests\npnpm test\n\n# Lint & format with Biome\npnpm check # check\npnpm check:fix # check and auto-fix\n```\n\n## Project structure\n\n```\ngodui/\n├── apps/\n│ ├── docs/ # Documentation site (Next.js + Fumadocs)\n│ └── storybook/ # Component showcase (Storybook)\n├── packages/\n│ ├── components/ # @godui/components: animated shadcn/ui drop-ins (core)\n│ └── lab/ # @godui/lab: expressive, experimental pieces (maintained as-is)\n├── registry.json # core shadcn registry definition (source of truth)\n└── registry-lab.json # Lab registry, served from /r/lab (/r/extras still works)\n```\n\n## Contributing\n\nNew components, bug fixes, docs and ideas are welcome. Read the\n[Contributing Guide](./CONTRIBUTING.md) and follow the\n[Code of Conduct](./CODE_OF_CONDUCT.md).\n\n## License\n\n[MIT](./LICENSE) © Lucas Bassetti\n\n## Star History\n\n\n \n \n \n ![\"Star](\"https://api.star-history.com/chart?repos=LucasBassetti/godui&type=date&legend=top-left&sealed_token=Eco6rP5S6yhB-dwc1cgNpBCcbIi_Wg570aLFL_JgOQ8sDHnqysK_Dg_N_tEHNchW5IRlhIltx060Q0kZ8Dkk_b6ZigA559HwP7OMDalppL8khPsz0TWUrw\") \n \n\n\n---\n\n",
+ }
+ ],
+ },
+ {
+ slug: "hampton-ui",
+ permission: {
+ status: "granted",
+ source: "https://ui.hampton.io/license",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ ],
+ },
+ {
+ slug: "satisium-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/satisium/ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "satisium-ui install and usage",
+ url: "https://github.com/satisium/ui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "bb24d923ddee009a03c8508a1d6c157bd84cceb1",
+ content: "## Install a component\n\n```bash\nnpx shadcn@latest add https://ui.satisium.com/r/.json\n```\n\nThe CLI copies the component source into your project, auto-installs missing dependencies, and leaves you in full control of the code.\n\nBrowse and preview all components at [ui.satisium.com](https://ui.satisium.com).\n\n## Quick start\n\n```bash\ngit clone https://github.com/satisium/ui.git\ncd ui\npnpm install\npnpm dev\n```\n\nOpen [http://localhost:3000](http://localhost:3000) to explore the docs site.\n\n## Tech stack\n\n- Next.js 16 with App Router\n- React 19\n- Tailwind CSS v4\n- GSAP and @gsap/react\n- Motion\n- Three.js and React Three Fiber\n- Radix UI\n- shadcn/ui\n- Fumadocs\n- Changesets\n- pnpm\n\n## Prerequisites\n\nTo use Satisium UI components in your project:\n\n- Node.js 20 or higher\n- Next.js 16 or later with App Router\n- Tailwind CSS v4 configured\n- shadcn/ui initialized (`npx shadcn@latest init`)\n\n## Community & Support\n\nJoin the Satisium HQ Discord to get help, showcase your projects, and talk design engineering with the founder and the community.\n\n[💬 Join the Satisium Discord](https://discord.gg/xQ5cPHmT7)\n\nFor bug reports and feature requests, please use [GitHub Issues](https://github.com/satisium/ui/issues). For security vulnerabilities, **Direct Message the Founder on Discord** or email **satisiumhq@gmail.com** (do not open a public issue).\n\n## Contributing\n\nContributions are welcome. Before opening a PR, please read the following:\n\n- [CONTRIBUTING.md](./CONTRIBUTING.md) — setup instructions, the component pipeline, and PR checklist\n- [GITHUB_STRATEGY.md](./GITHUB_STRATEGY.md) — branching model, releases, CI/CD, and open-source workflow\n\n### Contributor setup\n\n```bash\ngit clone https://github.com/satisium/ui.git\ncd ui\npnpm install\npnpm dev\n```\n\n## License\n\nMIT — see [LICENSE](./LICENSE) for details.",
+ }
+ ],
+ },
+ {
+ slug: "wensity-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/wensity/registry",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "wensity-ui install and usage",
+ url: "https://github.com/wensity/registry#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "d273e3fc0eda5bb9c2b88ad057e413cf7cbe2101",
+ content: "## Install\n\nEvery item in this registry is free and MIT licensed. Install one with the\nshadcn CLI:\n\n```bash\nnpx shadcn@latest add @wensity/liquid-multimodal-input\n```\n\nThe `@wensity` namespace is registered in shadcn's public registry index, so it\nresolves without any `components.json` configuration on your side.\n\nYou can also point at this repository directly:\n\n```bash\nnpx shadcn@latest add https://raw.githubusercontent.com/wensity/registry/main/button.json\n```\n\n### Start with the base tokens\n\n`wensity-base` installs the CSS custom property contract that every Wensity\ncomponent reads from. Add it once before or after your first component:\n\n```bash\nnpx shadcn@latest add @wensity/wensity-base\n```\n\nComponents still render without it, falling back to your existing shadcn\nvariables, but the base contract is what makes radius, control colors, and\nmotion consistent across the set.\n\n## Requirements\n\n- React 18 or later\n- Tailwind CSS v4\n- A project already initialised with `npx shadcn@latest init`\n\nIndividual items declare their own npm dependencies (`framer-motion`,\n`@tabler/icons-react`, `@base-ui/react`, and similar). The shadcn CLI installs\nthose for you at add time.\n\n## What is in here\n\n95 registry items across six groups.\n\n### Agentic AI Interfaces\n\nChat, voice, and model-selection surfaces for AI products.\n\n| Item | Name | Description | Install |\n| --- | --- | --- | --- |\n| [`liquid-multimodal-input`](https://ui.wensity.com/components/liquid-multimodal-input) | Liquid Multimodal Input | Expanding prompt area with a glowing drop-zone. | `npx shadcn@latest add @wensity/liquid-multimodal-input` |\n| [`generative-skeleton-mesh`](https://ui.wensity.com/components/generative-skeleton-mesh) | Generative Skeleton Mesh | An organic loading state, not a spinner. | `npx shadcn@latest add @wensity/generative-skeleton-mesh` |\n| [`voice-aurora-wave`](https://ui.wensity.com/components/voice-aurora-wave) | Voice Aurora Wave | A breathing voice orb. Never jittery, always organic. | `npx shadcn@latest add @wensity/voice-aurora-wave` |\n| [`model-context-switcher`](https://ui.wensity.com/components/model-context-switcher) | Model Context Switcher | A Radix dropdown that scales out from the trigger and glides between options. | `npx shadcn@latest add @wensity/model-context-switcher` |\n\n### Text Animations\n\nHeadline and word-level motion, from shimmer and glitch to scribble and morph.\n\n| Item | Name | Description | Install |\n| --- | --- | --- | --- |\n| [`text-shimmer`](https://ui.wensity.com/components/text-shimmer) | Text Shimmer | A CSS shimmer sweep for headlines, one single element and entirely GPU-friendly. | `npx shadcn@latest add @wensity/text-shimmer` |\n| [`text-flip`](https://ui.wensity.com/components/text-flip) | Text Flip | A 3D character flip on hover, staggered and springy across every single letter. | `npx shadcn@latest add @wensity/text-flip` |\n| [`text-morphing`](https://ui.wensity.com/components/text-morphing) | Text Morphing | Blur-morphing headlines that cycle phrases with a gooey, seamless crossfade. | `npx shadcn@latest add @wensity/text-morphing` |\n| [`text-char-slide`](https://ui.wensity.com/components/text-char-slide) | Text Char Slide | A per-character slide-left cascade with a cleanly staggered entrance timing. | `npx shadcn@latest add @wensity/text-char-slide` |\n| [`text-motion`](https://ui.wensity.com/components/text-motion) | Text Motion | Headline entrances driven entirely by your own custom Framer Motion variants. | `npx shadcn@latest add @wensity/text-motion` |\n| [`text-cycle`](https://ui.wensity.com/components/text-cycle) | Text Cycle | Cycles through your headline words with a soft per-character blur stagger. | `npx shadcn@latest add @wensity/text-cycle` |\n| [`text-word-flip`](https://ui.wensity.com/components/text-word-flip) | Text Word Flip | Spring-loaded word flips paired with a soft letter-by-letter blur stagger. | `npx shadcn@latest add @wensity/text-word-flip` |\n| [`text-blur-reveal`](https://ui.wensity.com/components/text-blur-reveal) | Text Blur Reveal | A blur-in stagger by word or by letter, triggered the moment you scroll. | `npx shadcn@latest add @wensity/text-blur-reveal` |\n| [`canvas-text`](https://ui.wensity.com/components/canvas-text) | Canvas Text | Loading-ring canvas particles that slowly resolve into solid letterforms. | `npx shadcn@latest add @wensity/canvas-text` |\n| [`line-fill-text`](https://ui.wensity.com/components/line-fill-text) | Line Fill Text | Alpha-cascade ribbons clipped neatly inside the letterforms themselves. | `npx shadcn@latest add @wensity/line-fill-text` |\n| [`text-glitch`](https://ui.wensity.com/components/text-glitch) | Text Glitch | A chromatic clip-path glitch for headlines, CSS-only and entirely GPU-friendly. | `npx shadcn@latest add @wensity/text-glitch` |\n| [`text-path`](https://ui.wensity.com/components/text-path) | Text Path | SVG text riding a curved wave, arc, or circle path on a seamless, light loop. | `npx shadcn@latest add @wensity/text-path",
+ }
+ ],
+ },
+ {
+ slug: "ai-canvas",
+ permission: {
+ status: "granted",
+ source: "https://github.com/aicanvas-me/aicanvas",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "ai-canvas install and usage",
+ url: "https://github.com/aicanvas-me/aicanvas#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "0242a000368640404f6bc1a32d56df4801bd0629",
+ content: "#install\">![\"shadcn](\"assets/readme-buttons/btn-registry.png\") \n \n ![\"Works](\"assets/readme-buttons/btn-agents.png\") \n \n ![\"Listed](\"assets/readme-buttons/btn-mcpservers.png\") \n \n ![\"aicanvas-me](\"assets/readme-buttons/btn-github.png\") \n\n\nInstall · Components · Blocks · MCP · Repo layout · FAQ · License \n\n## Install\n\nAdd any component to your project with one command:\n\n```bash\nnpx shadcn@latest add @aicanvas/task-cards\n```\n\nStarting a new project? Initialize first, then add:\n\n```bash\nnpx shadcn@latest init # new projects only\nnpx shadcn@latest add @aicanvas/task-cards\n```\n\nInstalls are tied to a free AI Canvas account. Signed out, the CLI writes a small placeholder file instead of the component, so authenticate once first:\n\n1. [Sign up free](https://aicanvas.me/account/sign-up) and copy your token from [account settings](https://aicanvas.me/account/settings).\n2. Put it in `.env.local` as `AICANVAS_TOKEN`.\n3. Add the registry to your project's `components.json`, once:\n\n```json\n{ \"registries\": { \"@aicanvas\": { \"url\": \"https://aicanvas.me/r/{name}.json\", \"params\": { \"token\": \"${AICANVAS_TOKEN}\" } } } }\n```\n\nEvery `npx shadcn@latest add @aicanvas/` is authenticated after that. Each component page also shows a ready tokenized command when you are signed in.\n\nNo account is needed to read the code: every component page shows its full source, free to read and copy.\n\n### Requirements\n\nTailwind CSS **v4**, React 19 and Framer Motion. Components are written against Tailwind v4 tokens and will not render correctly on v3. The Next.js App Router is the default target, not a requirement.\n\n### Three ways to use it\n\n| Path | Command or action | Best for |\n| --- | --- | --- |\n| **shadcn CLI** | `npx shadcn@latest add @aicanvas/` | Dropping finished, open-source code straight into your repo |\n| **AI Canvas MCP** | `npx -y @aicanvas/mcp` | Letting your AI editor search and install components for you |\n| **Remix with AI** | Copy the full prompt from any free component page | Rebuilding a component your way in any AI coding tool |\n\nBrowse the full catalog and copy the exact command for any component at [aicanvas.me](https://aicanvas.me). `pnpm dlx`, `yarn dlx`, and `bunx` work too.\n\n## Why AI Canvas\n\n- **MIT licensed.** The free library is MIT, so you can use it in personal and commercial projects, modify it freely, and ship it without attribution. Premium components, design systems, and templates are proprietary.\n- **Full source, yours to keep.** Every component arrives as real React and TypeScript code in your codebase, not a black-box dependency. Restyle it, extend it, or ship it as is. It is yours.\n- **Built for AI workflows.** Install with the shadcn CLI, connect the MCP so your agent installs for you, or hand it a remix prompt that works in any AI coding tool.\n- **Animated by default.** Built with Framer Motion and Tailwind CSS, ready for the Next.js App Router or any modern React setup. 3D pieces use Three.js.\n\n## Components\n\n\n ![\"Tilted](\"https://ik.imagekit.io/aitoolkit/tilted-coverflow.png\") \n ![\"Crypto](\"https://ik.imagekit.io/aitoolkit/crypto-swap.png?v=2\") \n ![\"Signature](\"https://ik.imagekit.io/aitoolkit/signature-pad.png?v=2&tr=w-846,h-480\") \n ![\"Product](\"https://ik.imagekit.io/aitoolkit/product-card-deck.png?v=1\") \n ![\"Glass](\"https://ik.imagekit.io/aitoolkit/glass-ai-compose.png\") \n ",
+ }
+ ],
+ },
+ {
+ slug: "codefronts",
+ permission: {
+ status: "granted",
+ source: "https://github.com/codefronts/toolkit",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "codefronts install and usage",
+ url: "https://github.com/codefronts/toolkit#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "1d86c4c6ec04de5694b0bb4feb5b48caaa5d89cd",
+ content: "# Toolkit\n\nStandalone, framework-free versions of [CodeFronts](https://codefronts.com)' CSS tools and generators. Each tool is a single HTML file — no build step, no `npm install`, no dependencies. Open it in a browser, or drop it into your own project.\n\nThe live, polished versions of these tools live at [codefronts.com/tools](https://codefronts.com/tools) and [codefronts.com/generators](https://codefronts.com/generators). This repo extracts the same underlying logic into portable HTML files that work anywhere, including offline.\n\n## Tools in v1\n\n| Tool | Status |\n|---|---|\n| [px → rem converter](tools/px-to-rem-converter/) | ✅ ready |\n| [CSS Minifier](tools/css-minifier/) | ✅ ready |\n| [CSS Formatter](tools/css-formatter/) | ✅ ready |\n| [CSS Specificity Calculator](tools/css-specificity-calculator/) | ✅ ready |\n| [CSS → Tailwind Converter](tools/css-to-tailwind/) | ✅ ready |\n| [Tailwind → CSS Converter](tools/tailwind-to-css/) | ✅ ready |\n| [HTML → JSX Converter](tools/html-to-jsx/) | ✅ ready |\n| [Box Shadow Generator](tools/css-box-shadow-generator/) | ✅ ready |\n| [Gradient Generator](tools/css-gradient-generator/) | ✅ ready |\n\nMore tools and generators ship as standalone versions over time. The full set lives on [codefronts.com](https://codefronts.com).\n\n## Structure\n\n```\ntoolkit/\n├── index.html # landing page — renders the grid from tools.json\n├── tools.json # manifest: source of truth for the tool list\n├── assets/style.css # shared theme (auto light/dark via prefers-color-scheme)\n├── tools//index.html # one folder per tool\n├── .nojekyll # disables Jekyll on GitHub Pages so _files aren't ignored\n├── LICENSE # MIT\n└── README.md\n```\n\n## Run locally\n\nThe landing page fetches `tools.json`, so it needs to be served over HTTP rather than opened as `file://`:\n\n```sh\npython3 -m http.server 8000\n# visit http://localhost:8000\n```\n\nIndividual tool pages work fine via `file://` — they're self-contained and don't fetch anything.\n\n## Live on GitHub Pages\n\nWhen the repo is public and Pages is enabled, the site is live at:\n\n```\nhttps://codefronts.github.io/toolkit/\n```\n\nEach tool gets its own clean URL — e.g. `https://codefronts.github.io/toolkit/tools/px-to-rem-converter/`.\n\n## Adding a new tool\n\n1. Create `tools//index.html` (copy any existing tool as a starting point).\n2. Add an entry to `tools.json`:\n ```json\n { \"slug\": \"my-tool\", \"name\": \"My Tool\", \"description\": \"What it does.\", \"category\": \"tool\", \"status\": \"ready\" }\n ```\n\nNo other file needs to change — the landing page renders directly from the manifest.\n\n## Contributing\n\nPull requests welcome — especially for:\n- New standalone tool implementations of anything from [codefronts.com/tools](https://codefronts.com/tools) or [codefronts.com/generators](https://codefronts.com/generators) that isn't here yet.\n- Bug fixes or polish on existing tools.\n- Accessibility improvements (keyboard navigation, screen-reader support, focu",
+ }
+ ],
+ },
+ {
+ slug: "intent-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/irsyadadl/intentui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "intent-ui install and usage",
+ url: "https://intentui.com/docs/getting-started/ai",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "m\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Docs\",\"item\":\"https://intentui.com/docs\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Getting started\",\"item\":\"https://intentui.com/docs/getting-started\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Working with AI\",\"item\":\"https://intentui.com/docs/getting-started/ai\"}]}]} Working with AI Copy page Registry To use the Intent UI registry, add the following entry to your components.json : { \"registries\" : { \"@intentui\" : \"https://intentui.com/r/{name}\" } } Initialize Choose a client and run one of the following commands: Codex Claude Cursor Gemini VS Code npx shadcn@latest mcp init --client codex Copy to clipboard Add the following to ~/.codex/config.toml : React aria MCP If you work with AI and use Intent UI, you should consider using the React Aria MCP server. The reason is simple. Intent UI provides a complete set of components, but there are cases where you may need to build a custom component with a different visual style without modifying Intent UI itself. In those situations, the MCP server becomes extremely helpful. Codex Claude Cursor Gemini VS Code codex mcp add react-aria -- npx @react-aria/mcp@latest Copy to clipboard Add the following to ~/.codex/config.toml : If you use both MCP servers, your config should look like this: Skills We provide a dedicated skill for Intent UI. To install it, run the command below. npm pnpm yarn bun npx skills add intentui/skills Copy to clipboard This skill enforces Intent UI conventions when writing or reviewing React and TSX code. You can see a preview of it in action here . What it does The intentui skill helps keep your code aligned with Intent UI best practices by: using components from src/components/ui/ instead of raw HTML elements using semantic design tokens like text-muted-fg and bg-primary instead of raw Tailwind utility colors like text-blue-500 or bg-red-600 applying Heroicons correctly without redundant data-slot=\"icon\" attributes or manual icon sizing inside UI components following the proper form structure with Fieldset , Legend , FieldError , and Description installing missing components from the registry through the shadcn CLI Structure intentui / ├── SKILL .md # Main skill definition └── rules / ├── styling.md # Semantic colors, cx / cn, size -* shorthand, intent prop ├── icons.md # Heroicons rules, 25 components that control icon sizing ├── forms.md # Fieldset, Legend, TextField, FieldError, Description patterns ├── components.md # HTML → Intent UI component mapping, Text / TextLink / Strong / Code └── cli.md # Search & install missing components from the registry Markdown files Every page in the docs is also published as a standalone Markdown file. To view it, add .md to the end of the page URL. You can also use the Copy page button on each page to copy the full content to your clipboard as Markdown. llms.txt The llms.txt file provides an index of all Markdown pages available across the React Aria documentation. References React Aria Shadcn MCP T",
+ }
+ ],
+ },
+ {
+ slug: "reui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/keenthemes/reui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "reui install and usage",
+ url: "https://github.com/keenthemes/reui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "ef0fe1252d9b24d69bdedee48a69ec9b29d1f217",
+ content: "## Getting Started\n\n### Installation\n\nReUI follows the shadcn CLI approach - add blocks from the registry directly into your project (registry items use the `c-` prefix):\n\n```bash\nnpx shadcn@latest add @reui/c-button-10\nnpx shadcn@latest add @reui/c-data-grid-9\nnpx shadcn@latest add @reui/c-filters-5\n```\n\n### Quick Start\n\n1. **Browse the catalog** - Visit [reui.io/components](https://reui.io/components?utm_source=github&utm_medium=readme) to explore 1,175 composed examples (`c-*` blocks)\n2. **Copy code** - Each example includes a ready-to-use code snippet\n3. **Customize** - Modify with your Tailwind CSS tokens and design system\n4. **Own it** - The code lives in your repo, not a package\n\nReUI builds on [@tanstack/react-table](https://tanstack.com/table), [@dnd-kit/core](https://dndkit.com), [recharts](https://recharts.org), [react-hook-form](https://react-hook-form.com), and [Headless Tree](https://headless-tree.lukasbach.com) where it helps, and on plain React everywhere else.\n\n### Requirements\n\n- **React** 18+\n- **Tailwind CSS** 3+\n\n---\n\n## Documentation\n\n- **ReUI Docs** - [reui.io/docs](https://reui.io/docs?utm_source=github&utm_medium=readme)\n- **Component catalog** - [reui.io/components](https://reui.io/components?utm_source=github&utm_medium=readme) - legacy `/patterns` URLs redirect here\n- **GitHub** - [github.com/keenthemes/reui](https://github.com/keenthemes/reui)\n\nEach component page includes live examples, copy-paste snippets, CLI installation guides, TypeScript types, prop documentation, and accessibility notes.\n\n---\n\n## ReUI Pro\n\nReUI's **MCP Server** and **Agent Skill** are free for everyone - they make any AI coding agent genuinely good at building with ReUI.\nA one-time license then unlocks the premium catalog on the same shadcn/ui foundation, with lifetime source ownership - **Pro** for the blocks, **Ultimate** for the blocks plus the motion icons and the templates.\n\n| Feature | Access | Description | Live preview & docs |\n|---------|--------|-------------|---------------------|\n| **629 Pro Blocks** | Pro | Full-page sections across Application, Data Grid, Solutions, eCommerce, Marketing, and AI & Agents, including Event Calendar, Gantt, and Kanban board layouts | [Blocks](https://reui.io/blocks?utm_source=github&utm_medium=readme) · [Application](https://reui.io/blocks/application?utm_source=github&utm_medium=readme) · [Data Grid](https://reui.io/blocks/data-grid?utm_source=github&utm_medium=readme) · [Solutions](https://reui.io/blocks/solutions?utm_source=github&utm_medium=readme) · [eCommerce](https://reui.io/blocks/ecommerce?utm_source=github&utm_medium=readme) · [Marketing](https://reui.io/blocks/marketing?utm_source=github&utm_medium=readme) · [AI & Agents](https://reui.io/blocks/ai-agents?utm_source=github&utm_medium=readme) |\n| **638 Motion Icons** | Ultimate | Hand-crafted icons in 4 styles (Outline, Solid, Duotone, Filled) with hover animation, 2,552 variants | [Icons catalog](https://reui.io/icons?utm_source=github&utm_medium=readme) |\n| **MCP Server** | Free | Connect any coding agent (Claude, Codex, Cursor, v0, Lovable, Replit, OpenCode, VS Code, Zed) to the ReUI registry for live search, real component APIs and one-command installs | [MCP guide](https://reui.io/mcp?utm_source=github&utm_medium=readme) |\n| **Agent Skill** | Free | One command teaches your agent the ReUI workflow - search, install, read the real API, adapt by reuse | [Agent skills](https://reui.io/docs/agent-skills?utm_source=github&utm_medium=readme) |\n| **Workspace** | Pro | ReUI account with favorites, collections, and team access | [Sign in](https://reui.io/account?utm_source=github&utm_medium=readme) |\n\n### Pro Block Categories (65)\n\nEvery Pro category in the catalog, with its current block count. Blocks are full-page sections built on the same free primitives in this repo - [browse them all](https://reui.io/blocks?utm_source=github&utm_medium=readme).\n\n#### Application (344 blocks)\n\n| Category | Blocks | Description | Live preview |\n|----------|--------|-------------|--------------|\n| **App Shell** | 31 | App shell layouts with sidebar, rail, or top bar navigation for dashboards, settings panels, and multi-page apps | [App Shell blocks](https://reui.io/blocks/application/app-shell?utm_source=github&utm_medium=readme) |\n| **Auth** | 20 | Login, register, forgot password, and two-factor authentication page layouts | [Auth blocks](https://reui.io/blocks/application/auth?utm_source=github&utm_medium=readme) |\n| **Card** | 43 | Card components for content display, data summaries, and interactive elements | [Card blocks](https://reui.io/blocks/application/card?utm_source=github&utm_medium=readme) |\n| **Chart** | 47 | Chart components and layouts with bar, line, pie, and area charts for data storytelling | [Chart blocks](https://reui.io/blocks/application/chart?utm_source=github&utm_medium=readme) |\n| **Dashboard** | 8 | Dashboard components and layouts that combine stats, charts, and tables into a complete overvie",
+ }
+ ],
+ },
+ {
+ slug: "elevenlabs-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/elevenlabs/ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "elevenlabs-ui install and usage",
+ url: "https://github.com/elevenlabs/ui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "23c31bd3088814215a8b5d0bfb56b327cad1a578",
+ content: "## Installation\nYou can use the ElevenLabs Agents CLI directly with npx, or install it globally:\n```bash\n# Use directly (recommended)\nnpx @elevenlabs/cli@latest components add \n\n# Or using shadcn cli\nnpx shadcn@latest add https://ui.elevenlabs.io/r/all.json\n```\n\n## Prerequisites\nBefore using ElevenLabs UI, ensure your Next.js project meets these requirements:\n- **Node.js 18** or later\n- **shadcn/ui** initialized in your project (npx shadcn@latest init)\n- **Tailwind CSS** configured\n\n## Usage\n\n### Install All Components\nInstall all available ElevenLabs UI components at once:\n```bash\nnpx @elevenlabs/cli@latest components add all\n```\nThis command will:\n- Set up shadcn/ui if not already configured\n- Install all ElevenLabs UI components to your configured components directory\n- Add necessary dependencies to your project\n\n### Install Specific Components\nInstall individual components using the `components add` command:\n```bash\nnpx @elevenlabs/cli@latest components add \n```\nExamples:\n```bash\n# Install the orb component\nnpx @elevenlabs/cli@latest components add orb\n```\n\n### Alternative: Use with shadcn/ui CLI\n\nYou can also install components using the standard shadcn/ui CLI:\n```bash\n# Install all components\nnpx shadcn@latest add https://ui.elevenlabs.io/r/all.json\n\n# Install a specific component\nnpx shadcn@latest add https://ui.elevenlabs.io/r/orb.json\n```\n\nAll available components can be found [here](https://ui.elevenlabs.io/docs/components) or explore a list of example components [here](https://ui.elevenlabs.io/blocks).\n\n## Contributing\n\nIf you'd like to contribute to ElevenLabs UI, please follow these steps:\n\n1. Fork the repository\n2. Create a new branch\n3. Make your changes to the components in the registry.\n4. Open a PR to the main branch.\n\nPlease read the [contributing guide](/CONTRIBUTING.md).\n\n## License\n\nLicensed under the [MIT license](https://github.com/elevenlabs/ui/blob/main/LICENSE.md).\n\nEngineered by [ElevenLabs](https://elevenlabs.io).",
+ }
+ ],
+ },
+ {
+ slug: "inspira-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/unovue/inspira-ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
-export const libraryCorpus: LibraryCorpusEntry[] = [];
+ snapshots: [
+ {
+ title: "inspira-ui install and usage",
+ url: "https://inspira-ui.com/docs/en/getting-started/installation",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "ira UI Getting Started Components Changelogs Search… k Overview 4 Getting Started Installation How To Contribute Code of Conduct Getting Started Installation Copy page How to install Inspira UI in your app. This guide will help you install and set up Inspira UI components in your Vue or Nuxt application. If you are using Tailwind CSS v3, Checkout Inspira UI v1 here . Getting Started with Inspira UI Set up tailwindcss To begin, install tailwindcss using this Vite install guide for Vue or using this framework-specific guide for Nuxt . Add dependencies Install following supporting libraries. npm pnpm bun yarn npm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins pnpm install @vueuse/core motion-v tw-animate-css @inspira-ui/plugins bun add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins yarn add @vueuse/core motion-v tw-animate-css @inspira-ui/plugins Follow this guide to setup motion-v on Vue or Nuxt . Update your main.css file Skip this step if you are using shadcn-vue . Add the following code to your main.css file, this setup the variable required for the components: Nuxt UI Other TailwindCSS Kit main.css @import \" tailwindcss \" ; @import \" @nuxt/ui \" ; @theme static { --color-background: var(--ui-bg); --color-foreground: var(--ui-text); --color-card: var(--ui-bg-elevated); --color-card-foreground: var(--ui-text); --color-popover: var(--ui-bg-elevated); --color-popover-foreground: var(--ui-text); --color-muted: var(--ui-bg-muted); --color-muted-foreground: var(--ui-text-muted); --color-accent: var(--ui-bg-accented); --color-accent-foreground: var(--ui-text); --color-border: var(--ui-border); --color-input: var(--ui-border); --color-primary: var(--ui-primary); --color-primary-foreground: var(--ui-text-inverted); --color-secondary: var(--ui-secondary); --color-secondary-foreground: var(--ui-text-inverted); --color-destructive: var(--ui-error); --color-destructive-foreground: var(--ui-text-inverted); --color-ring: var(--ui-primary); --radius: var(--ui-radius); } : root { --background : var ( --ui-bg ); --foreground : var ( --ui-text ); --card : var ( --ui-bg-elevated ); --card-foreground : var ( --ui-text ); --popover : var ( --ui-bg-elevated ); --popover-foreground : var ( --ui-text ); --muted : var ( --ui-bg-muted ); --muted-foreground : var ( --ui-text-muted ); --accent : var ( --ui-bg-accented ); --accent-foreground : var ( --ui-text ); --border : var ( --ui-border ); --input : var ( --ui-border ); --primary : var ( --ui-primary ); --primary-foreground : var ( --ui-text-inverted ); --secondary : var ( --ui-secondary ); --secondary-foreground : var ( --ui-text-inverted ); --destructive : var ( --ui-error ); --destructive-foreground : var ( --ui-text-inverted ); --ring : var ( --ui-primary ); } Expand code main.css @import \" tailwindcss \" ; @import \" tw-animate-css \" ; @custom-variant dark (&:is(.dark *)) ; : root { --card : oklch ( 1 0 0 ); --card-foreground : oklch ( 0.141 0.005 285.823 ); --popover : oklch ( 1 0 0 ); --po",
+ }
+ ],
+ },
+ {
+ slug: "reka-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/unovue/reka-ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "reka-ui install and usage",
+ url: "https://github.com/unovue/reka-ui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "75747ccd7a04eae0d3352052bda88a2bebd4b803",
+ content: "## Installation\n\n```bash\npnpm add radix-vue\n```\n```bash\nnpm install radix-vue\n```\n```bash\nyarn add radix-vue\n```\n\n## Documentation\n\nFor full documentation, visit [radix-vue.com](https://radix-vue.com).\n\n## Releases\n\nFor changelog, visit [releases](https://github.com/unovue/radix-vue/releases).\n\n## Contributing\n\nWe would love to have your contributions! All PRs all welcomed! We need help building the core components, docs, tests, stories! Join our discord and we will get you up and running!\n\n## Dev Setup\n\n### Docs\n\n1. Clone the repo\n2. Run `pnpm i`\n3. Run `pnpm build` to run build `radix-vue` locally\n3. Run `pnpm docs:dev` to run vitepress\n4. Open `http://localhost:5173`\n\n### Package\n\n1. Clone the repo\n2. Run `pnpm i`\n3. Run `pnpm story:dev` to run histoire (storybook)\n4. Open `http://localhost:6006`\n\n## Authors\n\n- [Khairul Haaziq](https://github.com/k11q)\n- [Mujahid Anuar](https://github.com/mujahidfa)\n- [Zernonia](https://github.com/zernonia)\n\n## Credits\n\nAll credits go to these open-source works and resources\n\n- [Radix UI](https://radix-ui.com) for doing all the hard work to make sure components are accessible\n- [Floating UI](https://floating-ui.com) for creating powerful components that as the base of many Radix Vue components\n- [VueUse](https://vueuse.org) for providing many useful utilities.\n- [Ark UI](https://ark-ui.com) for the `` component\n- [Radix Svelte](https://radix-svelte.com)\n- [Headless UI](https://headlessui.com)",
+ }
+ ],
+ },
+ {
+ slug: "melt-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/melt-ui/next-gen",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "melt-ui install and usage",
+ url: "https://next.melt-ui.com/guides/installation",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "ct theme Dark Light Auto On this page Overview Prerequisites Installation Basic Usage Using Builders Using Components Next Steps On this page Overview Prerequisites Installation Basic Usage Using Builders Using Components Next Steps Installation Get started with Melt UI by installing it in your Svelte project. 🚧 Melt is in its early stages. Expect breaking changes in minor releases until 1.0 is ready! And lots of new stuff too. 🚀 Prerequisites Section titled “Prerequisites” Node.js version 18 or higher A Svelte project using version 5.0.0 or higher Installation Section titled “Installation” pnpm npm yarn Terminal window pnpm add melt Terminal window npm install melt Terminal window yarn add melt Basic Usage Section titled “Basic Usage” Melt UI provides two ways to use components. Using Builders Section titled “Using Builders” Builders can be called from a Svelte component, or svelte.js|ts files. Uses getters and setters for reactive properties. < script lang = \" ts \" > import { Toggle } from \" melt/builders \" ; let value = $ state ( false ) const toggle = new Toggle ( { value : () => value , onValueChange : ( v ) => (value = v) , } ) ; </ script > < button { ... toggle . trigger } > { toggle . value ? \" On \" : \" Off \" } </ button > {toggle.value ? "On" : "Off"} \"> Using Components Section titled “Using Components” The component pattern provides a more traditional Svelte experience. It provides no elements or styling, and instead provides you with a instance from the builder. The difference lies in being able to use the bind: directive. < script lang = \" ts \" > import { Toggle } from \" melt/components \" ; let value = $ state ( false ) </ script > < Toggle bind : value > {# snippet children (toggle) } < button { ... toggle . trigger } > { toggle . value ? \" On \" : \" Off \" } </ button > {/ snippet } </ Toggle > {#snippet children(toggle)} {toggle.value ? "On" : "Off"} {/snippet} \"> Next Steps Section titled “Next Steps” Check out our components and preview how they work Learn about styling to customize the look and feel Read our How to Use guide for tips on using Melt UI effectively Next Styling",
+ }
+ ],
+ },
+ {
+ slug: "zard-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/zard-ui/zardui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "zard-ui install and usage",
+ url: "https://www.zardui.com/docs/cli",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "Setup Architecture Project Structure Components Blocks Documentation Testing Workflow Release FAQ CLI Copy Page Previous Next Use the zard/ui CLI to add beautiful, accessible components to your Angular project with a single command. Installation Get zard/ui up and running in your project with these steps. Step 1: Initialize your project Run the init command to set up zard/ui. It installs the dependencies, writes the theme tokens and configures the import aliases — and, in an application, wires Tailwind into the build. What runs follows from the project type you pick in the first question. npm pnpm yarn bun npx zard-cli@latest init pnpm dlx zard-cli@latest init yarn zard-cli@latest init bunx zard-cli@latest init The first question is what kind of project you are setting up. Everything after it follows from that answer — which files get configured, and where the components will live. Terminal ◇ zard/ui · initialize Setting up zard/ui in your project… ◆ What are you setting up? ❯ Angular Application — providers in app.config.ts, tokens in the global CSS. Angular Library Publishable library — components ship with it, no app providers. Nx Application inside an Nx workspace — paths go to tsconfig.base.json. Nx Library Library inside an Nx workspace — lives in libs/, no app providers. Analog.js Vite-powered Angular app — Tailwind is a Vite plugin, not PostCSS. Decides where the components live and what init has to configure. ↑/↓ choose enter confirm esc back Answered questions stay on screen as a transcript, and the paths suggested from there on come from the project you picked: Terminal ✔ project type … Nx ✔ app … web ◆ Where is your app.config.ts file? › apps/web/src/app/app.config.ts zard/ui registers its global providers in this file. enter confirm ⌫ edit esc back Text fields are fully editable: arrows and Home / End move the caret, Delete and Backspace cut on either side of it, and Ctrl+W drops the previous word. The first keystroke replaces the whole suggestion — press ← first if you would rather edit it. Once everything is answered, the steps run with live progress. Steps that take a while — installing dependencies, usually — show how long they have been running, so a spinner is never mistaken for a stuck process. Terminal ✔ Writing configuration… ✔ components.json — component & utils aliases ✔ dependencies — CDK, CVA, tailwind-merge, ng-icons (Lucide) ✔ apps/web/src/app/app.config.ts — zard/ui providers ✔ apps/web/.postcssrc.json — Tailwind PostCSS plugin ✔ apps/web/src/styles.css — theme tokens (neutral) ✔ tsconfig.base.json — import path aliases ✔ core & utils — shared helpers used by every component ████████████████████████████████████████ 100% ╭───────────────────────────────────────────────╮ │ ✔ zard/ui has been initialized successfully! │ ╰───────────────────────────────────────────────╯ Step 2: Add components Add one component, several at once, or every available one. Dependencies between components are resolved for you: asking for a comp",
+ }
+ ],
+ },
+ {
+ slug: "spartan-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/spartan-ng/spartan",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "spartan-ui install and usage",
+ url: "https://github.com/spartan-ng/spartan#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "d09b75c826cf064508cac69958e21f883555e3fe",
+ content: "### Install Dependencies\n\nRun `pnpm install` to install the dependencies of this project.\n\n### Development with storybook\n\nA storybook project is set up and is the primary way to develop UI components. You can run it with:\n\n```\npnpm run storybook\n```\n\nStory files live in `apps/ui-storybook/stories`, one per primitive, e.g. `apps/ui-storybook/stories/accordion.stories.ts`.\n\nUse these files to add stories and drive development of the primitives.\n\n### Testing\n\nspartan uses [Jest](https://jestjs.io) for tests. To test all projects locally, run the following command from the root\nfolder:\n\n```shell\npnpm run test\n```\n\n### e2e testing\n\nCypress e2e testing is set up to run on the storybook. You can run it with:\n\n```\npnpm run e2e\n```\n\nTo add your own `e2e` tests add them to the `apps/ui-storybook-e2e` application.\n\n## spartan/stack\n\nAn example application running\non [Supabase](https://supabase.com/), [Drizzle](https://orm.drizzle.team/), [Analog](https://analogjs.org/),\n[tRPC](https://trpc.io/), [Tailwind](https://tailwindcss.com/), [Angular](https://angular.io/),\nand [Nx](https://nx.dev/). It also serves as the documentation page introducing the stack and UI library.\n\nFollow the directions in the official documentation to set up your own project:\nhttps://www.spartan.ng/stack/overview\n\n### Example App\n\nIn the `apps` folder of this repository, you can also find an example application of the spartan stack.\nIt also serves as the documentation page for this project.\n\nFollow the directions below to get it up and running:\n\n#### Prerequisites\n\n- You will need `pnpm` as your package manager.\n- You will need to set up a [Supabase](https://supabase.com/) account (it's free)\n- You will need [NodeJs](https://nodejs.org/en) installed. The version I have working is `20.17.0`.\n\n#### Development server\n\nThen you can run the following command:\n\n```shell\npnpm nx serve app\n```\n\nor\n\n```shell\npnpm run dev\n```\n\nfor a dev server. Navigate to http://localhost:4200/. The app will automatically reload\nif you change any of the source files.\n\n#### Database\n\nWe use Drizzle to connect to a Supabase instance for the example app.\n\nAdd an `.env` file to your repo with the following contents:\n\nAdd a `.env` file at the root of your Nx workspace and add the connection string like so:\n\n```\nDATABASE_URL=\"postgresql://postgres:[YOUR-PASSWORD]@db.[YOUR-SUPABASE-REFERENCE-ID].supabase.co:5432/postgres?schema=public\"\n```\n\nAnd make sure to run the following script in your Supabase editor to set up the necessary tables:\n\n```sql\ncreate table\n public.note (\n id bigserial,\n title text not null,\n content text null,\n created_at timestamp with time zone null default current_timestamp,\n constraint notes_pkey primary key (id)\n ) tablespace pg_default;\n```\n\n> [!NOTE] > `.env` should be added to `.gitignore`\n\n## Understand this workspace\n\nRun `pnpm nx graph` to see a diagram of the dependencies of the projects.\n\n## Documentation\n\n- [Introduction](https://www.spartan.ng/documentation/introduction)\n- [Installation](https://www.spartan.ng/documentation/installation)\n- [CLI](https://www.spartan.ng/documentation/cli)\n- [Theming](https://www.spartan.ng/documentation/theming)\n- [Components](https://www.spartan.ng/components)\n- [Blocks](https://www.spartan.ng/blocks)\n\n## Community\n\n- [Discord](https://discord.gg/EqHnxQ4uQr)\n- [GitHub](https://github.com/spartan-ng/spartan)\n- [Sponsor the project](https://github.com/sponsors/goetzrobin)\n\nRun into an issue or have a question? Open an issue on [GitHub](https://github.com/spartan-ng/spartan/issues) or say hi in [Discord](https://discord.gg/EqHnxQ4uQr).\n\n## License\n\nMIT © [goetzrobin](https://github.com/goetzrobin) and the [spartan contributors](https://github.com/spartan-ng/spartan/graphs/contributors)",
+ }
+ ],
+ },
+ {
+ slug: "corvu",
+ permission: {
+ status: "granted",
+ source: "https://github.com/corvudev/corvu",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "corvu install and usage",
+ url: "https://corvu.dev/docs/installation/",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "croll transitionSize Overview Introduction Installation Usage Overview State Styling Dynamic Primitives Accordion Calendar Dialog Disclosure Drawer OTP Field Popover Resizable Tooltip Utilities dismissible focusTrap list persistent presence preventScroll transitionSize Installation corvu provides every UI primitive as a separate package. This allows you to only install the primitives you need, to use the semver of every package as a reference for breaking/feature changes and progressively update packages in case of new versions. For example the drawer component is available as @corvu/drawer : npm install @corvu/drawer Copy code If you want to install all primitives at once you can install the main package. Unused primitives will get tree-shaken by your bundler, so you don’t have to worry about the bundle size. npm install corvu Copy code You’re good to go! Head over to Usage to learn how to use corvu. Tailwind CSS plugin Section titled Tailwind CSS plugin If you want make use of the tailwind modifiers like corvu-open: , install the tailwind plugin: npm install @corvu/tailwind Copy code Then add the plugin to your tailwind.config.js file: module . exports = { // ... plugins : [ // Use it with the default prefix 'corvu' require ( '@corvu/tailwind' ) , // or with a custom prefix require ( '@corvu/tailwind' )({ prefix : 'ui' }) , // ... ] , } Check out the Styling guide learn how to use the tailwind plugin. Tailwind v4.0 Section titled Tailwind v4.0 Tailwind CSS v4.0 improved working with data attributes a lot and this plugin isn’t considered useful anymore. You can target corvu’s data attributes directly (eg. data-open: or group-data-open: ). UnoCSS preset Section titled UnoCSS preset We also provide a preset for UnoCSS that adds the same modifiers. npm install @corvu/unocss Copy code Add the preset to your uno.config.tsx file: import { defineConfig } from 'unocss' import presetCorvu from '@corvu/unocss' export default defineConfig ({ // ... presets : [ // Use it with the default prefix 'corvu' presetCorvu () , // or with a custom prefix presetCorvu ({ prefix : 'ui' }) , // ... ] , }) Check out the Styling guide learn how to use the UnoCSS preset. Developed and designed by Jasmin On this page Tailwind CSS plugin Tailwind v4.0 UnoCSS preset",
+ }
+ ],
+ },
+ {
+ slug: "starwind-ui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/starwind-ui/starwind-ui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "starwind-ui install and usage",
+ url: "https://github.com/starwind-ui/starwind-ui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "eae0233c05ae6cdef4978787fc4a202beb1eb023",
+ content: "\n ![\"Starwind](\"https://shieldcn.dev/header/gradient.svg?title=Starwind+UI&mode=dark&theme=blue\") \n \n\n\n ![\"npm](\"https://shieldcn.dev/group/npm/starwind+github/stars/starwind-ui/starwind-ui.svg\") \n \n ![\"downloads\"](\"https://shieldcn.dev/npm/dm/starwind.svg\") \n ![\"follow\"](\"https://shieldcn.dev/x/follow/boston343builds.svg?split=true\") \n \n\n**Astro-first, framework-portable UI components you can own.**\n\nStarwind UI gives you accessible, Tailwind CSS components with Starwind/shadcn-style ergonomics,\nbacked by a portable Runtime that powers Astro, React, Vue 3.5 beta, and Svelte 5 beta adapters\ntoday.\n\n**[Explore Components](https://starwind.dev/docs/components/)**\n\n## Why Starwind?\n\n- **🎯 Own Your Code** — Styled components live in your project, where you can understand and customize them.\n- **✨ Animated by Default** — Smooth, polished animations out of the box with Tailwind CSS v4.\n- **♿ Accessible** — Keyboard navigable and screen reader friendly. Built with a11y in mind.\n- **🚀 Portable Runtime** — Shared DOM behavior with generated Astro, React, Vue 3.5 beta, and Svelte 5 beta adapters.\n- **🛠️ CLI-Powered** — Add only what you need with a simple `npx starwind add` command.\n\n> Looking for the main package? See [starwind-ui/cli](/packages/cli/README.md).\n\n## Get Started\n\nInitialize an Astro or React project with the stable release:\n\n```bash\nnpx starwind@latest init\n```\n\nThen add the components you need:\n\n```bash\nnpx starwind@latest add\n```\n\n### Vue 3.5 beta\n\nTry the public beta in Vite Vue, Astro Vue, Nuxt 3 or 4, Laravel with Inertia Vue, or Quasar Vite\nSPA/SSR projects:\n\n```bash\nnpm install @starwind-ui/vue@beta vue@^3.5\nnpx starwind@latest init --framework vue\n```\n\nVue adapters use idiomatic `v-model` arguments, matching `update:*` events, and normal detailed\nevent listeners. The Styled Image component remains Astro-only. The Vue API can change during the\n`0.x` series. Report beta feedback in the\n[Starwind UI issue tracker](https://github.com/starwind-ui/starwind-ui/issues).\n\n### Svelte 5 beta\n\nTry the public beta in Vite with Svelte, SvelteKit, or Astro with Svelte:\n\n```bash\nnpm install @starwind-ui/svelte@beta \"svelte@>=5.29.0 <6\"\nnpx starwind@latest init --framework svelte\n```\n\nThe beta provides the same 36 Primitive families and 54 portable Styled components as the other\nfirst-party adapters. The Styled Image component remains Astro-only. Starwind Pro setup is not\navailable for Svelte. The Svelte API can change",
+ }
+ ],
+ },
+ {
+ slug: "webcoreui",
+ permission: {
+ status: "granted",
+ source: "https://github.com/Frontendland/webcoreui",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "webcoreui install and usage",
+ url: "https://github.com/Frontendland/webcoreui#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "f82f6226fa06ac4025aa07d13d0ab3b605dcb89d",
+ content: "#installation-with-cli)\n - [Manual Installation](#manual-installation)\n - [Setup](#setup)\n - [Using Components](#using-components)\n- [Components](#components)\n- [Blocks](#blocks)\n- [Templates](#templates)\n\n## Documentation\n\n- Full documentation available on [webcoreui.dev](https://webcoreui.dev).\n- For installation steps, visit our [setup docs](https://webcoreui.dev/docs/setup).\n- To build and test components visually, visit our [builder](https://webcoreui.dev/build).\n\n## Getting Started\n\nWebcore can be used as a standalone project, or it can be integrated into your existing Astro, Svelte, or React ecosystems. The easiest way to get started is to clone the repository and run `npm run dev` to start building your pages with the components available.\n\n### Prerequisites\n\n> [!NOTE]\n> Before getting started, make sure you have a package manager installed, such as Node.\n\nWebcore components use Sass for styling. To use the component library, you must have the following packages installed:\n\n- [Sass](https://www.npmjs.com/package/sass) - `v1.100`\n- [TypeScript](https://www.npmjs.com/package/typescript) - `v5.9`\n\nDepending on your project setup, you'll also need the following packages:\n\n- **For Astro projects**\n - [Astro](https://www.npmjs.com/package/astro) - `v5.18`\n- **For Svelte projects**\n - [Svelte](https://www.npmjs.com/package/svelte) - `v5.55`\n- **For React projects**\n - [React](https://www.npmjs.com/package/react) - `v19.2`\n - [React DOM](https://www.npmjs.com/package/react-dom) -`v19.2`\n\n### Installation with CLI\n\nYou can use our CLI tool to create a new Webcore project, or integrate it into an existing project more easily:\n\n```bash\n# Create a new Webcore project\nnpm create webcore@latest\n\n# Update configuration files for an existing Astro project\nnpm create webcore@latest config\n\n# Create a new Webcore project with a specific template\nnpm create webcore@latest template [TemplateName] [destination]\n\n# Use the \"Portfolio\" template on the current directory\nnpm create webcore@latest template Portfolio\n\n# Create the \"Portfolio\" template in the \"portfolio\" directory\nnpm create webcore@latest template Portfolio ./portfolio\n```\n\n### Manual Installation\n\nInstall Webcore as a dependency by running one of the following command:\n\n```bash\n# Using NPM\nnpm i webcoreui\n\n# Using Yarn\nyarn add webcoreui\n```\n\n### Setup\n\nAdd the following integration to your Astro configuration file (`astro.config.mjs`) at the root of your project directory:\n\n```js\nimport { webcore } from 'webcoreui/integration'\n\nexport default defineConfig({\n integrations: [webcore()]\n})\n```\n\n> [!TIP]\n> We also recommend adding [`astro-purgecss`](https://www.npmjs.com/package/astro-purgecss) to improve your CSS bundle size.\n\nCreate an empty [`webcore.config.scss`](https://webcoreui.dev/docs/css-configuration#webcoreconfigscss) file at the root of your project to setup CSS configurations. Setup default styles and fonts by calling the following in your global SCSS file:\n\n```scss\n@use 'webcoreui/styles' as *;\n@include setup((\n // Define paths for your fonts\n fontRegular: '/fonts/Inter-Regular.woff2',\n fontBold: '/fonts/Inter-Bold.woff2'\n));\n```\n\n> [!TIP]\n> You can download the fonts Webcore uses from the [`public/fonts`](https://github.com/Frontendland/webcoreui/tree/main/public/fonts) directory.\n\nThe `setup` mixin can also accept the following options:\n\n\n| Property | Default value | Purpose |\n|-----------|---------------|---------|\n| `includeResets` | `true` | Include reset styles. Set to `false` if you want to use your own CSS resets. |\n| `includeUtilities` | `true` | Adds utility classes for CSS. Read more about the available utility classes [here](https://webcoreui.dev/docs/layout). |\n| `includeTooltip` | `true` | Adds styles for using tooltips.\n| `includeScrollbarStyles` | `true` | Adds styles for scrollbars.\n| `includeBreakpoints` | `true` | Exposes breakpoint variables in CSS for JS. Used by components for responsiveness. |\n| `theme` | `dark` | Sets the default theme. Read more about available themes [here](https://webcoreui.dev/docs/themes). |\n| `themes` | `()` | Pass a map to enable multiple themes. Values can be arbitrary CSS selectors that actives the theme. |\n\nDefault component styles can be changed by overriding the following CSS variables:\n\n```scss\nhtml body {\n // Avatar component\n --w-avatar-border: var(--w-color-primary-70);\n\n // Banner component\n --w-banner-top: 0;\n\n // BottomNavigation component\n --w-bottom-navigation-max-width: auto;\n\n // Checkbox component\n --w-checkbox-color: var(--w-color-primary);\n\n // Collapsible component\n --w-collapsible-initial-height: 0;\n --w-collapsible-max-height: 100%;\n\n // Counter component\n --w-counter-width: 10ch;\n\n // Masonry component\n --w-masonry-gap: 5px;\n\n // Progress component\n --w-progress-color: var(--w-color-primary);\n --w-progress-background: var(--w-color-prima",
+ }
+ ],
+ },
+ {
+ slug: "web-awesome",
+ permission: {
+ status: "granted",
+ source: "https://github.com/shoelace-style/webawesome",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "web-awesome install and usage",
+ url: "https://webawesome.com/docs",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "site-docs@2026-10-10",
+ content: "/utilities.css \" /> <!-- Optional: CSS reset (\"Native Styles\") --> < link rel = \" stylesheet \" href = \" https://ka-f.webawesome.com/ [email protected] /styles/native.css \" /> Prefer one line? styles/webawesome.css pulls in the theme, utility classes, and native styles together. Now you can use any Web Awesome component ! Try putting a button on the page: < wa-button variant = \" brand \" > Click me! </ wa-button > Using Web Awesome Pro? Visit your workspaces for personalized installation docs. Installing with npm Link to This Section Start by installing the Web Awesome package: npm install @awesome.me/webawesome Then, in your JavaScript files, import the default theme and any components you want to use. // Web Awesome styles import '@awesome.me/webawesome/dist/styles/webawesome.css' ; // Import the components you want to use import '@awesome.me/webawesome/dist/components/button/button.js' ; import '@awesome.me/webawesome/dist/components/input/input.js' ; Once a component has been imported, you can use it in your HTML normally. Components are cherry picked to ensure you're getting the smallest possible bundle. You can find each component import in the \"Importing\" section of its documentation. Using Web Awesome Pro? Visit your workspaces for personalized installation docs. Get the Download (Advanced) Link to This Section You can download Web Awesome from npm and self-host it. npm pack @awesome.me/webawesome This will download a .tgz archive containing all Web Awesome files. Extract it and host the files on your own server. Additional Setup Link to This Section The Difference Between /dist & /dist-cdn Link to This Section If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root: dist/ dist-cdn/ The dist-cdn files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently. Use dist-cdn if you're loading directly in the browser or from a CDN. Use dist if you're using a bundler like Webpack or Vite. Referencing Necessary Styles Link to This Section If you're self-hosting Web Awesome, you'll need to set up your pages to reference any necessary styles. You can do so by referencing webawesome.css , or you can pick and choose specific stylesheets you'd like to use. <!-- Option 1: use all Web Awesome styles --> < link rel = \" stylesheet \" href = \" /dist/styles/webawesome.css \" /> <!-- Option 2: pick and choose styles --> <!-- Required: theme --> < link rel = \" stylesheet \" href = \" /dist/styles/themes/default.css \" /> <!-- Recommended: utility classes (\"CSS Utilities\") --> < link rel = \" stylesheet \" href = \" /dist/styles/utilities.css \" /> <!-- Optional: CSS reset (\"Native Styles\") --> < link rel = \" stylesheet \" href = \" /dist/styles/native.css \" /> If you choose to use a theme other than the default theme, be sure to add",
+ }
+ ],
+ },
+ {
+ slug: "cmdk",
+ permission: {
+ status: "granted",
+ source: "https://github.com/pacocoursey/cmdk",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "cmdk install and usage",
+ url: "https://github.com/pacocoursey/cmdk#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "dd2250ed608443e8f32bafc5fa2d1d07a3746aa3",
+ content: "## Install\n\n```bash\npnpm install cmdk\n```\n\n## Use\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n return (\n \n \n \n No results found.\n\n \n a\n b\n \n c\n \n\n Apple\n \n \n )\n}\n```\n\nOr in a dialog:\n\n```tsx\nimport { Command } from 'cmdk'\n\nconst CommandMenu = () => {\n const [open, setOpen] = React.useState(false)\n\n // Toggle the menu when ⌘K is pressed\n React.useEffect(() => {\n const down = (e) => {\n if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {\n e.preventDefault()\n setOpen((open) => !open)\n }\n }\n\n document.addEventListener('keydown', down)\n return () => document.removeEventListener('keydown', down)\n }, [])\n\n return (\n \n \n \n No results found.\n\n \n a\n b\n \n c\n \n\n Apple\n \n \n )\n}\n```\n\n## Parts and styling\n\nAll parts forward props, including `ref`, to an appropriate element. Each part has a specific data-attribute (starting with `cmdk-`) that can be used for styling.\n\n### Command `[cmdk-root]`\n\nRender this to show the command menu inline, or use [Dialog](#dialog-cmdk-dialog-cmdk-overlay) to render in a elevated context. Can be controlled with the `value` and `onValueChange` props.\n\n> **Note**\n>\n> Values are always trimmed with the [trim()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/trim) method.\n\n```tsx\nconst [value, setValue] = React.useState('apple')\n\nreturn (\n \n \n \n Orange\n Apple\n \n \n)\n```\n\nYou can provide a custom `filter` function that is called to rank each item. Note that the value will be trimmed.\n\n```tsx\n {\n if (value.includes(search)) return 1\n return 0\n }}\n/>\n```\n\nA third argument, `keywords`, can also be provided to the filter function. Keywords act as aliases for the item value, and can also affect the rank of the item. Keywords are trimmed.\n\n```tsx\n {\n const extendValue = value + ' ' + keywords.join(' ')\n if (extendValue.includes(search)) return 1\n return 0\n }}\n/>\n```\n\nOr disable filtering and sorting entirely:\n\n```tsx\n\n \n {filteredItems.map((item) => {\n return (\n \n {item}\n \n )\n })}\n \n\n```\n\nYou can make the arrow keys wrap around the list (when you reach the end, it goes back to the first item) by setting the `loop` prop:\n\n```tsx\n\n```\n\n### Dialog `[cmdk-dialog]` `[cmdk-overlay]`\n\nProps are forwarded to [Command](#command-cmdk-root). Composes Radix UI's Dialog component. The overlay is always rendered. See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog) for more information. Can be controlled with the `open` and `onOpenChange` props.\n\n```tsx\nconst [open, setOpen] = React.useState(false)\n\nreturn (\n \n ...\n \n)\n```\n\nYou can provide a `container` prop that accepts an HTML element that is forwarded to Radix UI's Dialog Portal component to specify which element the Dialog should portal into (defaults to `body`). See the [Radix Documentation](https://www.radix-ui.com/docs/primitives/components/dialog#portal) for more information.\n\n```tsx\nconst containerElement = React.useRef(null)\n\nreturn (\n <>\n \n \n \n)\n```\n\n### Input `[cmdk-input]`\n\nAll props are forwarded to the underlying `input` element. Can be controlled with the `value` and `onValueChange` props.\n\n```tsx\nconst [search, setSearch] = React.useState('')\n\nreturn \n```\n\n### List `[cmdk-list]`\n\nContains items and groups. Animate height using the `--cmdk-list-height` CSS variable.\n\n```css\n[cmdk-list] {\n min-height: 300px;\n height: var(--cmdk-list-height);\n max-height: 500px;\n transition: height 100ms ease;\n}\n```\n\nTo scroll item in",
+ }
+ ],
+ },
+ {
+ slug: "kbar",
+ permission: {
+ status: "granted",
+ source: "https://github.com/timc1/kbar",
+ checkedAt: "2026-10-09T20:12:29.747Z",
+ },
+ snapshots: [
+ {
+ title: "kbar install and usage",
+ url: "https://github.com/timc1/kbar#readme",
+ fetchedAt: "2026-10-09T20:12:29.747Z",
+ sourceRevision: "26ec0f49f92ab34fa6ab59392782d56020f28098",
+ content: "### Usage\n\nHave a fully functioning command menu for your site in minutes. First, install kbar.\n\n```\nnpm install kbar\n```\n\nThere is a single provider which you will wrap your app around; you do not have to wrap your\n_entire_ app; however, there are no performance implications by doing so.\n\n```tsx\n// app.tsx\nimport { KBarProvider } from \"kbar\";\n\nfunction MyApp() {\n return (\n \n // ...\n \n );\n}\n```\n\nLet's add a few default actions. Actions are the core of kbar – an action define what to execute\nwhen a user selects it.\n\n```tsx\n const actions = [\n {\n id: \"blog\",\n name: \"Blog\",\n shortcut: [\"b\"],\n keywords: \"writing words\",\n perform: () => (window.location.pathname = \"blog\"),\n },\n {\n id: \"contact\",\n name: \"Contact\",\n shortcut: [\"c\"],\n keywords: \"email\",\n perform: () => (window.location.pathname = \"contact\"),\n },\n ]\n\n return (\n \n // ...\n \n );\n}\n```\n\nNext, we will pull in the provided UI components from kbar:\n\n```tsx\n// app.tsx\nimport {\n KBarProvider,\n KBarPortal,\n KBarPositioner,\n KBarAnimator,\n KBarSearch,\n useMatches,\n NO_GROUP\n} from \"kbar\";\n\n// ...\n return (\n \n // Renders the content outside the root node\n // Centers the content\n // Handles the show/hide and height animations\n // Search input\n \n \n \n \n ;\n );\n}\n```\n\nAt this point hitting cmd+k (macOS) or ctrl+k (Linux/Windows) will animate in a search input and nothing more.\n\nkbar provides a few utilities to render a performant list of search results.\n\n- `useMatches` at its core returns a flattened list of results and group name based on the current\n search query; i.e. `[\"Section name\", Action, Action, \"Another section name\", Action, Action]`\n- `KBarResults` renders a performant virtualized list of these results\n\nCombine the two utilities to create a powerful search interface:\n\n```tsx\nimport {\n // ...\n KBarResults,\n useMatches,\n NO_GROUP,\n} from \"kbar\";\n\n// ...\n// \n// \n;\n// ...\n\nfunction RenderResults() {\n const { results } = useMatches();\n\n return (\n \n typeof item === \"string\" ? (\n {item} \n ) : (\n \n {item.name}\n \n )\n }\n />\n );\n}\n```\n\nHit cmd+k (macOS) or ctrl+k (Linux/Windows) and you should see a primitive command menu. kbar allows you to have full control over all\naspects of your command menu – refer to the docs to get\nan understanding of further capabilities. Looking forward to see what you build.\n\n## Used by\n\nListed are some of the various usages of kbar in the wild – check them out! Create a PR to add your\nsite below.\n\n- [Outline](https://www.getoutline.com/)\n- [zenorocha.com](https://zenorocha.com/)\n- [griko.id](https://griko.id/)\n- [lavya.me](https://www.lavya.me/)\n- [OlivierAlexander.com](https://olivier-alexander-com-git-master-olivierdijkstra.vercel.app/)\n- [dhritigabani.me](https://dhritigabani.me/)\n- [jpedromagalhaes](https://jpedromagalhaes.vercel.app/)\n- [animo](https://demo.animo.id/)\n- [tobyb.xyz](https://www.tobyb.xyz/)\n- [higoralves.dev](https://www.higoralves.dev/)\n- [coderdiaz.dev](https://coderdiaz.dev/)\n- [NextUI](https://nextui.org/)\n- [evm.codes](https://www.evm.codes/)\n- [filiphalas.com](https://filiphalas.com/)\n- [benslv.dev](https://benslv.dev/)\n- [vortex](https://hydralite.io/vortex)\n- [ladislavprix](https://ladislavprix.cz/)\n- [pixiebrix](https://www.pixiebrix.com/)\n- [nfaustino.com](https://nfaustino-com.vercel.app/)\n- [bradleyyeo.com](https://bradleyyeo-com.vercel.app/)\n- [andredevries.dev](https://www.andredevries.dev/)\n- [about-ebon](https://about-ebon.vercel.app/)\n- [frankrocha.dev](https://www.frankrocha.dev/)\n- [cameronbrill.me](https://www.cameronbrill.me/)\n- [codaxx.ml](https://codaxx.ml/)\n- [jeremytenjo.com](https://jeremytenjo.com/)\n- [villivald.com](https://villivald.com/)\n- [maxthestranger](https://code.maxthestranger.com/)\n- [koripallopaikat](https://koripallopaikat.com/)\n- [alexcarpenter.me](https://alexcarpenter.me/)\n- [hackbar](https://github.com/Uier/hackbar)\n- [web3kbar](https://web3kbar.vercel.app/)\n- [burakgur](https://burakgur-com.vercel.app/)\n- [ademilter.com](https://ademilter.com/)\n- [anasaraid.me](https://anasaraid.me/)\n- [daniloleal.co](https://daniloleal.co/)\n- [hyperround](https://github.com/heyAyushh/hyperound)\n- [Omnivore](https://omnivore.app)\n- [tiagohermano.dev](",
+ }
+ ],
+ },
+];
````
## data/library-details/cmdk.ts
Status: added; +44; −0
```diff
@@ -1,0 +1,44 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+ docsUrl: "https://github.com/pacocoursey/cmdk#readme",
+ repoUrl: "https://github.com/pacocoursey/cmdk",
+ install: [
+ { label: "npm", command: "npm install cmdk" },
+ { label: "pnpm", command: "pnpm install cmdk" },
+ ],
+ gettingStarted: [
+ "Install `cmdk` in an existing React 18 or 19 project; it ships its own TypeScript types and no stylesheet.",
+ "Import `Command` from `cmdk` and compose the menu from `Command.Input`, `Command.List`, `Command.Empty`, `Command.Group`, and `Command.Item`; items filter and sort automatically as the user types.",
+ "The same parts work as an accessible combobox when you control the open state yourself; wrap items in your own components or plain JSX — the API is fully composable.",
+ "Style every part with the project's own CSS or Tailwind classes; cmdk ships no theme. The shadcn/ui Command component is a styled wrapper around this package.",
+ ],
+ pricing: {
+ model: "free",
+ summary: "cmdk is free and open source under MIT.",
+ license: "MIT",
+ source: "https://github.com/pacocoursey/cmdk",
+ },
+ agentPrompt: `Add cmdk (https://github.com/pacocoursey/cmdk) to this existing React project.
+
+cmdk is an unstyled command menu React component that doubles as an accessible
+combobox: you render items and it filters and sorts them automatically. The
+application supplies all styling.
+
+Prerequisites:
+- Inspect the React version (18 or 19), the project's styling approach, and any
+ existing command palette or combobox.
+
+Steps:
+1. Run "npm install cmdk" (or "pnpm install cmdk") from the project root.
+2. Build the menu from \`Command\` and its parts as the README shows:
+ \`Command.Input\`, \`Command.List\`, \`Command.Empty\`, \`Command.Group\`,
+ \`Command.Item\`, \`Command.Separator\`.
+3. Style every part with the project's own conventions; cmdk ships no styles.
+4. Verify the palette filters as the user types and works from the keyboard.
+
+Consult https://github.com/pacocoursey/cmdk#readme before deviating; the API is
+composable, so wrapping items in project components is supported. If the project
+already uses shadcn/ui's Command component, prefer that instead of adding cmdk
+twice.`,
+} satisfies LibraryDetails;
```
## data/library-details/index.ts
Status: modified; +4; −0
```diff
@@ -41,6 +41,8 @@
import headless_ui from "./headless-ui.ts";
import tailwind_css from "./tailwind-css.ts";
import kibo_ui from "./kibo-ui.ts";
+import cmdk from "./cmdk.ts";
+import kbar from "./kbar.ts";
import shadcnblocks from "./shadcnblocks.ts";
import ruixen_ui from "./ruixen-ui.ts";
import fancy_components from "./fancy-components.ts";
@@ -121,6 +123,8 @@
"headless-ui": headless_ui,
"tailwind-css": tailwind_css,
"kibo-ui": kibo_ui,
+ "cmdk": cmdk,
+ "kbar": kbar,
"shadcnblocks": shadcnblocks,
"ruixen-ui": ruixen_ui,
"fancy-components": fancy_components,
```
## data/library-details/kbar.ts
Status: added; +43; −0
```diff
@@ -1,0 +1,43 @@
+import type { LibraryDetails } from "./types";
+
+export default {
+ docsUrl: "https://github.com/timc1/kbar#readme",
+ repoUrl: "https://github.com/timc1/kbar",
+ install: [
+ { label: "npm", command: "npm install kbar" },
+ { label: "pnpm", command: "pnpm add kbar" },
+ ],
+ gettingStarted: [
+ "Install `kbar` in an existing React 17, 18, or 19 project; it ships its own TypeScript types.",
+ "Wrap the app in `KBarProvider` with an initial `actions` array; each action is plain data (`id`, `name`, `shortcut`, `keywords`, `perform`) so anyone can build custom UI on top.",
+ "Render `KBarPortal` with `KBarPositioner`, `KBarSearch`, and `KBarResults` to get the built-in command menu, or supply your own components against the same data structure.",
+ "Use nested actions for drill-down navigation, and the built-in history helpers for undo and redo; screen-reader support ships in the box.",
+ ],
+ pricing: {
+ model: "free",
+ summary: "kbar is free and open source under MIT.",
+ license: "MIT",
+ source: "https://github.com/timc1/kbar",
+ },
+ agentPrompt: `Add kbar (https://github.com/timc1/kbar) to this existing React project.
+
+kbar is a plug-n-play command + k (command palette) component: keyboard
+navigation, shortcuts, nested actions, animations, and screen-reader support
+come built in, and every visual part is replaceable.
+
+Prerequisites:
+- Inspect the React version (17, 18, or 19), existing keyboard-shortcut
+ handling, and any installed command palette to avoid duplicates.
+
+Steps:
+1. Run "npm install kbar" (or "pnpm add kbar") from the project root.
+2. Wrap the app in \`KBarProvider\` with an \`actions\` array; each action is
+ plain data (id, name, shortcut, keywords, perform).
+3. Render \`KBarPortal\` > \`KBarPositioner\` > \`KBarSearch\` + \`KBarResults\`
+ for the default UI, or replace the visuals against the same data structure.
+4. Register the project's real actions (navigation, theme toggles, searches)
+ and verify keyboard access end to end.
+
+Consult https://github.com/timc1/kbar#readme before deviating; nested actions
+and history helpers cover drill-down and undo flows.`,
+} satisfies LibraryDetails;
```
## data/library-details/magic-ui.ts
Status: modified; +1; −0
```diff
@@ -11,6 +11,7 @@
}
}`,
},
+ componentInstallTemplate: "npx shadcn@latest add @magicui/{slug}",
install: [
{ label: "Initialize shadcn in the project", command: "npx shadcn@latest init" },
{ label: "Add a Magic UI component", command: "npx shadcn@latest add @magicui/globe" },
```
## data/library-details/mantine.ts
Status: modified; +1; −1
```diff
@@ -23,7 +23,7 @@
},
agentPrompt: `Add Mantine to this existing React project.
-Prerequisites: a React 18+ app (Vite, Next.js, or React Router recommended; Create React App is not supported), with PostCSS available through your bundler. Check the framework guide at https://mantine.dev/guides/vite/ or https://mantine.dev/guides/next/ if your setup differs.
+Prerequisites: a React 19.2+ app (Vite, Next.js, or React Router recommended; Create React App is not supported), with PostCSS available through your bundler. Check the framework guide at https://mantine.dev/guides/vite/ or https://mantine.dev/guides/next/ if your setup differs.
Steps:
1. Install the runtime packages: "npm install @mantine/core @mantine/hooks". Install PostCSS tooling: "npm install --save-dev postcss postcss-preset-mantine postcss-simple-vars".
```
## data/library-details/shadcn-svelte.ts
Status: modified; +1; −0
```diff
@@ -3,6 +3,7 @@
export default {
docsUrl: "https://www.shadcn-svelte.com/docs",
repoUrl: "https://github.com/huntabyte/shadcn-svelte",
+ componentInstallTemplate: "npx shadcn-svelte@latest add {slug}",
install: [
{
label: "Add Tailwind CSS to a Svelte project",
```
## data/library-details/shadcn-ui.ts
Status: modified; +1; −0
```diff
@@ -3,6 +3,7 @@
export default {
docsUrl: "https://ui.shadcn.com/docs",
repoUrl: "https://github.com/shadcn-ui/ui",
+ componentInstallTemplate: "npx shadcn@latest add {slug}",
install: [
{ label: "Initialize an existing project", command: "npx shadcn@latest init" },
{ label: "Add a component", command: "npx shadcn@latest add button" },
```
## data/library-details/types.ts
Status: modified; +2; −0
```diff
@@ -13,6 +13,8 @@
repoUrl?: string;
/** Current official install commands. Omit for resources that are not installed. */
install?: { label: string; command: string }[];
+ /** Documented registry pattern that installs one component; "{slug}" stands for the component's registry slug. */
+ componentInstallTemplate?: string;
/** Registry prerequisites shown before the component install commands. */
registrySetup?: { description: string; config?: string };
/** Short, concrete steps to get started. */
```
## lib/compatibility.test.mjs
Status: modified; +18; −0
```diff
@@ -3,6 +3,7 @@
import { resolveCompatibility, compatibilityReport } from "./compatibility.ts";
import { compatibility } from "../data/compatibility.ts";
import { libraries } from "../data/libraries.ts";
+import { libraryDetails } from "../data/library-details/index.ts";
// The seam under test is the compatibility resolver: what it reports for a
// subject, and that unknowns stay explicit rather than being substituted.
@@ -50,3 +51,20 @@
}
}
});
+
+test("recorded compatibility never contradicts the library's own getting-started text", () => {
+ const claim = /react\s*(\d+(?:\.\d+)?)\s*(?:\+| or newer| or later)/i;
+ const violations = [];
+ for (const library of libraries) {
+ const details = libraryDetails[library.slug];
+ const text = [...(details?.gettingStarted ?? []), details?.agentPrompt ?? ""].join(" ");
+ const match = text.match(claim);
+ if (!match) continue;
+ const recorded = compatibility.flatMap((entry) => (entry.slug === library.slug ? entry.facts : []));
+ const reactFacts = recorded.filter((fact) => fact.subject === "react" && fact.status === "supported");
+ if (!reactFacts.some((fact) => fact.constraint.includes(match[1]))) {
+ violations.push(`${library.slug} (docs claim React ${match[1]}+)`);
+ }
+ }
+ assert.deepEqual(violations, [], "these libraries claim a React version in text with no matching recorded fact");
+});
```
## lib/compatibility.ts
Status: modified; +22; −0
```diff
@@ -1,4 +1,5 @@
import type { CompatibilityFact } from "../data/compatibility";
+import type { Stack } from "../data/libraries";
/**
* The compatibility resolver: versions and variants per subject, with three
@@ -36,3 +37,24 @@
unknown: resolved.filter((fact) => fact.status === "unknown").map((fact) => fact.subject),
};
}
+
+/** npm subjects that apply to a library, derived from the frameworks it targets. */
+const FRAMEWORK_SUBJECTS: Partial> = {
+ React: ["react", "react-dom"],
+ "Next.js": ["react", "react-dom"],
+ Vue: ["vue"],
+ Svelte: ["svelte"],
+ SvelteKit: ["svelte"],
+ Angular: ["@angular/core"],
+ SolidJS: ["solid-js"],
+};
+
+/**
+ * The subjects Col tracks for one library: the frameworks it targets, the Node
+ * runtime every install runs under, and anything it records a fact for. Never
+ * the global union of subjects some other library happens to use.
+ */
+export function trackedSubjects(stacks: readonly Stack[], facts: readonly CompatibilityFact[]): string[] {
+ const derived = stacks.flatMap((stack) => FRAMEWORK_SUBJECTS[stack] ?? []);
+ return [...new Set(["node", ...derived, ...facts.map((fact) => fact.subject)])];
+}
```
## lib/directory.ts
Status: modified; +78; −19
```diff
@@ -44,6 +44,8 @@
* own fields matched, so a non-empty list is always the reason to show it.
*/
components: LibraryComponent[];
+ /** What matched, as ":" — never a bare boolean. */
+ matchedOn: string[];
}
interface IndexedComponent {
@@ -57,10 +59,47 @@
components: IndexedComponent[];
}
+/**
+ * Matching vocabulary: lowercase, fold separators into spaces, collapse runs.
+ * "command-Palette" and "cmd+k" then speak the same language as "command
+ * palette", while symbols like ⌘ survive untouched.
+ */
+export function normalizeWords(text: string): string {
+ return text
+ .toLowerCase()
+ .replace(/[-_+]+/g, " ")
+ .replace(/[^a-z0-9.+#⌘ ]+/g, " ")
+ .replace(/\s+/g, " ")
+ .trim();
+}
+
+/** Query tokens that can discriminate: folded, and long enough to mean something. */
+export function wordTokens(query: string): string[] {
+ return normalizeWords(query).split(" ").filter((token) => token.length > 1);
+}
+
+/**
+ * A token matches at a word start, never mid-word: "cmd" touches "cmdk", while
+ * a stray letter matches nothing at all.
+ */
-function componentHaystack(component: LibraryComponent): string {
+export function tokenMatches(haystack: string, token: string): boolean {
- return [component.name, ...(component.aliases ?? [])].join(" ").toLowerCase();
+ const escaped = token.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+ return new RegExp("(^|[^a-z0-9])" + escaped).test(haystack);
}
+/** Folded terms plus their de-spaced forms, so glued spellings still match. */
+function buildHaystack(terms: readonly string[]): string {
+ const folded = terms.map(normalizeWords).filter(Boolean);
+ const despaced = folded
+ .filter((term) => term.length <= 40 && term.includes(" "))
+ .map((term) => term.replace(/ /g, ""));
+ return [...folded, ...despaced].join(" ");
+}
+
+export function componentHaystack(component: LibraryComponent): string {
+ return buildHaystack([component.name, ...(component.aliases ?? [])]);
+}
+
/**
* Flattens every searchable field once. The registry only changes on deploy, so
* paying this on each keystroke instead would be pure waste.
@@ -68,16 +107,14 @@
function buildIndex(registry: readonly Library[], components: ComponentIndex): IndexedLibrary[] {
return registry.map((library) => ({
library,
- haystack: [
+ haystack: buildHaystack([
library.name,
library.description,
library.category,
...library.stacks,
...library.useCases,
...(library.tags ?? []),
- ]
- .join(" ")
+ ]),
- .toLowerCase(),
components: (components[library.slug] ?? []).map((component) => ({
component,
haystack: componentHaystack(component),
@@ -112,13 +149,23 @@
normalizedQuery: string,
): number {
const name = component.name.toLowerCase();
- if (name === normalizedQuery) return 0;
- if (name.startsWith(normalizedQuery)) return 1;
- if (tokens.every((token) => name.includes(token))) return 2;
const aliases = (component.aliases ?? []).map((alias) => alias.toLowerCase());
- if (aliases.includes(normalizedQuery)) return 3;
- if (tokens.some((token) => name.includes(token))) return 4;
- return 5;
+ const nameExact = normalizedQuery !== "" && name === normalizedQuery;
+ const aliasExact = aliases.includes(normalizedQuery);
+ const namePhrase = tokens.length > 0 && tokens.every((token) => name.includes(token)) || normalizedQuery !== "" && name.startsWith(normalizedQuery);
+ const aliasPhrase = aliases.some((alias) => tokens.length > 0 && tokens.every((token) => alias.includes(token)) || normalizedQuery !== "" && alias.startsWith(normalizedQuery));
+ const nameHit = nameExact || namePhrase;
+ const aliasHit = aliasExact || aliasPhrase;
+ const loose = nameHit || aliasHit || tokens.some((token) => name.includes(token) || aliases.some((alias) => alias.includes(token)));
+ if (!loose) return 8;
+ // Spec order: exact group -> functional over visual effect -> name over
+ // alias -> phrase over single token.
+ return (
+ (nameExact || aliasExact ? 0 : 1) * 8 +
+ (component.kind === "visual-effect" ? 4 : 0) +
+ (aliasHit && !nameHit ? 2 : 0) +
+ (nameHit || aliasHit ? 0 : 1)
+ );
}
/**
@@ -141,8 +188,8 @@
useCases,
sort,
}: DirectoryQuery): SearchResult[] {
- const normalizedQuery = query.toLowerCase().trim().replace(/\s+/g, " ");
- const tokens = normalizedQuery.split(/\s+/).filter(Boolean);
+ const normalizedQuery = normalizeWords(query);
+ const tokens = wordTokens(query);
const results = index
.filter(({ library }) => {
@@ -153,7 +200,7 @@
);
})
.flatMap((entry) => {
- const componentTokens = tokens.filter((token) => !entry.haystack.includes(token));
+ const componentTokens = tokens.filter((token) => !tokenMatches(entry.haystack, token));
// With no tokens every component would vacuously match, so browsing the
// directory must not present a seeded library's components as hits.
// Library metadata can supply context such as "radix" in "radix accordion",
@@ -163,11 +210,11 @@
? []
: entry.components
.filter(({ haystack }) =>
- tokens.some((token) => haystack.includes(token)) &&
- componentTokens.every((token) => haystack.includes(token)),
+ tokens.some((token) => tokenMatches(haystack, token)) &&
+ componentTokens.every((token) => tokenMatches(haystack, token)),
)
.map(({ component, haystack }) => {
- const matchingTokens = tokens.filter((token) => haystack.includes(token));
+ const matchingTokens = tokens.filter((token) => tokenMatches(haystack, token));
return {
component,
rank: componentRank(component, matchingTokens, matchingTokens.join(" ")),
@@ -178,7 +225,19 @@
.sort((a, b) => a.rank - b.rank)
.map(({ component }) => component);
if (componentTokens.length > 0 && components.length === 0) return [];
+ const matchedOn = [
- return [{ library: entry.library, components }];
+ ...components.map((component) => `component:${component.name}`),
+ ...tokens
+ .filter((token) => tokenMatches(entry.haystack, token))
+ .map((token) => {
+ if (tokenMatches(normalizeWords(entry.library.name), token)) return `name:${token}`;
+ if ((entry.library.tags ?? []).some((tag) => tokenMatches(normalizeWords(tag), token))) return `tag:${token}`;
+ if (entry.library.stacks.some((stack) => tokenMatches(normalizeWords(stack), token))) return `stack:${token}`;
+ if (entry.library.useCases.some((useCase) => tokenMatches(normalizeWords(useCase), token))) return `useCase:${token}`;
+ return `description:${token}`;
+ }),
+ ];
+ return [{ library: entry.library, components, matchedOn }];
});
// Array.prototype.sort is stable, so returning 0 keeps curated order.
```
## lib/mcp-eval.test.mjs
Status: modified; +4; −4
```diff
@@ -46,7 +46,7 @@
assert.deepEqual(
result.results.map(({ id }) => id),
- ["shadcn-ui/Command", "mantine/Spotlight", "shadcn-svelte/Command"],
+ ["shadcn-ui/Command", "mantine/Spotlight", "shadcn-svelte/Command", "cmdk/Command"],
"'command palette' is a recorded alias of Command and Mantine Spotlight",
);
});
@@ -76,7 +76,7 @@
});
test("a query about nothing in the catalogue returns an honest empty result", () => {
- const result = call("search_libraries", { query: "purple dinosaur widget" });
+ const result = call("search_libraries", { query: "purple dinosaur zeppelin" });
assert.deepEqual(result.results, []);
assert.equal(result.total, 0);
@@ -91,9 +91,9 @@
for (const hit of result.results) {
const url = hit.colListingUrl ?? hit.url;
assert.match(url, /^https:\/\//, "every hit links to a source");
- assert.ok(["verified", "partial", "unverified"].includes(hit.evidence.verification));
- assert.ok(hit.evidence.gaps.length > 0, "partial coverage must state its gaps");
+ assert.ok(["verified", "unverified"].includes(hit.evidence.verification.page));
}
+ assert.ok(result.evidence.gaps.length > 0, "partial coverage must state its gaps on the response");
}
});
```
## lib/mcp-tools.test.mjs
Status: modified; +153; −2
```diff
@@ -36,7 +36,8 @@
"expected the Command component to explain the match",
);
+ assert.equal(result.evidence.verification.page, "verified");
+ assert.equal(result.evidence.verification.snapshot, "ingested");
- assert.equal(result.evidence.verification, "partial");
assert.ok(result.evidence.gaps.some((gap) => /partial/i.test(gap)));
assert.ok(result.total >= result.results.length);
});
@@ -124,8 +125,158 @@
assert.equal(result.isError, undefined);
assert.deepEqual(
result.structuredContent.results.map(({ name }) => name),
- ["Number Field", "Number Field Extended", "Other", "Field"],
+ ["Number Field", "Other", "Number Field Extended"],
`unexpected ranking for ${JSON.stringify(query)}`,
);
}
+});
+
+test("get_component gives the component's own install command and dependencies", () => {
+ const result = call("get_component", { id: "shadcn-ui/Command" });
+ assert.ok(
+ result.install.some(({ command }) => command === "npx shadcn@latest add command"),
+ "expected the component's own add command, not the library-wide example",
+ );
+ assert.ok(result.dependencies.includes("cmdk"));
+ assert.ok(result.registryDependencies.includes("dialog"));
+});
+
+test("registry templates use the component's own slug", () => {
+ const result = call("get_component", { id: "magic-ui/Animated Beam" });
+ assert.ok(result.install.some(({ command }) => command === "npx shadcn@latest add @magicui/animated-beam"));
+});
+
+test("a library without a component pattern keeps its documented install", () => {
+ const result = call("get_component", { id: "base-ui/Alert Dialog" });
+ assert.ok(result.install.some(({ command }) => command === "npm i @base-ui/react"));
+ assert.deepEqual(result.dependencies, []);
+ assert.deepEqual(result.registryDependencies, []);
+});
+
+test("compatibility unknowns name only subjects that apply to the library", () => {
+ const result = call("get_library", { slug: "shadcn-ui" });
+ assert.ok(!result.compatibility.unknown.includes("@emotion/react"), "Emotion is not part of a Tailwind library's vocabulary");
+ assert.ok(result.compatibility.unknown.includes("react"));
+});
+
+test("a recorded range replaces the unknown for its subject", () => {
+ const result = call("get_library", { slug: "heroui" });
+ assert.ok(result.compatibility.supported.some((fact) => fact.subject === "react" && fact.constraint === ">= 19"));
+ assert.ok(!result.compatibility.unknown.includes("react"));
});
+
+test("search_components filters by stack and shows stacks on every hit", () => {
+ const unfiltered = call("search_components", { query: "command palette" });
+ assert.ok(unfiltered.results.some((hit) => hit.id.startsWith("shadcn-svelte/")), "precondition: the unfiltered query crosses stacks");
+ const react = call("search_components", { query: "command palette", stacks: ["React"] });
+ assert.ok(react.results.length > 0);
+ for (const hit of react.results) {
+ assert.ok(hit.library.stacks.includes("React"));
+ assert.ok(!hit.library.stacks.includes("Svelte"));
+ }
+});
+
+test("components say what kind of thing they are", () => {
+ const effect = call("search_components", { query: "spotlight", library: "aceternity-ui" }).results.find((hit) => hit.name === "Spotlight");
+ assert.equal(effect.kind, "visual-effect");
+ const palette = call("search_components", { query: "command palette", library: "shadcn-ui" }).results[0];
+ assert.equal(palette.kind, "full-pattern");
+ const primitive = call("search_components", { query: "dialog", library: "radix-ui" }).results.find((hit) => hit.name === "Dialog");
+ assert.equal(primitive.kind, "primitive");
+});
+
+test("components are findable under the shared names people use", () => {
+ const ids = call("search_components", { query: "modal" }).results.map((hit) => hit.id);
+ assert.ok(ids.includes("shadcn-ui/Dialog"), "dialog components inherit the modal alias");
+});
+
+test("every primitive-library component records its kind", () => {
+ for (const slug of ["radix-ui", "base-ui", "reka-ui", "melt-ui", "ark-ui", "headless-ui", "react-aria", "corvu", "spartan-ui"]) {
+ for (const component of componentIndex[slug]) {
+ assert.equal(component.kind, "primitive", `${slug}/${component.name} must record its kind`);
+ }
+ }
+});
+
+test("a stray letter never floods the results", () => {
+ const noise = call("search_components", { query: "cmd k" });
+ assert.ok(noise.total > 0 && noise.total < 20, `expected a handful of word matches, got ${noise.total}`);
+ assert.equal(call("search_components", { query: "e" }).total, 0);
+ assert.equal(call("search_libraries", { query: "e" }).total, 0);
+});
+
+test("glued and symbol spellings resolve like the spaced form", () => {
+ const spaced = call("search_components", { query: "command palette" });
+ assert.equal(call("search_components", { query: "commandpalette" }).total, spaced.total);
+ assert.equal(call("search_components", { query: "command-palette" }).total, spaced.total);
+ assert.ok(call("search_components", { query: "cmd+k" }).results.some((hit) => hit.id === "shadcn-ui/Command"));
+ assert.ok(call("search_components", { query: "⌘k" }).results.some((hit) => hit.id === "shadcn-ui/Command"));
+});
+
+test("ranking puts real search UIs above visual effects that share the word", () => {
+ const hits = call("search_components", { query: "spotlight" }).results;
+ const pos = (id) => hits.findIndex((hit) => hit.id === id);
+ assert.ok(pos("mantine/Spotlight") >= 0 && pos("aceternity-ui/Spotlight") >= 0, "precondition: both are results");
+ assert.ok(pos("mantine/Spotlight") < pos("aceternity-ui/Spotlight"), "the real Spotlight search must lead");
+ assert.ok(pos("shadcn-ui/Command") < pos("aceternity-ui/Spotlight"), "a functional exact alias beats a visual effect");
+});
+
+test("every hit states what matched", () => {
+ const libHits = call("search_libraries", { query: "command menu", stacks: ["React", "Tailwind CSS"] }).results;
+ assert.ok(libHits.length > 0);
+ assert.ok(libHits.every((hit) => hit.matchedOn.length > 0));
+ assert.ok(libHits.find((hit) => hit.slug === "shadcn-ui").matchedOn.some((why) => why.startsWith("component:")));
+ const compHits = call("search_components", { query: "command palette", stacks: ["React"] }).results;
+ assert.ok(compHits.length > 0);
+ assert.ok(compHits.every((hit) => hit.matchedOn.length > 0));
+ assert.ok(compHits[0].matchedOn.includes("stack:React"));
+ assert.ok(compHits[0].matchedOn.some((why) => why.startsWith("alias:") || why.startsWith("name:")));
+});
+
+test("empty results explain which kind of empty they are", () => {
+ const missingLibrary = call("search_components", { query: "command", library: "not-a-library" });
+ assert.equal(missingLibrary.total, 0);
+ assert.equal(missingLibrary.indexStatus, "library not in index");
+ const unrecorded = call("search_components", { query: "zzzz", library: "heroui" });
+ assert.equal(unrecorded.indexStatus, "library indexed, component not recorded");
+ const noMatch = call("search_components", { query: "command zzz" });
+ assert.equal(noMatch.indexStatus, "no recorded component matches");
+ assert.ok(Array.isArray(noMatch.suggestions));
+ assert.ok(noMatch.suggestions.some((suggestion) => suggestion.id === "shadcn-ui/Command"), "a near miss gets a suggestion");
+ assert.equal(call("search_libraries", { query: "quantum blockchain" }).indexStatus, "no recorded library matches");
+});
+
+test("get_library lists the components Col records", () => {
+ const result = call("get_library", { slug: "shadcn-ui" });
+ assert.equal(result.componentCount, result.components.length);
+ assert.ok(result.components.some((component) => component.id === "shadcn-ui/Command"));
+ assert.equal(result.components.find((component) => component.id === "shadcn-ui/Command").kind, "full-pattern");
+});
+
+test("shared caveats appear once per response, not on every hit", () => {
+ const result = call("search_components", { query: "dialog" });
+ assert.ok(result.results.length > 1);
+ assert.ok(result.evidence.gaps.length > 0, "the shared caveat lives on the envelope");
+ for (const hit of result.results) {
+ assert.ok(
+ !(hit.evidence?.gaps ?? []).some((gap) => result.evidence.gaps.includes(gap)),
+ "per-hit gaps must not repeat the shared ones",
+ );
+ }
+});
+
+test("verification is stated per field and never contradicts across tools", () => {
+ const fromSearch = call("search_components", { query: "command palette", library: "shadcn-ui" }).results[0];
+ const fromGet = call("get_component", { id: "shadcn-ui/Command" });
+ assert.deepEqual(fromSearch.evidence.verification, fromGet.evidence.verification);
+ assert.deepEqual(Object.keys(fromGet.evidence.verification).sort(), ["compatibility", "install", "page", "snapshot"]);
+ assert.equal(fromGet.evidence.verification.page, "verified");
+ assert.equal(fromGet.evidence.verification.install, "component");
+ assert.equal(fromGet.evidence.verification.snapshot, "ingested");
+});
+
+test("source URLs record their variants and when Col verified them", () => {
+ const result = call("get_component", { id: "shadcn-ui/Command" });
+ assert.ok(result.variants.base && result.variants.radix, "both documented variants must be recorded");
+ assert.match(result.verifiedAt, /^\d{4}-\d{2}-\d{2}$/);
+});
```
## lib/mcp-tools.ts
Status: modified; +245; −54
```diff
@@ -2,12 +2,13 @@
import type { Category, Library, Stack, UseCase } from "../data/libraries";
import { CATEGORIES, STACKS, USE_CASES } from "../data/libraries.ts";
import type { ComponentIndex, LibraryComponent } from "../data/components";
+import { componentConcepts, type ComponentKind } from "../data/components.ts";
import type { LibraryDetails } from "../data/library-details/types";
import type { DocSnapshot, LibraryCorpusEntry } from "../data/library-corpus/types";
import type { CompatibilityFact, LibraryCompatibility } from "../data/compatibility";
+import { componentHaystack, componentRank, createDirectorySearch, normalizeWords, tokenMatches, wordTokens, type SearchResult } from "./directory.ts";
-import { componentRank, createDirectorySearch, type SearchResult } from "./directory.ts";
import { admissibleSnapshots } from "./corpus.ts";
-import { compatibilityReport, type CompatibilityReport } from "./compatibility.ts";
+import { compatibilityReport, trackedSubjects, type CompatibilityReport } from "./compatibility.ts";
import { libraryPath, siteUrl } from "./site.ts";
/**
@@ -31,10 +32,21 @@
/** How well Col has verified what a result claims. */
export type Verification = "verified" | "partial" | "unverified";
+/**
+ * Verification stated per field, so "verified" never means different things in
+ * different tools and a gap stays attributable to the field that has it.
+ */
+export interface FieldVerification {
+ page: "verified" | "unverified";
+ install: "component" | "library-level" | "none";
+ compatibility: "recorded" | "unknown";
+ snapshot: "ingested" | "none";
+}
+
/** The shared envelope every tool result carries. */
export interface Evidence {
- verification: Verification;
- /** What Col has not verified. Never empty for "partial" or "unverified". */
+ verification: FieldVerification;
+ /** What Col has not verified for this result; shared caveats live once on the response envelope. */
gaps: string[];
}
@@ -46,6 +58,7 @@
url: string;
/** The library's own page in Col, for stable referencing. */
colListingUrl: string;
+ matchedOn: string[];
category: Category;
stacks: Stack[];
useCases: UseCase[];
@@ -54,7 +67,23 @@
evidence: Evidence;
}
+/** The empty-result explanations the tools use; a closed set, never free prose. */
+export type EmptyHint =
+ | "no recorded library matches"
+ | "no recorded component matches"
+ | "library indexed, component not recorded"
+ | "library not in index";
+
+/** A component pointer: enough to browse or re-fetch, never the whole record. */
+export interface ComponentRef {
+ id: string;
+ name: string;
+ kind?: ComponentKind;
+}
+
export interface SearchLibrariesResult {
+ /** Present only on an empty result: which kind of empty it is. */
+ indexStatus?: EmptyHint;
results: LibraryHit[];
/** Total matches before pagination. */
total: number;
@@ -68,11 +97,21 @@
aliases: string[];
/** Canonical documentation page for this exact component. */
url: string;
+ kind?: ComponentKind;
+ summary?: string;
+ builtOn?: string;
+ verifiedAt?: string;
- library: { slug: string; name: string; url: string };
+ variants?: Record;
+ matchedOn?: string[];
+ library: { slug: string; name: string; url: string; stacks: Stack[] };
evidence: Evidence;
}
export interface SearchComponentsResult {
+ /** Present only on an empty result: which kind of empty it is. */
+ indexStatus?: EmptyHint;
+ /** Near misses worth trying when the strict query matched nothing. */
+ suggestions?: ComponentRef[];
results: ComponentHit[];
total: number;
evidence: Evidence;
@@ -91,6 +130,9 @@
repoUrl: string | null;
install: { label: string; command: string }[];
registrySetup: { description: string; config?: string } | null;
+ /** Every component Col records for this library, browsable without guessing queries. */
+ components: ComponentRef[];
+ componentCount: number;
gettingStarted: string[];
pricing: LibraryDetails["pricing"] | null;
/** Recorded facts and named unknowns; never a guess. */
@@ -103,18 +145,18 @@
evidence: Evidence;
}
+export type ComponentDetailsResult = Omit & {
-export interface ComponentDetailsResult {
- id: string;
- name: string;
+ library: { slug: string; name: string; url: string; docsUrl: string | null; stacks: Stack[] };
- aliases: string[];
- url: string;
- library: { slug: string; name: string; url: string; docsUrl: string | null };
/** Installation evidence is only claimed when the library's details record it. */
install: { label: string; command: string }[];
+ /** npm packages this component installs, as its registry records them. */
+ dependencies: string[];
+ /** Registry components this one pulls in, by registry name. */
+ registryDependencies: string[];
registrySetup: { description: string; config?: string } | null;
compatibility: CompatibilityReport;
evidence: Evidence;
-}
+};
/** A JSON-RPC tool result: either a payload or a typed error. */
export type ToolResult = {
@@ -175,6 +217,11 @@
return { slug: id.slice(0, separator), name: id.slice(separator + 1) };
}
+/** The slug a registry-style CLI expects for a component name, e.g. "Alert Dialog" -> "alert-dialog". */
+function registrySlug(name: string): string {
+ return name.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "");
+}
+
const PAGE_ARGS = {
limit: z.number().int().min(1).max(MAX_LIMIT).optional(),
offset: z.number().int().min(0).optional(),
@@ -191,6 +238,7 @@
const searchComponentsArgs = z.object({
query: z.string().min(1).describe("Component name or alias, e.g. 'command palette' or 'datepicker'."),
library: z.string().min(1).optional().describe("Restrict to one library slug."),
+ stacks: z.array(z.enum(STACKS)).optional().describe("Every listed stack must apply (AND). At most one framework."),
...PAGE_ARGS,
});
@@ -216,7 +264,7 @@
]);
function keywordTokens(query: string): string[] {
- return query.toLowerCase().split(/[^a-z0-9.+#-]+/).filter((token) => token !== "" && !STOP_WORDS.has(token));
+ return wordTokens(query).filter((token) => !STOP_WORDS.has(token));
}
/**
@@ -246,22 +294,27 @@
throw new ArgumentError(`${name} arguments invalid — ${detail}`);
}
-function componentHit(library: Library, component: LibraryComponent): ComponentHit {
+function componentHit(library: Library, component: LibraryComponent, verification: FieldVerification): ComponentHit {
return {
id: componentId(library.slug, component.name),
name: component.name,
aliases: component.aliases ?? [],
url: component.url,
+ kind: component.kind,
+ summary: component.summary,
- library: { slug: library.slug, name: library.name, url: library.url },
+ builtOn: component.builtOn,
+ verifiedAt: component.verifiedAt,
+ variants: component.variants,
+ library: { slug: library.slug, name: library.name, url: library.url, stacks: library.stacks },
evidence: {
+ verification,
+ gaps: [],
- verification: "verified",
- gaps: ["Component coverage for this library is partial; other components may be undocumented."],
},
};
}
+function libraryHit(result: SearchResult, verification: FieldVerification): LibraryHit {
-function libraryHit(result: SearchResult): LibraryHit {
+ const { library, components, matchedOn } = result;
- const { library, components } = result;
return {
slug: library.slug,
name: library.name,
@@ -272,12 +325,10 @@
stacks: library.stacks,
useCases: library.useCases,
matchedComponents: components,
+ matchedOn,
evidence: {
- verification: "partial",
- gaps: [
+ verification,
+ gaps: [],
- COVERAGE_GAP,
- "Stack and use-case metadata is curated, not exhaustive: check the library's official docs for full compatibility.",
- ],
},
};
}
@@ -295,18 +346,93 @@
return admissibleSnapshots(entry).length > 0 ? "partial" : "unverified";
}
+function evidenceState(
+ facts: readonly CompatibilityFact[],
+ entry: LibraryCorpusEntry | undefined,
+): Pick {
+ return {
+ compatibility: facts.length > 0 ? "recorded" : "unknown",
+ snapshot: entry && admissibleSnapshots(entry).length > 0 ? "ingested" : "none",
+ };
+}
+
+function componentVerification(
+ component: LibraryComponent,
+ details: LibraryDetails | undefined,
+ facts: readonly CompatibilityFact[],
+ entry: LibraryCorpusEntry | undefined,
+): FieldVerification {
+ return {
+ page: "verified",
+ install: component.install || details?.componentInstallTemplate ? "component" : details?.install?.length ? "library-level" : "none",
+ ...evidenceState(facts, entry),
+ };
+}
+
+function libraryVerification(
+ details: LibraryDetails | undefined,
+ facts: readonly CompatibilityFact[],
+ entry: LibraryCorpusEntry | undefined,
+): FieldVerification {
+ return {
+ page: "verified",
+ install: details?.install?.length ? "library-level" : "none",
+ ...evidenceState(facts, entry),
+ };
+}
+
+/**
+ * The weakest per-field state across a response, so a shared envelope never
+ * overstates what any single hit supports.
+ */
+function weakestVerification(states: readonly FieldVerification[]): FieldVerification {
+ const worst = (values: readonly T[], order: readonly T[]) =>
+ [...order].reverse().find((value) => values.includes(value)) ?? order[order.length - 1];
+ return {
+ page: worst(states.map((state) => state.page), ["verified", "unverified"]),
+ install: worst(states.map((state) => state.install), ["component", "library-level", "none"]),
+ compatibility: worst(states.map((state) => state.compatibility), ["recorded", "unknown"]),
+ snapshot: worst(states.map((state) => state.snapshot), ["ingested", "none"]),
+ };
+}
+
+/** Concept aliases are searchable on every component that links to the concept. */
+function withConceptAliases(index: ComponentIndex, concepts: Record): ComponentIndex {
+ return Object.fromEntries(
+ Object.entries(index).map(([slug, components]) => [
+ slug,
+ components.map((component) => {
+ const extra = component.concept ? concepts[component.concept] ?? [] : [];
+ return extra.length > 0
+ ? { ...component, aliases: [...new Set([...(component.aliases ?? []), ...extra])] }
+ : component;
+ }),
+ ]),
+ );
+}
+
export function createCatalogueTools(data: CatalogueData): CatalogueTools {
- const searchDirectory = createDirectorySearch(data.libraries, data.componentIndex);
- // Every subject Col has ever recorded a fact for: the vocabulary a library's
- // report names its unknowns against, so gaps are named rather than implied.
- const subjects = [...new Set(data.compatibility.flatMap((entry) => entry.facts.map((fact) => fact.subject)))];
-
+ const index = withConceptAliases(data.componentIndex, componentConcepts);
+ const searchDirectory = createDirectorySearch(data.libraries, index);
function searchLibraries(raw: unknown): SearchLibrariesResult {
const args = parseArgs("search_libraries", searchLibrariesArgs, raw);
const limit = args.limit ?? MAX_LIMIT;
const offset = args.offset ?? 0;
const keywords = keywordTokens(args.query ?? "");
+ // A query that was all noise ("e") must not become a blank query that
+ // browses the whole catalogue.
+ if ((args.query ?? "").trim() !== "" && keywords.length === 0) {
+ return {
+ results: [],
+ total: 0,
+ indexStatus: "no recorded library matches",
+ evidence: {
+ verification: weakestVerification([]),
+ gaps: [COVERAGE_GAP, "Compatibility constraints are recorded only where verified; ask for one library's details to see its explicit unknowns."],
+ },
+ };
+ }
const matches = searchDirectory({
query: liveTokens(keywords, (token) => searchDirectory({ query: token, category: null, stacks: [], useCases: [], sort: "curated" }).length > 0).join(" "),
category: args.category ?? null,
@@ -315,10 +441,17 @@
sort: "curated",
});
return {
- results: matches.slice(offset, offset + limit).map(libraryHit),
+ results: matches.slice(offset, offset + limit).map((match) =>
+ libraryHit(match, libraryVerification(data.details[match.library.slug], compatibilityFor(data, match.library.slug), corpusFor(data, match.library.slug))),
+ ),
total: matches.length,
+ ...(matches.length === 0 ? { indexStatus: "no recorded library matches" as EmptyHint } : {}),
evidence: {
+ verification: weakestVerification(
+ matches.map((match) =>
- verification: "partial",
+ libraryVerification(data.details[match.library.slug], compatibilityFor(data, match.library.slug), corpusFor(data, match.library.slug)),
+ ),
+ ),
gaps: [
"Component coverage is partial: a missing component is not evidence that a library lacks it.",
"Compatibility constraints are recorded only where verified; ask for one library's details to see its explicit unknowns.",
@@ -336,24 +469,68 @@
const matches: ComponentHit[] = [];
for (const entry of data.libraries) {
if (args.library !== undefined && entry.slug !== args.library) continue;
+ if (args.stacks !== undefined && !args.stacks.every((stack) => entry.stacks.includes(stack))) continue;
+ const details = data.details[entry.slug];
+ const facts = compatibilityFor(data, entry.slug);
+ const corpusEntry = corpusFor(data, entry.slug);
+ for (const component of index[entry.slug] ?? []) {
+ const haystack = componentHaystack(component);
+ if (keywords.length > 0 && keywords.every((token) => tokenMatches(haystack, token))) {
+ const matchedOn = [
+ ...keywords.flatMap((token) =>
+ tokenMatches(normalizeWords(component.name), token)
+ ? [`name:${token}`]
+ : (component.aliases ?? [])
+ .filter((alias) => tokenMatches(normalizeWords(alias), token))
+ .map((alias) => `alias:${alias}`),
+ ),
+ ...(args.stacks ?? []).map((stack) => `stack:${stack}`),
+ ];
- for (const component of data.componentIndex[entry.slug] ?? []) {
- const haystack = `${component.name} ${(component.aliases ?? []).join(" ")}`.toLowerCase();
- if (keywords.some((token) => haystack.includes(token))) matches.push(componentHit(entry, component));
+ matches.push({
+ ...componentHit(entry, component, componentVerification(component, details, facts, corpusEntry)),
+ matchedOn,
+ });
+ }
}
}
// Same exact-name-first rule the directory uses, so an exact official name
// or recorded alias outranks a substring touch on any other component.
const normalizedQuery = keywords.join(" ");
matches.sort((a, b) => componentRank(a, keywords, normalizedQuery) - componentRank(b, keywords, normalizedQuery));
+ const envelopeGaps = [
+ "Every listed component is verified on the library's own documentation, but coverage is partial: a missing component is not evidence of absence.",
+ ];
+ const envelopeVerification = weakestVerification(matches.map((hit) => hit.evidence.verification));
+ if (matches.length > 0) {
+ return {
+ results: matches.slice(offset, offset + limit),
+ total: matches.length,
+ evidence: { verification: envelopeVerification, gaps: envelopeGaps },
+ };
+ }
+ // An empty result must say which kind of empty it is, and offer near misses.
+ const indexStatus = args.library === undefined
+ ? "no recorded component matches"
+ : data.libraries.some((entry) => entry.slug === args.library)
+ ? "library indexed, component not recorded"
+ : "library not in index";
+ const suggestions: ComponentRef[] = [];
+ if (args.library === undefined) {
+ for (const entry of data.libraries) {
+ for (const component of index[entry.slug] ?? []) {
+ const haystack = componentHaystack(component);
+ if (keywords.some((token) => tokenMatches(haystack, token))) {
+ suggestions.push({ id: componentId(entry.slug, component.name), name: component.name, kind: component.kind });
+ }
+ }
+ }
+ }
return {
- results: matches.slice(offset, offset + limit),
- total: matches.length,
- evidence: {
- verification: "partial",
- gaps: [
+ results: [],
+ total: 0,
+ indexStatus,
+ suggestions: suggestions.slice(0, 3),
+ evidence: { verification: weakestVerification([]), gaps: envelopeGaps },
- "Every listed component is verified on the library's own documentation, but coverage is partial: a missing component is not evidence of absence.",
- ],
- },
};
}
@@ -380,12 +557,18 @@
repoUrl: details?.repoUrl ?? null,
install: details?.install ?? [],
registrySetup: details?.registrySetup ?? null,
+ components: (index[library.slug] ?? []).map((component) => ({
+ id: componentId(library.slug, component.name),
+ name: component.name,
+ kind: component.kind,
+ })),
+ componentCount: (index[library.slug] ?? []).length,
gettingStarted: details?.gettingStarted ?? [],
pricing: details?.pricing ?? null,
- compatibility: compatibilityReport(facts, subjects),
+ compatibility: compatibilityReport(facts, trackedSubjects(library.stacks, facts)),
documentation: { verification: verificationFor(entry), snapshots: entry ? admissibleSnapshots(entry) : [] },
evidence: {
+ verification: libraryVerification(details, facts, entry),
- verification: details ? "partial" : "unverified",
gaps: [
COVERAGE_GAP,
compatibilityGap(facts),
@@ -405,23 +588,31 @@
}
const library = data.libraries.find((entry) => entry.slug === parsedId.slug);
+ const component = library && (index[parsedId.slug] ?? []).find((entry) => entry.name === parsedId.name);
- const component = library && (data.componentIndex[parsedId.slug] ?? []).find((entry) => entry.name === parsedId.name);
if (!library || !component) {
throw new ArgumentError(`unknown component id "${args.id}"; use search_components to find valid ids`);
}
const details = data.details[library.slug];
const facts = compatibilityFor(data, library.slug);
+ const componentCommand =
+ component.install ?? details?.componentInstallTemplate?.replace("{slug}", registrySlug(component.name));
return {
+ ...componentHit(library, component, componentVerification(component, details, facts, corpusFor(data, library.slug))),
+ library: { slug: library.slug, name: library.name, url: library.url, docsUrl: details?.docsUrl ?? null, stacks: library.stacks },
+ install: componentCommand
+ ? [{ label: `Add ${component.name}`, command: componentCommand }]
+ : details?.install ?? [],
+ dependencies: component.dependencies ?? [],
- ...componentHit(library, component),
+ registryDependencies: component.registryDependencies ?? [],
- library: { slug: library.slug, name: library.name, url: library.url, docsUrl: details?.docsUrl ?? null },
- install: details?.install ?? [],
registrySetup: details?.registrySetup ?? null,
+ compatibility: compatibilityReport(facts, trackedSubjects(library.stacks, facts)),
- compatibility: compatibilityReport(facts, subjects),
evidence: {
- verification: "partial",
+ verification: componentVerification(component, details, facts, corpusFor(data, library.slug)),
gaps: [
- "The component page is verified on the library's own documentation; installation and API details come from the library's setup docs and may cover more than this component.",
+ componentCommand
+ ? "API and usage details come from the library's setup docs and may cover more than this component."
+ : "The component page is verified on the library's own documentation; installation and API details come from the library's setup docs and may cover more than this component.",
compatibilityGap(facts),
COVERAGE_GAP,
],
@@ -473,21 +664,21 @@
{
name: "search_components",
title: "Search Col's verified component index",
- description: `Find components by their official name or a real alias, optionally scoped to one library. Every hit links to the component's own documentation page on the library's domain. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
+ description: `Find components by their official name or a real alias, optionally scoped to one library and one or more stacks. Every hit links to the component's own documentation page on the library's domain, states what matched, and names its kind. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
args: searchComponentsArgs,
annotations: annotation,
},
{
name: "get_library",
title: "Inspect one library in Col",
- description: `Everything Col records about one library: description, stacks, install commands, registry setup, pricing, verified compatibility facts (explicit "unknown" where nothing is verified), and any ingested documentation snapshots. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
+ description: `Everything Col records about one library: description, stacks, install commands, registry setup, pricing, the components Col records for it (with componentCount), verified compatibility facts (explicit "unknown" where nothing is verified), and any ingested documentation snapshots. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
args: getLibraryArgs,
annotations: annotation,
},
{
name: "get_component",
title: "Inspect one component in Col",
- description: `One component's canonical documentation link plus its library's install commands, registry setup, and verified compatibility facts (explicit "unknown" where nothing is verified). Ids come from search_components as '/'. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
+ description: `One component's canonical documentation link plus its exact install command and dependencies where the library records them (otherwise the library's install commands), registry setup, and verified compatibility facts (explicit "unknown" where nothing is verified). Ids come from search_components as '/'. ${COVERAGE_NOTE} ${NO_CREDENTIALS_NOTE}`,
args: getComponentArgs,
annotations: annotation,
},
```
## scripts/verify-sources.mjs
Status: added; +47; −0
```diff
@@ -1,0 +1,47 @@
+#!/usr/bin/env node
+// Re-verifies every stored component source URL and reports drift: dead links
+// and redirects whose target differs from what Col recorded (record the new
+// target as a variant or update the url when this reports one). Maintainer-run:
+// the test suite never touches the network. Usage: node scripts/verify-sources.mjs
+import { componentIndex } from "../data/components.ts";
+
+const targets = [];
+for (const [slug, components] of Object.entries(componentIndex)) {
+ for (const component of components) {
+ targets.push({ id: `${slug}/${component.name}`, url: component.url });
+ for (const [name, url] of Object.entries(component.variants ?? {})) {
+ targets.push({ id: `${slug}/${component.name}#${name}`, url });
+ }
+ }
+}
+
+const BATCH = 16;
+const drift = [];
+const throttled = [];
+for (let i = 0; i < targets.length; i += BATCH) {
+ await Promise.all(
+ targets.slice(i, i + BATCH).map(async (target) => {
+ // Some doc hosts reject unknown agents with 404 and throttle bursts with
+ // 429; neither is evidence of a dead link.
+ const response = await fetch(target.url, {
+ method: "GET",
+ redirect: "follow",
+ signal: AbortSignal.timeout(15_000),
+ headers: { "user-agent": "Mozilla/5.0" },
+ }).catch(() => null);
+ if (!response) return drift.push(`${target.id}: unreachable`);
+ if (response.status === 429) return throttled.push(target.id);
+ if (response.status >= 400) return drift.push(`${target.id}: HTTP ${response.status} at ${target.url}`);
+ const finalUrl = response.url;
+ if (finalUrl !== target.url && !target.url.includes("#")) {
+ drift.push(`${target.id}: now lives at ${finalUrl}`);
+ }
+ }),
+ );
+}
+
+console.log(`checked ${targets.length} source URLs`);
+for (const line of drift) console.log(`DRIFT ${line}`);
+for (const id of throttled) console.log(`THROTTLED (inconclusive) ${id}`);
+console.log(`${drift.length} drifting, ${throttled.length} throttled`);
+process.exit(drift.length > 0 ? 1 : 0);
```
## spec-quality-gaps.md
Status: added; +87; −0
```diff
@@ -1,0 +1,87 @@
+# Spec: Close the nine verified quality gaps in Col MCP
+
+Synthesized from issue #61 (itself built from the independently re-verified external review of the Col MCP server).
+
+## Problem Statement
+
+A coding agent using Col's MCP server can find a UI library and its documented components faster than with web search, and stays honest while doing it — but the answers are too thin and too noisy to finish the job. The component index is missing entries for libraries Col already lists, so shortlists come back short. Install instructions are library-wide, so an agent told to install Command is handed `add button`. Compatibility answers repeat one placeholder list for every library, including subjects the library does not even use, while contradicting the library's own getting-started text elsewhere in the same response. Search floods results with letter-level substring noise and misses glued spellings, and hits never say why they matched. Documentation snapshots are empty, so the agent leaves Col anyway, and nothing in the data says when anything was last checked.
+
+## Solution
+
+Make every answer self-sufficient and self-explaining, using the data Col already hosts plus verified upstream facts. A component record answers what the thing is (a full palette or a building block), what to call it (shared aliases across libraries), how to install it exactly (per-component command and its dependencies), and when Col last checked it. Search returns the right things in the right order and states what matched. Compatibility names only the subjects that apply, carries real ranges where the library or its dependencies state them, and is forced to agree with the library's own documentation. Empty results explain whether the library is unknown to Col or merely unverified at the component level. Nothing is guessed: unverified stays `unknown`, and gaps stay visible.
+
+## User Stories
+
+1. As a coding agent, I want the React and Tailwind libraries Col already lists to return their documented components, so that a shortlist is limited by relevance rather than by missing data.
+2. As a coding agent, I want standalone command packages (cmdk, kbar) findable as their own entries, so that "command palette" does not force me to leave Col for npm.
+3. As a coding agent, I want `get_component` to return the exact install command for that component, so that I never install the wrong component from a library-wide template.
+4. As a coding agent, I want each component's npm and registry dependencies listed, so that I can plan the install before touching the project.
+5. As a coding agent, I want registry-style libraries (shadcn-style) to generate the component command from their own documented pattern, so that the command matches the library's current CLI.
+6. As a coding agent, I want compatibility answers to name only subjects that apply to that library, so that I never read "Emotion: unknown" for a Tailwind library.
+7. As a coding agent, I want real version ranges where the library or its dependencies state them (for example React 18–19 via cmdk's peer dependencies), so that I can judge fit instead of reading "unknown" everywhere.
+8. As a coding agent, I want compatibility to never contradict the same response's getting-started text, so that I can trust either one.
+9. As a Col maintainer, I want the build to fail when recorded compatibility disagrees with the library's own documentation, so that contradictions cannot ship.
+10. As a coding agent, I want every component to say what kind of thing it is (full pattern, primitive, visual effect, layout), so that a "Spotlight" animation is never mistaken for a Spotlight search.
+11. As a coding agent, I want a one-line summary per component, so that I can shortlist without fetching each documentation page.
+12. As a coding agent, I want to know what a component is built on (cmdk, Radix, Base UI), so that I can prefer components matching the project's existing primitives.
+13. As a coding agent, I want the same concept found under the names people actually use (modal, dialog, popup), so that one library's naming choice does not hide another's component.
+14. As a coding agent, I want `search_components` to filter by stack and show each hit's stacks, so that React queries never return Svelte libraries.
+15. As a coding agent, I want search to match words and prefixes rather than raw substrings, so that "cmd k" returns command palettes instead of every name containing the letter k.
+16. As a coding agent, I want glued and symbol spellings (`commandpalette`, `cmd+k`, ⌘K) to resolve like the spaced form, so that typing conventions do not decide results.
+17. As a coding agent, I want trivial single-letter tokens to be ignored, so that one stray letter never floods my context window.
+18. As a coding agent, I want real search UIs ranked above visual effects that share a word, so that "spotlight" leads with search components.
+19. As a coding agent, I want each hit to state what matched (name, alias, tag, description), so that I can explain a recommendation without guessing.
+20. As a coding agent, I want description-only matches ranked below component matches, so that marketing copy never outrides the component index.
+21. As a coding agent, I want an empty result to say whether the library is not in the index or indexed without a recorded component, so that "missing" tells me which follow-up to run.
+22. As a coding agent, I want suggestions when a query misses, so that a near-miss name or alias still lands somewhere useful.
+23. As a coding agent, I want `get_library` to list the library's recorded components, so that I can browse instead of guessing queries.
+24. As a coding agent, I want shared caveat text once per response instead of on every hit, so that my context budget goes to results.
+25. As a coding agent, I want each record to carry when Col last verified it, so that I can weigh staleness and cite it.
+26. As a coding agent, I want source URLs that record where they redirect and which variants exist (Radix, Base), so that two agents do not silently pick different variants of the same component.
+27. As a coding agent, I want verification stated per field (page, install, compatibility, snapshot), so that "verified" never means different things in different tools.
+28. As a Col maintainer, I want one re-runnable source checker that re-verifies stored URLs and records redirects, so that freshness is maintained mechanically.
+29. As a Col maintainer, I want recorded compatibility facts to cite an official source as before, so that new ranges are evidence-backed, not copied from memory.
+30. As a developer using a coding agent, I want the agent to finish a find → inspect → install plan entirely from Col answers, so that speed and honesty arrive together.
+
+## Implementation Decisions
+
+- The component record grows: `kind` (`full-pattern` | `primitive` | `visual-effect` | `layout`), one-line `summary`, `builtOn` (the primitive it wraps), optional shared concept link, optional per-component install override, `dependencies` and `registryDependencies`, `verifiedAt`, and an optional `variants` map of source-URL alternatives (for example Radix and Base documentation pages). Existing fields and ids are unchanged.
+- Component records carry `verifiedAt`, and registry-style libraries carry a component-install template (the documented pattern with the component's slug substituted) plus the ability for components to override it. Only templates the library documents are recorded.
+- The shared-concept decision from the review is kept minimal: components may link to a named concept (dialog, command-palette, …) and inherit that concept's cross-library aliases. Concepts are data, not a taxonomy service.
+- Matching normalises case and separators and indexes a de-spaced variant of names and aliases, so glued spellings and `cmd+k`-style symbols resolve; symbol aliases like ⌘K live as data on the components that document them. Tokens shorter than two characters are ignored as noise.
+- Multi-token queries keep the current attribution rule: library metadata may supply context tokens, but the remaining tokens must match one component (already shipped). Within components, matching is word- and prefix-based, not raw substring.
+- Ranking key, best first: exact-match group (name or alias) → functional kind over visual effect → name over alias → phrase/prefix over single-token → existing stable order. `matchedOn` is emitted on every hit: component hits name the field and text that matched (name/alias — concept aliases surface as aliases), library hits name component/alias/tag/description.
+- Result envelopes gain a top-level `evidence.gaps` shared once per response; per-hit gaps survive only where they differ from the shared list. Empty results gain `indexStatus` (`"library not in index"` / `"library indexed, component not recorded"` / `"no recorded component matches"` / `"no recorded library matches"`) and, on component search, `suggestions` from nearest neighbours.
+- `get_library` gains a `components` list (id, name, kind) and a `componentCount`; nothing else on that envelope changes.
+- Verification becomes per field: `{ page, install, compatibility, snapshot }` states replacing the single `verification` word in `evidence`. Both tools render the same object, ending the cross-tool contradiction.
+- Compatibility tracking becomes per-library vocabulary: the tracked subjects are derived from the frameworks a library targets plus its own recorded facts; the unknown list is computed against that vocabulary instead of the global union of every recorded subject. Ranges are recorded where an official source states them (a library's own docs, or the peer dependencies of the package the component installs). The data validator gains one rule: a recorded fact that contradicts the library's own getting-started text, or a version claim in that text with no matching fact, fails validation.
+- A re-runnable source checker script walks stored source URLs, follows redirects, and reports drift — dead links and redirects whose target differs from what Col recorded — so a maintainer can update the record. It never rewrites data itself; tests never hit the network.
+- Documentation-snapshot ingestion is deferred: the corpus mechanism exists and is permission-gated by design, and no reuse permissions are recorded yet (an open decision from the original MCP issue). No snapshot data ships in this work.
+
+## Testing Decisions
+
+A good test asserts external behavior only: what a tool call returns for a given input, what the search function ranks first, what the validator refuses. Internal structure is not tested, and nothing is mocked — the tests run against the real catalogue data, the same style as the existing labelled tests in `lib/`.
+
+Seams under test (all existing, highest first):
+
+1. The MCP tool layer — one pure request-to-result entry point over real catalogue data. Envelope contracts (install commands, dependencies, `matchedOn`, `indexStatus`, component lists, per-field verification, gap placement) are asserted here. Prior art: the labelled tool tests and the eval fixture suite.
+2. The directory search module — matching, normalisation and ranking behavior, including the spotlight-vs-effects ordering and noise-token rules. Prior art: the existing ranking and matching tests.
+3. The data validators — compatibility vocabulary, the new getting-started contradiction rule, and record completeness (kind, verifiedAt) as labelled refusal tests. Prior art: the corpus and compatibility validator tests.
+
+The eval fixture suite is the quality gate: its query → expected-hit cases must stay green. Where a fixture asserts an envelope shape this spec deliberately changes, the fixture is updated to the new contract in the same commit — never weakened to mask a regression.
+
+## Out of Scope
+
+- Embeddings, reranking, or any learned retrieval.
+- Ingesting documentation snapshots before reuse permissions are recorded.
+- Adding libraries to the catalogue beyond the component-fill slice (cmdk, kbar as standalone entries; components for the listed empty shells).
+- A hosted or scheduled link checker (the shipped checker is a maintainer-run script).
+- Website, gallery, or visual changes; the integrations directory and its connector paths.
+- Any credential, authentication, or write path through MCP.
+- Plugin packaging and store submission work.
+
+## Further Notes
+
+- The nine work items map one-to-one onto issue #61's checklist; that issue remains the tracker of record, and this spec records the decisions behind the implementation.
+- The external review that seeded the issue was itself re-verified claim-by-claim before this spec was written (19 of 21 claims reproduced; two needed corrections, folded into the stories above).
+- Item 7 of the issue (per-component documentation snapshots) is the one checklist line this spec cannot honestly close: it waits on the reuse-permission decision recorded as open in the original MCP issue.
```
|
![\"Chromatic\"](\"https://user-images.githubusercontent.com/321738/84662277-e3db4f80-af1b-11ea-88f5-91d67a5e59f6.png\")
![](\"https://opencollective.com/chakra-ui/organization/0/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/1/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/2/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/3/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/4/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/5/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/6/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/7/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/8/avatar.svg?avatarHeight=130\"){kind=avatar}
\n![](\"https://opencollective.com/chakra-ui/organization/9/avatar.svg?avatarHeight=130\"){kind=avatar}
\n\n### Individuals\n\nBy donating \\$5 or more you can support the ongoing development of this project.\nWe'll appreciate some support. Thank you to all our supporters! 🙏\n[[Contribute](https://opencollective.com/chakra-ui/contribute)]\n\n![](\"https://opencollective.com/chakra-ui/individuals.svg?width=890\")
\n\n## Testimonials\n\n> People throw React component libraries and design systems at me regularly.\n> This might be the best one I've seen. The APIs are simple but composable and\n> the accessibility on the couple components I looked is complete.\n>\n> Great work @thesegunadebayo, really inspiring work. –\n> [Ryan Florence](https://twitter.com/ryanflorence)\n\n> Awesome new open-source component library from @thesegunadebayo. Really\n> impressive stuff! –\n> [Colm Tuite](https://twitter.com/colmtuite/status/1169622886052782081)\n\n> This is incredible work. Amazing job Segun! –\n> [Lee Robinson](https://twitter.com/leeerob/status/1169330130361159682)\n\n> Chakra UI is glorious! I love the consistent use of focus styling and the\n> subtle animation –\n> [Guillermo ▲](https://twitter.com/rauchg/status/1169632334389248000)\n\n## Awards and Mentions\n\nWe've been extremely humbled to receive awards and mentions from the community\nfor all the innovation and reach Chakra UI brings to the JavaScript ecosystem.\n\n![\"Technology](\"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/tech-radar.png\")
\n ![\"Open](\"https://raw.githubusercontent.com/chakra-ui/chakra-ui/main/media/os-awards.png\")
\n