README.md
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:
| 1 | claude mcp add --transport http col https://usecol.com/api/mcp |
Codex:
| 1 | codex mcp add col --url https://usecol.com/api/mcp |
Cursor (.cursor/mcp.json):
| 1 | { |
| 2 | "mcpServers": { |
| 3 | "col": { |
| 4 | "url": "https://usecol.com/api/mcp" |
| 5 | } |
| 6 | } |
| 7 | } |
| 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. |
For SolidJS 2 projects, Col covers Quoin components with API details, usage examples and the exact dependency versions they need. The Quoin guide covers sources and coverage.
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 20.9+ and npm.
| 1 | git clone https://git.cafe/collection-of-devs/col Col |
| 2 | cd Col |
| 3 | npm install |
| 4 | npm run dev |
Before opening a pull request:
| 1 | npm run typecheck |
| 2 | npm test |
To let a browser client other than https://usecol.com call your MCP server, set COL_MCP_ALLOWED_ORIGINS to a comma-separated list of exact origins, for example COL_MCP_ALLOWED_ORIGINS="http://localhost:3000".
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
| 1 | app/ Pages and API routes |
| 2 | components/ UI components |
| 3 | data/ Libraries, components, and integrations |
| 4 | lib/ Search, MCP tools, and helpers |
| 5 | plugin/ Col agent plugin |
| 6 | public/ Brand and sponsor images |
| 7 | tests/ Tests |
| 8 | docs/ Project docs |
Built with Next.js, React, TypeScript, Tailwind CSS, shadcn/ui, and Radix UI. Licensed under MIT.