c2n/web-componentsv0.0.14
ComponentsIconsGuidesExamplesGetting started
GitHub repository

AI tools

Give Claude Code, Codex or Google Antigravity the c2n skill, live component APIs, examples and application conventions.

c2n provides two complementary tools for coding agents:

  • @c2n/skill teaches the agent how to build with c2n: inspect the project, load the theme once, check component APIs, and turn repeated styles or patterns into application components.
  • @c2n/mcp exposes structured, version-aware component APIs, examples, gallery variants, presets, theme tokens and code generation through the Model Context Protocol.

When MCP is unavailable, the skill uses a compact bundled catalog for component discovery and reads installed packages’ custom-elements.json manifests for exact, version-correct APIs. MCP can also run by itself, but installing both gives an agent the component facts and the conventions for applying them well.

Install in an application

From the root of the application that will use c2n:

npm install --save-dev @c2n/skill
npx c2n-skill install

The installer defaults to all supported agents. It copies project-scoped skills and merges the c2n MCP server into existing configuration without replacing other servers.

AgentSkill locationMCP configuration
Claude Code.claude/skills/c2n-components/.mcp.json
Codex.agents/skills/c2n-components/.codex/config.toml
Google Antigravity.agents/skills/c2n-components/.agents/mcp_config.json

Install for only one agent when the project does not need every configuration:

npx c2n-skill install --agent claude
npx c2n-skill install --agent codex
npx c2n-skill install --agent antigravity

Comma-separated agents and a different project directory are supported. Use --no-mcp when only the offline skill is wanted.

npx c2n-skill install --agent codex,antigravity --project ./my-app
npx c2n-skill install --agent codex --no-mcp

Re-run the installer after upgrading @c2n/skill; c2n-owned files are refreshed while unrelated MCP entries are preserved. Restart the agent after installation so it reloads project skills and MCP configuration.

Verify the setup

Ask the agent to use the c2n MCP server to list components, then inspect one component:

Use the c2n MCP server to list the available button components. Then inspect c2-button and tell me its attributes, slots and CSS variables.

