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, repository, and installation links;
- useful comparisons and alternatives;
- a copyable setup prompt for coding agents.
Agent setup prompt
Library pages provide a prompt based on this structure:
| 1 | Help me add [LIBRARY] to my project. |
| 2 | |
| 3 | Project context: |
| 4 | - Framework: [FRAMEWORK] |
| 5 | - Language: [LANGUAGE] |
| 6 | - Styling: [STYLING SYSTEM] |
| 7 | - Package manager: [PACKAGE MANAGER] |
| 8 | |
| 9 | Use the current official [LIBRARY] documentation. Inspect the existing project before changing files. Install only the required packages, follow the project's established patterns, preserve accessibility, and avoid replacing unrelated code. |
| 10 | |
| 11 | After implementation: |
| 12 | 1. Summarize the files changed. |
| 13 | 2. Explain any configuration added. |
| 14 | 3. Run the project's type-check and build commands. |
| 15 | 4. Call out any manual setup still required. |
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.