English Français العربية

c2n Web Components

Registre officiel Autres

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

Code source Site web Documentation

Que pouvez-vous faire avec 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.

Installation

Ajoutez ceci à la configuration MCP de votre client (Claude Desktop : claude_desktop_config.json ; Cursor : .cursor/mcp.json ; VS Code et les autres utilisent la même forme « mcpServers »).

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
Configuration JSON (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>"
            }
        }
    }
}

Variables d'environnement

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

Documentation

Tirée du README du projet sur GitHub, actualisée chaque semaine. Les liens ouvrent GitHub.

Sommaire
  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

Questions fréquentes

Qu'est-ce que c2n Web Components ?

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

Comment installer c2n Web Components ?

Il s'exécute sur votre machine. Dans Claude Code : claude mcp add c2n-web-components -e 'C2N_PROJECT_ROOT=<C2N_PROJECT_ROOT>' -- npx -y @c2n/mcp@1.0.17. Pour les autres clients, collez la configuration JSON de cette page dans leurs réglages MCP.

Faut-il une clé API pour c2n Web Components ?

Son entrée au registre n'indique aucune clé ni secret obligatoire. Certaines fonctions peuvent tout de même demander un compte auprès du service auquel il se connecte.

c2n Web Components est-il open source ?

Oui. Son code est sur GitHub sous licence MIT.

Qui maintient c2n Web Components ?

Il est publié par code2nguyen. AI.tn le référence sans le maintenir ni le recommander.

Issu du registre MCP officiel. Être listé n'est pas une recommandation : vérifiez le code et les permissions d'un serveur avant de lui donner accès à vos données.