A connected agent should use list_components or search_components, followed by get_component. The server detects installed @c2n/* packages from the application root and reports their versions while serving its bundled offline registry.

If the MCP server does not appear, verify that it can start in the same project:

npx -y @c2n/mcp --version

If that succeeds, restart the agent and check that its project root is the directory containing the generated configuration. Run npx c2n-skill install again if configuration was deleted or the package was upgraded.

A productive first prompt

Describe the application outcome and ask the agent to use both c2n tools. It can then select components from evidence instead of guessing their API.

Use the c2n-components skill and c2n MCP server to build a profile settings form.
Inspect each component before using it, install only the required @c2n packages,
load @c2n/theme once, and create app-level variants for styles that repeat.

For an existing application, ask the agent to inspect the current token bridge and installed packages before changing code:

Use c2n to add an attachment picker to this application. Preserve its existing theme,
check the installed c2n versions, and verify the attachment API and examples through MCP first.

The recommended sequence is search_components → get_component → get_examples → optionally get_presets → get_theme → generate_variant. Gallery examples provide complete usage and composition context; presets provide structured attributes and CSS values that are easier to turn directly into an application variant.

Manual MCP-only configuration

The installer is recommended, but any stdio MCP client can launch:

npx -y @c2n/mcp

Claude Code project .mcp.json:

{
  "mcpServers": {
    "c2n": {
      "type": "stdio",
      "command": "npx",
      "args": ["-y", "@c2n/mcp"]
    }
  }
}

Codex project .codex/config.toml:

[mcp_servers.c2n]
command = "npx"
args = ["-y", "@c2n/mcp"]

Google Antigravity project .agents/mcp_config.json uses the same mcpServers.c2n command and arguments as the Claude JSON example, without requiring the type field.

llms.txt

Agents that can fetch a URL but have neither the MCP server nor the skill installed can read the site itself:

  • /llms.txt is the documentation map: every component with its tag, package, docs, API and gallery link, plus the guides, icon sets and example apps. It is generated from the same content the site renders.
  • /llms-full.txt is the full text of the c2n-components skill in one document: workflow, theming, variants, framework notes and the compact component catalog.

Both files point back to the MCP server and the installed manifests for exact APIs; neither replaces them.

Add c2n components to the application

The AI tools provide guidance and metadata; component packages remain normal application dependencies. Install the theme and only the components the application uses:

npm install @c2n/theme @c2n/button @c2n/text-field

Load the theme once near the application entry point, then import component modules before their tags render:

import '@c2n/theme/theme.css'
import '@c2n/button'
import '@c2n/text-field'

Continue with Using c2n in an application for the application architecture and Theming for tokens, dark mode and component-level overrides.

escAccordionConnected, animated panels with shared borders and single or multiple expansion.LayoutArea chartA line chart with the region under each line filled — every line-chart attribute, plus a fill opacity.ChartAttachmentFile and image attachments with metadata, upload progress, failure states, and actions.Data displayAutocompleteSearchable combobox for local or remote items with customizable list rows.InputsAvatarImage, initials or icon for a person, with status dot and badge.Data displayBadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.Data displayBar chartBars over categories or time buckets, with several series drawn side by side within each band.ChartBorder BeamA decorative beam that travels around the border of any positioned container.LayoutBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationButtonThemeable button with slots for text, prefix, suffix and running icons.ButtonsButton GroupJoined actions and polished segmented controls with single or multiple selection.ButtonsCandlestick chartAn ECharts OHLC chart for market sessions and other open-close ranges, with semantic positive and negative colours.ChartCardGroups related content and actions on a single bordered surface.LayoutCascaderSelect a value from related, multi-level data in one floating panel.InputsChat InputAuto-growing message composer with keyboard submission, toolbar actions and native form support.ChatChat MessageFlexible message row for conversations, assistant answers and activity updates.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.InputsCode EditorEditable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables.InputsCode ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.Data displayColor AreaTwo-dimensional area for picking saturation and value of a colour.InputsColor SelectColour swatch that opens a full picker built from area and slider.InputsColor SliderHorizontal slider for choosing a hue from 0 to 360.InputsCopy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.ButtonsDashboardGrid of resizable panes, dragged by the edges they share.LayoutDate InputForm-associated single-date input with native picker, constraints, helper text and error states.InputsDate SelectorAccessible one- or two-month calendar for choosing a date range.InputsDetailsCollapsible disclosure built on native details and summary.LayoutGauge chartA focused radial KPI gauge drawn by ECharts, with a configurable scale, progress arc and pointer.ChartHeaderArranges brand, navigation, actions and a mobile trigger in a reusable site shell.LayoutIcon ButtonRound, hoverable button wrapping a slotted SVG icon.ButtonsKbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.Data displayLabelCaption that names and activates the control referenced by its for attribute, with a required marker.InputsLine chartA line chart over a time or numeric x axis, drawn on canvas by uPlot, with series declared as children.ChartLink ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.NavigationListVertical list container with single or multiple selection.Data displayList ItemSelectable row with icon slots, used on its own or as the option of list and select.Data displayMenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.NavigationModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.FeedbackNavigation MenuSite navigation bar whose triggers open panels of links below the header.NavigationNumber InputForm-associated numeric input with native validation, step controls, adornments and helper states.InputsOverlayAnchored popup built on the browser Popover API, positioned with floating-ui.FeedbackPaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.NavigationPie chartA pie or donut chart drawn by ECharts, where one row is one slice and label-field names it.ChartProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.FeedbackQR CodeGenerate accessible, themeable QR codes locally as crisp SVG graphics.Data displayQuestionnaireA multi-step single- and multiple-choice flow with validation, shortcuts and form submission.InputsRadar chartCompare several profiles across the same set of normalized indicators.ChartRadioRadio options built on native inputs, grouped into one value with keyboard navigation.InputsRateAccessible star rating input with hover preview, keyboard control and optional half values.InputsReorder ListReorder a vertical queue with pointer or keyboard input while the application owns persistence.Data displayScatter chartAn ECharts scatter plot for finding relationships, clusters and outliers across two numeric measures.ChartSelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.InputsSeperatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.LayoutSheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.FeedbackSide NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.NavigationSkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.FeedbackSliderRange input with a themeable track, thumb, step ticks and value bubble.InputsSparklineA chromeless trend line sized for a table cell, a list row or the trend slot of a c2-stat.ChartSpinnerCircular progress indicator, indeterminate or showing a value, with optional text.FeedbackStatDisplays a KPI with an optional icon, trend and supporting description.Data displayStatus PanelCommunicate empty states, operation outcomes and recoverable errors with clear next steps.FeedbackStepsA vertical trace of a task as it runs: statuses, durations, and stages that open while they work and close when they are done.Data displaySwitchOn/off toggle on a native switch input, with label, description and thumb icons.InputsTableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.Data displayTabsTab strip that shows one content panel at a time.NavigationText FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.InputsTextareaMultiline text input with resizing, helper and error text, and a character counter.InputsTheme SelectColour-theme switcher: click to step to the next mode, hover for the full menu.InputsToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.FeedbackTooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.FeedbackTreeHierarchical tree view with expansion, selection, checkboxes and lazy loading.Data displayUploadDrag-and-drop file selection with validation, upload progress, retry, cancellation, and attachment results.InputsVirtual ListWindowed list with built-in search, sorting, selection and an async data source.Data displayFeather Icons287 open-source Feather icons, one web component each.IconsMat Icon2,234 Material Icons ligatures rendered through a single element.IconsPhosphor Icons1,512 flexible icons in six weights, one web component each.IconsThemingTheme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly.GuideFrameworksUse the components from React, Vue, Angular, Svelte, Lit or plain HTML — typed events, generated template types, and the one piece of configuration each framework needs.GuideUsing c2n in an applicationThe workflow behind every c2n app: load the theme once, use c2-* tags directly, and turn every repeated pattern into a small variant or composed component.GuideAI toolsGive Claude Code, Codex or Google Antigravity the c2n skill, live component APIs, examples and application conventions.Guide