English Français العربية

c2n Web Components

السجل الرسمي أخرى

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

الشيفرة المصدرية الموقع التوثيق

ماذا يمكنك أن تفعل مع 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.

التثبيت

أضف هذا إلى إعدادات MCP في عميلك (Claude Desktop: claude_desktop_config.json، وCursor: ‏.cursor/mcp.json، ويستخدم VS Code وغيره الصيغة نفسها «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
إعداد 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>"
            }
        }
    }
}

متغيرات البيئة

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

التوثيق

مأخوذ من ملف README للمشروع على GitHub ويُحدَّث أسبوعيًا. تفتح الروابط على GitHub.

المحتويات
  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

الأسئلة الشائعة

ما هو c2n Web Components؟

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

كيف أثبّت c2n Web Components؟

يعمل على جهازك. في Claude Code: claude mcp add c2n-web-components -e 'C2N_PROJECT_ROOT=<C2N_PROJECT_ROOT>' -- npx -y @c2n/mcp@1.0.17. وفي العملاء الآخرين، الصق إعداد JSON من هذه الصفحة في إعدادات MCP الخاصة بهم.

هل يحتاج c2n Web Components إلى مفتاح API؟

لا يذكر إدراجه في السجل أي مفتاح أو سر إلزامي. قد تتطلب بعض الميزات حسابًا لدى الخدمة التي يتصل بها.

هل c2n Web Components مفتوح المصدر؟

نعم. شيفرته متاحة على GitHub بترخيص MIT.

من يصون c2n Web Components؟

ينشره code2nguyen. يدرجه AI.tn لكنه لا يصونه ولا يوصي به.

من سجل MCP الرسمي. الإدراج ليس توصية: راجع شيفرة الخادم وصلاحياته قبل منحه الوصول إلى بياناتك.