Col

A community directory of UI libraries, components, and design tools.

Website · Libraries · Components · MCP setup

What you can do

• Filter libraries by framework, category, and use case.
• Search components by name and open their official docs.
• Find MCP servers for UI libraries and design tools.
• Search the catalog from your coding agent with Col's MCP server.

Each library page lists supported frameworks, pricing, official links, and a setup prompt for coding agents. Component coverage is partial: if a component is missing, Col hasn't added it yet.

Sponsors

Thanks to React Bits for sponsoring Col.
Become a sponsor

Use Col from your agent

Server URL: https://usecol.com/api/mcp. No account or API key needed.

Claude Code:

claude mcp add --transport http col https://usecol.com/api/mcp

Codex:

codex mcp add col --url https://usecol.com/api/mcp

Cursor (.cursor/mcp.json):

{
  "mcpServers": {
    "col": {
      "url": "https://usecol.com/api/mcp"
    }
  }
}

Tool	What it does
search_libraries	Find libraries by keyword, framework, category, or use case.
search_components	Find components by name.
get_library	Get a library's details and official links.
get_component	Get a component's sources and whether it can be previewed.
render_component	Show a live preview of a component in chat.

Col also indexes documented components from Kobalte, SolidUI, shadcn-solid, Zaidan, hope-ui, RockSolid, Nikala UI, TorchUI, MagicUI Solid, and Mystic UI. Check each component's preview and compatibility details: Solid 1 and Solid 2 examples use separate pinned runtimes, and any preview limitations are disclosed. The Quoin guide covers its Solid 2 RC requirements.

Previews need a client that supports MCP Apps. See component previews for coverage, the setup guide for other clients, and the agent guide for tool arguments. The Col plugin bundles the connection with a component search skill; use either the plugin or a direct connection, not both.

Run it locally

Requires Node.js 24.22.1+ (below 25) and Bun. The site builds with Bun and runs on Node.

git clone https://git.cafe/collection-of-devs/col Col
cd Col
bun install
bun run dev

Before opening a pull request:

bun run typecheck
bun run test

bun run dev serves the site at http://localhost:3000 in Cloudflare's Workers runtime. bun run build writes the Worker to dist/server and the prerendered pages and static files to dist/client; bun run preview serves that build locally.

The site reads two runtime variables. Locally, put them in a .dev.vars file at the repository root (it is git-ignored):

COL_MCP_ORIGIN=http://localhost:8787
COL_MCP_ALLOWED_ORIGINS=http://localhost:3000

COL_MCP_ALLOWED_ORIGINS is a comma-separated list of additional exact Origin headers to accept. This setting validates origins; it does not provide CORS preflight handling or response headers for cross-origin browser clients.

The MCP tools and component previews run as a standalone service in mcp-app/ rather than inside the site's Worker: their verified preview payload is too large for a Cloudflare Worker. The site's /api/mcp route proxies to it. To exercise MCP locally, run bun install at the repository root, then bun run start inside mcp-app/ (it listens on port 8787). The service imports lib/, which resolves packages from the repository root, so installing inside mcp-app/ alone is not enough. Then set COL_MCP_ORIGIN=http://localhost:8787 for the site, or point your MCP client at http://localhost:8787/api/mcp directly.

To host the service yourself, deploy mcp-app/ anywhere Node 24 runs — mcp-app/Dockerfile builds a self-contained image (Railway: set the Dockerfile path to mcp-app/Dockerfile with the repository root as the build context, and the healthcheck path to /health). Set COL_MCP_ORIGIN on the site to the service URL and configure COL_MCP_ALLOWED_ORIGINS as needed for requests with additional origins.

Deploy the site

The site deploys to Cloudflare Workers as the col Worker (wrangler.jsonc). It uses the Workers static assets and Images bindings, which need no setup.

1. Run bunx wrangler login once.
2. Set COL_MCP_ORIGIN (the MCP service URL) and, if needed, COL_MCP_ALLOWED_ORIGINS under the Worker's Settings → Variables and Secrets in the Cloudflare dashboard. keep_vars stops deploys from removing them.
3. Run bun run deploy (build, then wrangler deploy). bun run deploy:dry-run builds and reports the upload size without deploying.

Contribute

Code, issues, and pull requests live on git.cafe. Read CONTRIBUTING.md before adding libraries, components, or code.

Check existing issues first, then open one per request:

• Library: name, official URL, supported frameworks, and what it offers.
• Feature: the problem and the result you expect.
• Bug: the page, steps to reproduce, what you expected, what happened, and your browser and OS. Leave out secrets and private information.

Project structure

app/          Routes (pages, API and discovery files) and the router
components/   UI components
data/         Libraries, components, and integrations
lib/          Search, MCP tools, and helpers
mcp-app/      Standalone MCP server (catalogue tools and component previews)
plugin/       Col agent plugin
public/       Brand and sponsor images
tests/        Tests
docs/         Project docs

Built with TanStack Start, React, TypeScript, Tailwind CSS, shadcn/ui, and Radix UI, and hosted on Cloudflare Workers. Licensed under MIT.