README.md
Col
Sol could not do it himself, so we made Col.
A community-maintained directory for finding the right UI library without losing an afternoon to open tabs.
Request a library · Request a feature · Report a bug · Contribute
What Col does
Col organizes UI libraries by category, stack, and use case. Search from the homepage, then compare matching libraries in the directory.
- Search by name, keyword, category, stack, or use case.
- Filter libraries without leaving the directory.
- Save useful libraries locally.
- Open the official website or documentation from each listing.
- Contribute missing libraries through a focused pull request.
Col catalogs libraries, not individual components.
Run it locally
Requirements: Node.js 20.9+ and npm.
| 1 | git clone https://github.com/screen-gd/Col.git |
| 2 | cd Col |
| 3 | npm install |
| 4 | npm run dev |
Open the local URL printed in the terminal (usually http://localhost:3000).
Before opening a pull request:
| 1 | npm run build |
Request something
Use the matching issue form. One focused request per issue makes discussion and review easier.
Request a library
Open a library request when a useful UI library is missing.
Include:
- the library name and official URL;
- what it provides and who it helps;
- its supported stacks;
- the closest Col category and use cases;
- confirmation that it is maintained and publicly accessible.
Search existing libraries, issues, and pull requests first.
Request a feature
Open a feature request for improvements to discovery, comparison, contribution, accessibility, or the library detail experience.
Explain the problem before proposing the interface. Include the expected outcome and any useful references.
Report a bug
Open a bug report with:
- the page or action that failed;
- exact reproduction steps;
- expected and actual behavior;
- browser, operating system, and viewport;
- screenshots, recordings, or console errors when relevant.
Do not include secrets, tokens, private URLs, or personal information.
Add a library with a pull request
Library-only pull requests should be small and should not redesign unrelated parts of the site.
- Fork the repository and create a focused branch.
- Add one entry to
data/libraries.ts. - Reuse the existing category, stack, and use-case values when possible.
- Keep the description factual and short.
- Confirm the URL points to the official project.
- Run
npm run build. - Open a pull request using the provided template.
| 1 | { |
| 2 | name: "Library name", |
| 3 | slug: "library-name", |
| 4 | description: "A factual one-sentence description of what the library provides.", |
| 5 | url: "https://library.example", |
| 6 | category: "Component Library", |
| 7 | stacks: ["React", "TypeScript"], |
| 8 | useCases: ["Rapid Prototyping"], |
| 9 | tags: ["accessible", "copy paste"], |
| 10 | } |
The slug must be unique, lowercase, and kebab-case. See CONTRIBUTING.md for the full checklist.
Dedicated library pages
Every library has a dedicated Col page with:
- a clear overview and best-fit use cases;
- supported stacks and key capabilities;
- official documentation and repository links, where the library publishes them;
- installation commands, for libraries that are installed;
- a copyable setup prompt for coding agents.
Agent setup prompt
Every detail page carries a self-contained prompt an agent can paste to set that library up. Each one names the real packages and commands, states any prerequisites, and ends with a numbered set of steps grounded in the library's own documentation. Write it for that library rather than from a template.
When editing a detail page, keep the prompt specific to that library and link every installation claim to official documentation.
Project structure
| 1 | app/ Routes, layout, and global styles |
| 2 | components/ Search, filters, cards, header, and shared UI |
| 3 | data/libraries.ts The curated library registry |
| 4 | data/library-details/ Per-library detail page content, one file per slug |
| 5 | public/brand/ Col brand assets |
| 6 | public/hero-logos/ Library artwork used by the homepage |
| 7 | .github/ Issue forms and pull request guidance |
UI components
Application controls use the components in components/ui. Use the existing Button, Input, Tabs, and DropdownMenu before adding another control. Keep product-specific layout and behavior in components/, and keep visual variants in components/ui/ when the standard component does not cover them.
components.json configures shadcn/ui. The components are owned by this repository and may use Radix primitives internally for keyboard and accessibility behavior. Theme colors for those components live in app/globals.css.
Built with
Next.js · React · TypeScript · Tailwind CSS · shadcn/ui · Radix UI · Lucide
Community
Be clear, constructive, and respectful. Contributions are welcome whether you are adding a library, improving metadata, fixing a bug, or making discovery easier.
Col is licensed under the MIT License.