Free JavaScript Web UI components for everyone

• Website
• Documentation
• Chat support
• Join Total.js Telegram
• Support

---

• /cdn/components.json contains all parsed components and their metadata (used by https://componentator.com)
• the /cdn/ directory contains all components uploaded to https://cdn.componentator.com

Create components with AI

This branch contains everything an AI model (Claude, ChatGPT, Codex, Gemini, Copilot…) needs to create a new jComponent from a description, for example "make me a modern radio button list according to the Apple UI guidelines". Each component has 3 files: component.html (CSS + script + live example, it runs directly in the browser), readme.md and preview.jpg.

File	What it is
example/	The template: component.html and readme.md
SKILL.md	The skill: workflow, rules and checklist to create a component
docs/api.md	Reference of the jComponent API
docs/aicontext/	Guides of the Total.js team: how to develop a component, ui-component, ui-bind, ui-import and ui-plugin
tools/check.js	Checks a component and creates preview.jpg
AGENTS.md, CLAUDE.md, GEMINI.md, llms.txt	Entry points for each agent

How to use it

1. Give the model this repository (or upload SKILL.md, docs/api.md and the example/ folder).
2. Describe the component you need. The model derives the contract, writes the 3 files and checks them.
3. Check the result:

npm install playwright                    # once
node tools/check.js <folder>              # structure, readme, selectors, browser errors, dark mode
node tools/check.js <folder> --preview    # also creates preview.jpg (300x240)

Contact

Do you have any questions? Contact us https://www.totaljs.com/contact/