git404hub

what is awesome-components fr?

wundercorp/awesome-components — explained in plain English

Analysis updated 2026-05-18

91HTMLAudience · vibe coderComplexity · 1/5Setup · easy

tl;dr

A searchable directory of over 6,000 UI components with screenshots, HTML snapshots, and prompts you can use with BuilderStudio to build interfaces in your own project.

vibe map

mindmap
  root((repo))
    What it does
      6000 UI components
      Screenshots and HTML
      Ready-to-run prompts
    How to browse
      Folders by category
      Command-line search
      Central metadata file
    Use cases
      Find a login form
      Build dashboards fast
      Copy prompts to BuilderStudio
    Audience
      Vibe coders
      PMs and founders
      Community contributors

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

what do people make with this?

VIBE 1

Search for a login form component and copy its prompt into BuilderStudio to build it in your project.

VIBE 2

Browse screenshots of dashboards and cards to find a UI pattern you like.

VIBE 3

Run the command-line tool to find components using plain language descriptions.

VIBE 4

Contribute your own component following the contributing guide.

what's the stack?

HTMLNode.js

how it stacks up fr

wundercorp/awesome-componentsawesome-selfhosted/awesome-selfhosted-htmlx4gking/telegram-proxy
Stars919395
LanguageHTMLHTMLHTML
Last pushed2026-07-04
MaintenanceActive
Setup difficultyeasyeasyeasy
Complexity1/51/51/5
Audiencevibe codergeneralgeneral

Figures from each repo's GitHub metadata at analysis time.

how do i run it?

Difficulty · easy time til it works · 5min

No setup beyond cloning and running npm run find for the command-line search tool.

The explanation does not specify a license for this repository.

in plain english

{"i":0,"repo":"wundercorp/awesome-components","stars":91,"lang":"HTML","ok":true,"char_count":1500,"text":"Awesome Components is a searchable directory of over 6,000 user interface components intended for use with BuilderStudio, an agentic coding environment. The repository gathers component references, screenshots, rendered HTML snapshots, and ready-to-run prompts in one place. The goal is to help you find a component you like and then ask the BuilderStudio agent to build it inside your own project.\n\nThe collection is organized into folders. Each component lives under a category bucket and an author folder, and each variant of a component has its own README file, a prompt file, a rendered HTML file, and a screenshot. A central metadata file at data/components.json describes the components. You can browse the directory through the links in the repository or search it from the command line.\n\nA terminal tool lets you search the collection in plain language. Running npm run find starts an interactive prompt where you describe what you need, such as a login component, and optionally include or exclude words. The tool ranks matching components from the metadata file. If the metadata is missing, it falls back to scanning the component folders directly. You can view details, print or open a prompt file, refine the search, or quit using simple commands like 1, p 1, o 1, r, and q.\n\nTo use a component, you open BuilderStudio, pick a prompt from this repository, and ask the agent to build it in your project. The project also invites community participation through Discord and Reddit, and accepts new component contributions following the guidance in its contributing file.","error":null}

prompts (copy fr)

prompt 1
Run `npm run find` in the awesome-components repo, search for a 'login component', and open the prompt file for the top result so I can paste it into BuilderStudio.
prompt 2
I need a dashboard card component. Search the awesome-components directory and show me the top matches with screenshots so I can pick one.
prompt 3
From the awesome-components repo, find a pricing table component, copy its prompt, and ask BuilderStudio to build it in my project.
prompt 4
Search awesome-components for a 'signup form' but exclude any results mentioning 'modal', then print the prompt for the best match.

Frequently asked questions

what is awesome-components fr?

A searchable directory of over 6,000 UI components with screenshots, HTML snapshots, and prompts you can use with BuilderStudio to build interfaces in your own project.

What language is awesome-components written in?

Mainly HTML. The stack also includes HTML, Node.js.

What license does awesome-components use?

The explanation does not specify a license for this repository.

How hard is awesome-components to set up?

Setup difficulty is rated easy, with roughly 5min to a first successful run.

Who is awesome-components for?

Mainly vibe coder.

peek the repo → explain another one

This repo across BitVibe Labs

double-check against the repo, no cap.