English Français العربية

c2n Web Components

Official registry Other

Exact APIs, examples, theme tokens and markup validation for the c2n (c2-*) Lit web components.

Source code Website Documentation

What can you do with c2n Web Components?

  • Built for AI agents: an MCP server (@c2n/mcp) and a Claude Code / Codex / Copilot skill (@c2n/skill) hand your agent exact APIs, examples and themes, so it builds instead of guessing.
  • 100+ components, 700+ variants: inputs, tables, charts, maps, overlays, navigation, chat, dashboards, plus icon sets and illustrations.
  • One package, ship only what you use: npm install @c2n/components, import @c2n/components/table; bundlers drop the rest.
  • Themed with CSS variables: ~35 --c2-theme--* tokens restyle the whole app, light and dark built in.
  • Any framework: generated React/Vue types, an Angular forms adapter, SSR-safe elements.

Install

Add this to your client's MCP configuration (Claude Desktop: claude_desktop_config.json; Cursor: .cursor/mcp.json; VS Code and others use the same "mcpServers" shape).

NPM package @c2n/mcp
Claude Code 
claude mcp add c2n-web-components -e 'C2N_PROJECT_ROOT=<C2N_PROJECT_ROOT>' -- npx -y @c2n/mcp@1.0.17
JSON configuration (Claude Desktop, Cursor, VS Code) 
{
    "mcpServers": {
        "c2n-web-components": {
            "command": "npx",
            "args": [
                "-y",
                "@c2n/mcp@1.0.17"
            ],
            "env": {
                "C2N_PROJECT_ROOT": "<C2N_PROJECT_ROOT>"
            }
        }
    }
}

Environment variables

  • C2N_PROJECT_ROOT Project whose installed @c2n/* packages the server reports. Defaults to the working directory.

Documentation

From the project's README on GitHub, refreshed weekly. Links open on GitHub.

Contents
  1. c2n/web-components
  2. Highlights
  3. Quick start
  4. A gallery for every component
  5. Real apps
  6. Use with AI agents
  7. Contributing
  8. License

c2n/web-components

Every building block your AI needs to ship a web app. 100+ components and 700+ ready-made variants, built with AI and for AI. Your coding agent reads the exact API of every element over MCP and composes it into real apps, in plain HTML, React, Vue, Angular, Astro or anything that speaks the DOM.

Docs & live demos · Components · Examples · Theming

Highlights

  • Built for AI agents: an MCP server (@c2n/mcp) and a Claude Code / Codex / Copilot skill (@c2n/skill) hand your agent exact APIs, examples and themes, so it builds instead of guessing.
  • 100+ components, 700+ variants: inputs, tables, charts, maps, overlays, navigation, chat, dashboards, plus icon sets and illustrations.
  • One package, ship only what you use: npm install @c2n/components, import @c2n/components/table; bundlers drop the rest.
  • Themed with CSS variables: ~35 --c2-theme--* tokens restyle the whole app, light and dark built in.
  • Any framework: generated React/Vue types, an Angular forms adapter, SSR-safe elements.

Quick start

npm install @c2n/components
import '@c2n/components/theme.css'
import '@c2n/components/button'
import '@c2n/components/text-field'
<form class="newsletter">
  <c2-text-field placeholder="Your email"></c2-text-field>
  <c2-button type="submit">Subscribe</c2-button>
</form>

Make it yours by setting a few tokens, or style one component through its own variables:

:root {
  --c2-theme--color-primary: #7c3aed;
  --c2-theme--radius-md: 10px;
}

.newsletter c2-button {
  --c2-button__container--height: 44px;
}

React, Vue and Angular setup: Frameworks guide.

Each component ships styled variants you can copy, or open in the live studio to tweak and export.

Real apps

Complete example apps in React, Vue, Angular, Next.js and plain HTML live in apps/examples.

Use with AI agents

claude mcp add --transport stdio c2n -- npx -y @c2n/mcp

Or install the Claude Code plugin: /plugin marketplace add code2nguyen/web-components then /plugin install c2n@c2n.

Contributing

npm install
npm run ui                                    # build everything, start the docs site
npm run dev -w packages/components/button     # work on one component
npm test                                      # browser tests for changed components
npm run generate                              # scaffold a new component

More in tests/README.md and CLAUDE.md.

License

MIT

Frequently asked questions

What is c2n Web Components?

Exact APIs, examples, theme tokens and markup validation for the c2n (c2-*) Lit web components.

How do I install c2n Web Components?

It runs on your machine. In Claude Code: claude mcp add c2n-web-components -e 'C2N_PROJECT_ROOT=<C2N_PROJECT_ROOT>' -- npx -y @c2n/mcp@1.0.17. For other clients, paste the JSON configuration from this page into their MCP settings.

Does c2n Web Components need an API key?

Its registry entry lists no required key or secret. Some features may still need an account with the service it connects to.

Is c2n Web Components open source?

Yes. Its code is on GitHub under the MIT license.

Who maintains c2n Web Components?

It is published by code2nguyen. AI.tn lists it but does not maintain or endorse it.

From the official MCP Registry. Listing is not an endorsement: review a server's code and permissions before giving it access to your data.