# C2N Web Components > Framework-agnostic Lit web components published as individual `@c2n/*` npm packages. Components use the `c2-*` custom-element prefix, work in plain HTML and major frameworks, and expose their visual design through CSS custom properties. Use this file as a map of the documentation. Component pages contain installation and usage guidance, gallery pages contain complete styled examples, and API pages are generated from each package's custom-elements manifest. [llms-full.txt](https://code2nguyen.github.io/web-components/llms-full.txt) holds the full text of the c2n agent skill: the application workflow, theming rules, variant patterns, framework notes and a compact component catalog. ## Start here - [Documentation home](https://code2nguyen.github.io/web-components/) - [Component index](https://code2nguyen.github.io/web-components/components/) - [Icon index](https://code2nguyen.github.io/web-components/icons/) - [Example applications](https://code2nguyen.github.io/web-components/examples/) - [GitHub repository](https://github.com/code2nguyen/web-components) ## For coding agents Exact component facts (attributes, slots, events, CSS parts, CSS variables) come from structured sources, never from memory: - **MCP server**: `npx -y @c2n/mcp` (stdio) exposes `list_components`, `search_components`, `get_component`, `get_examples`, `get_presets`, `get_theme`, `generate_variant` and `get_workflow_guide` over a bundled registry built from every package. - **Skill**: `npm install --save-dev @c2n/skill && npx c2n-skill install` copies the `c2n-components` skill into a project for Claude Code, Codex or Google Antigravity and merges the MCP server into their configuration. - **Manifests**: every installed package ships `custom-elements.json` (`node_modules/@c2n//custom-elements.json`, also exported as `@c2n//custom-elements.json`), the same manifest the API pages render. - **Framework glue**: each package exports `@c2n//react` (JSX types) and `@c2n//vue` (Volar types); `@c2n/angular` supplies the `ControlValueAccessor` pair for form controls; `@c2n/framework-types` ships `html-custom-data.json` and `web-types.json` for editors. - **Theme**: `@c2n/theme` defines the `--c2-theme--*` tokens; import `@c2n/theme/theme.css` once and set tokens instead of per-component variables when a token exists. ## Core conventions - Install only the package you need, for example `npm install @c2n/text-field`. - Importing a package registers its custom element, for example `import '@c2n/text-field'`. - Theme components with inheritable CSS variables. Component variables follow `--c2-__[__]--`. - Prefer public properties for non-string values when using a framework. - Text, selection, toggle, range, and chat form controls participate in `FormData`, reset, disabled fieldsets, and constraint validation. - `selection-change` does not bubble: listen on the element itself. Form controls also fire plain `input`/`change`. ## Guides - [Theming](https://code2nguyen.github.io/web-components/guides/theming/): Theme every c2n component from a handful of design tokens with @c2n/theme, or reach for any component variable directly. - [Frameworks](https://code2nguyen.github.io/web-components/guides/frameworks/): Use 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. - [Using c2n in an application](https://code2nguyen.github.io/web-components/guides/application-workflow/): The 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. - [AI tools](https://code2nguyen.github.io/web-components/guides/ai-tools/): Give Claude Code, Codex or Google Antigravity the c2n skill, live component APIs, examples and application conventions. ## Components ### Buttons - [Button](https://code2nguyen.github.io/web-components/components/button/): `c2-button` from `@c2n/button`. Themeable button with slots for text, prefix, suffix and running icons. ([API](https://code2nguyen.github.io/web-components/components/button/api/); [gallery](https://code2nguyen.github.io/web-components/components/button/gallery/)) - [Button Group](https://code2nguyen.github.io/web-components/components/button-group/): `c2-button-group` from `@c2n/button-group`. Joined actions and polished segmented controls with single or multiple selection. ([API](https://code2nguyen.github.io/web-components/components/button-group/api/); [gallery](https://code2nguyen.github.io/web-components/components/button-group/gallery/)) - [Copy Button](https://code2nguyen.github.io/web-components/components/copy-button/): `c2-copy-button` from `@c2n/copy-button`. Button that copies text to the clipboard — the element it sits in, another element by id, or a literal string. ([API](https://code2nguyen.github.io/web-components/components/copy-button/api/); [gallery](https://code2nguyen.github.io/web-components/components/copy-button/gallery/)) - [Icon Button](https://code2nguyen.github.io/web-components/components/icon-button/): `c2-icon-button` from `@c2n/icon-button`. Round, hoverable button wrapping a slotted SVG icon. ([API](https://code2nguyen.github.io/web-components/components/icon-button/api/); [gallery](https://code2nguyen.github.io/web-components/components/icon-button/gallery/)) ### Chart - [Area chart](https://code2nguyen.github.io/web-components/components/area-chart/): `c2-area-chart` from `@c2n/chart`. A line chart with the region under each line filled — every line-chart attribute, plus a fill opacity. ([API](https://code2nguyen.github.io/web-components/components/area-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/area-chart/gallery/)) - [Bar chart](https://code2nguyen.github.io/web-components/components/bar-chart/): `c2-bar-chart` from `@c2n/chart`. Bars over categories or time buckets, with several series drawn side by side within each band. ([API](https://code2nguyen.github.io/web-components/components/bar-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/bar-chart/gallery/)) - [Candlestick chart](https://code2nguyen.github.io/web-components/components/candlestick-chart/): `c2-candlestick-chart` from `@c2n/chart`. An ECharts OHLC chart for market sessions and other open-close ranges, with semantic positive and negative colours. ([API](https://code2nguyen.github.io/web-components/components/candlestick-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/candlestick-chart/gallery/)) - [Gauge chart](https://code2nguyen.github.io/web-components/components/gauge-chart/): `c2-gauge-chart` from `@c2n/chart`. A focused radial KPI gauge drawn by ECharts, with a configurable scale, progress arc and pointer. ([API](https://code2nguyen.github.io/web-components/components/gauge-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/gauge-chart/gallery/)) - [Line chart](https://code2nguyen.github.io/web-components/components/line-chart/): `c2-line-chart` from `@c2n/chart`. A line chart over a time or numeric x axis, drawn on canvas by uPlot, with series declared as children. ([API](https://code2nguyen.github.io/web-components/components/line-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/line-chart/gallery/)) - [Pie chart](https://code2nguyen.github.io/web-components/components/pie-chart/): `c2-pie-chart` from `@c2n/chart`. A pie or donut chart drawn by ECharts, where one row is one slice and label-field names it. ([API](https://code2nguyen.github.io/web-components/components/pie-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/pie-chart/gallery/)) - [Radar chart](https://code2nguyen.github.io/web-components/components/radar-chart/): `c2-radar-chart` from `@c2n/chart`. Compare several profiles across the same set of normalized indicators. ([API](https://code2nguyen.github.io/web-components/components/radar-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/radar-chart/gallery/)) - [Scatter chart](https://code2nguyen.github.io/web-components/components/scatter-chart/): `c2-scatter-chart` from `@c2n/chart`. An ECharts scatter plot for finding relationships, clusters and outliers across two numeric measures. ([API](https://code2nguyen.github.io/web-components/components/scatter-chart/api/); [gallery](https://code2nguyen.github.io/web-components/components/scatter-chart/gallery/)) - [Sparkline](https://code2nguyen.github.io/web-components/components/sparkline/): `c2-sparkline` from `@c2n/chart`. A chromeless trend line sized for a table cell, a list row or the trend slot of a c2-stat. ([API](https://code2nguyen.github.io/web-components/components/sparkline/api/); [gallery](https://code2nguyen.github.io/web-components/components/sparkline/gallery/)) ### Chat - [Chat Input](https://code2nguyen.github.io/web-components/components/chat-input/): `c2-chat-input` from `@c2n/chat-input`. Auto-growing message composer with keyboard submission, toolbar actions and native form support. ([API](https://code2nguyen.github.io/web-components/components/chat-input/api/); [gallery](https://code2nguyen.github.io/web-components/components/chat-input/gallery/)) - [Chat Message](https://code2nguyen.github.io/web-components/components/chat-message/): `c2-chat-message` from `@c2n/chat-message`. Flexible message row for conversations, assistant answers and activity updates. ([API](https://code2nguyen.github.io/web-components/components/chat-message/api/); [gallery](https://code2nguyen.github.io/web-components/components/chat-message/gallery/)) ### Data display - [Attachment](https://code2nguyen.github.io/web-components/components/attachment/): `c2-attachment` from `@c2n/attachment`. File and image attachments with metadata, upload progress, failure states, and actions. ([API](https://code2nguyen.github.io/web-components/components/attachment/api/); [gallery](https://code2nguyen.github.io/web-components/components/attachment/gallery/)) - [Avatar](https://code2nguyen.github.io/web-components/components/avatar/): `c2-avatar` from `@c2n/avatar`. Image, initials or icon for a person, with status dot and badge. ([API](https://code2nguyen.github.io/web-components/components/avatar/api/); [gallery](https://code2nguyen.github.io/web-components/components/avatar/gallery/)) - [Badge](https://code2nguyen.github.io/web-components/components/badge/): `c2-badge` from `@c2n/badge`. Tinted pill for status text, counts and dots, optionally pinned to a corner of another element. ([API](https://code2nguyen.github.io/web-components/components/badge/api/); [gallery](https://code2nguyen.github.io/web-components/components/badge/gallery/)) - [Code Viewer](https://code2nguyen.github.io/web-components/components/code-viewer/): `c2-code-viewer` from `@c2n/code-viewer`. Syntax-highlighted code with line numbers, copy button and dark mode, powered by shiki. ([API](https://code2nguyen.github.io/web-components/components/code-viewer/api/); [gallery](https://code2nguyen.github.io/web-components/components/code-viewer/gallery/)) - [Kbd](https://code2nguyen.github.io/web-components/components/kbd/): `c2-kbd` from `@c2n/kbd`. Keyboard key label for shortcuts and command hints, with the semantics of the native kbd element. ([API](https://code2nguyen.github.io/web-components/components/kbd/api/); [gallery](https://code2nguyen.github.io/web-components/components/kbd/gallery/)) - [List](https://code2nguyen.github.io/web-components/components/list/): `c2-list` from `@c2n/list`. Vertical list container with single or multiple selection. ([API](https://code2nguyen.github.io/web-components/components/list/api/); [gallery](https://code2nguyen.github.io/web-components/components/list/gallery/)) - [List Item](https://code2nguyen.github.io/web-components/components/list-item/): `c2-list-item` from `@c2n/list-item`. Selectable row with icon slots, used on its own or as the option of list and select. ([API](https://code2nguyen.github.io/web-components/components/list-item/api/); [gallery](https://code2nguyen.github.io/web-components/components/list-item/gallery/)) - [QR Code](https://code2nguyen.github.io/web-components/components/qr-code/): `c2-qr-code` from `@c2n/qr-code`. Generate accessible, themeable QR codes locally as crisp SVG graphics. ([API](https://code2nguyen.github.io/web-components/components/qr-code/api/); [gallery](https://code2nguyen.github.io/web-components/components/qr-code/gallery/)) - [Reorder List](https://code2nguyen.github.io/web-components/components/reorder-list/): `c2-reorder-list` from `@c2n/reorder-list`. Reorder a vertical queue with pointer or keyboard input while the application owns persistence. ([API](https://code2nguyen.github.io/web-components/components/reorder-list/api/); [gallery](https://code2nguyen.github.io/web-components/components/reorder-list/gallery/)) - [Stat](https://code2nguyen.github.io/web-components/components/stat/): `c2-stat` from `@c2n/stat`. Displays a KPI with an optional icon, trend and supporting description. ([API](https://code2nguyen.github.io/web-components/components/stat/api/); [gallery](https://code2nguyen.github.io/web-components/components/stat/gallery/)) - [Steps](https://code2nguyen.github.io/web-components/components/steps/): `c2-steps` from `@c2n/steps`. A vertical trace of a task as it runs: statuses, durations, and stages that open while they work and close when they are done. ([API](https://code2nguyen.github.io/web-components/components/steps/api/); [gallery](https://code2nguyen.github.io/web-components/components/steps/gallery/)) - [Table](https://code2nguyen.github.io/web-components/components/table/): `c2-table` from `@c2n/table`. Virtualized data grid with declarative columns, sorting, selection, pinning and resizing. ([API](https://code2nguyen.github.io/web-components/components/table/api/); [gallery](https://code2nguyen.github.io/web-components/components/table/gallery/)) - [Tree](https://code2nguyen.github.io/web-components/components/tree/): `c2-tree` from `@c2n/tree`. Hierarchical tree view with expansion, selection, checkboxes and lazy loading. ([API](https://code2nguyen.github.io/web-components/components/tree/api/); [gallery](https://code2nguyen.github.io/web-components/components/tree/gallery/)) - [Virtual List](https://code2nguyen.github.io/web-components/components/virtual-list/): `c2-virtual-list` from `@c2n/virtual-list`. Windowed list with built-in search, sorting, selection and an async data source. ([API](https://code2nguyen.github.io/web-components/components/virtual-list/api/); [gallery](https://code2nguyen.github.io/web-components/components/virtual-list/gallery/)) ### Feedback - [Modal](https://code2nguyen.github.io/web-components/components/modal/): `c2-modal` from `@c2n/modal`. Dialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer. ([API](https://code2nguyen.github.io/web-components/components/modal/api/); [gallery](https://code2nguyen.github.io/web-components/components/modal/gallery/)) - [Overlay](https://code2nguyen.github.io/web-components/components/overlay/): `c2-overlay` from `@c2n/overlay`. Anchored popup built on the browser Popover API, positioned with floating-ui. ([API](https://code2nguyen.github.io/web-components/components/overlay/api/); [gallery](https://code2nguyen.github.io/web-components/components/overlay/gallery/)) - [Progress](https://code2nguyen.github.io/web-components/components/progress/): `c2-progress` from `@c2n/progress`. Linear progress bar, indeterminate or filling to a value, with an optional label and count. ([API](https://code2nguyen.github.io/web-components/components/progress/api/); [gallery](https://code2nguyen.github.io/web-components/components/progress/gallery/)) - [Sheet](https://code2nguyen.github.io/web-components/components/sheet/): `c2-sheet` from `@c2n/sheet`. Dialog pinned to an edge of the screen, for content that complements the page rather than interrupting it. ([API](https://code2nguyen.github.io/web-components/components/sheet/api/); [gallery](https://code2nguyen.github.io/web-components/components/sheet/gallery/)) - [Skeleton](https://code2nguyen.github.io/web-components/components/skeleton/): `c2-skeleton` from `@c2n/skeleton`. Placeholder block standing in for content that has not arrived, in three shapes and three animations. ([API](https://code2nguyen.github.io/web-components/components/skeleton/api/); [gallery](https://code2nguyen.github.io/web-components/components/skeleton/gallery/)) - [Spinner](https://code2nguyen.github.io/web-components/components/spinner/): `c2-spinner` from `@c2n/spinner`. Circular progress indicator, indeterminate or showing a value, with optional text. ([API](https://code2nguyen.github.io/web-components/components/spinner/api/); [gallery](https://code2nguyen.github.io/web-components/components/spinner/gallery/)) - [Status Panel](https://code2nguyen.github.io/web-components/components/status-panel/): `c2-status-panel` from `@c2n/status-panel`. Communicate empty states, operation outcomes and recoverable errors with clear next steps. ([API](https://code2nguyen.github.io/web-components/components/status-panel/api/); [gallery](https://code2nguyen.github.io/web-components/components/status-panel/gallery/)) - [Toast](https://code2nguyen.github.io/web-components/components/toast/): `c2-toast` from `@c2n/toast`. Notification cards and a manager for stacked, queued notifications with independent lifetimes. ([API](https://code2nguyen.github.io/web-components/components/toast/api/); [gallery](https://code2nguyen.github.io/web-components/components/toast/gallery/)) - [Tooltip](https://code2nguyen.github.io/web-components/components/tooltip/): `c2-tooltip` from `@c2n/tooltip`. Contextual hint shown when its target is hovered or focused, rendered in the top layer. ([API](https://code2nguyen.github.io/web-components/components/tooltip/api/); [gallery](https://code2nguyen.github.io/web-components/components/tooltip/gallery/)) ### Inputs - [Autocomplete](https://code2nguyen.github.io/web-components/components/autocomplete/): `c2-autocomplete` from `@c2n/autocomplete`. Searchable combobox for local or remote items with customizable list rows. ([API](https://code2nguyen.github.io/web-components/components/autocomplete/api/); [gallery](https://code2nguyen.github.io/web-components/components/autocomplete/gallery/)) - [Cascader](https://code2nguyen.github.io/web-components/components/cascader/): `c2-cascader` from `@c2n/cascader`. Select a value from related, multi-level data in one floating panel. ([API](https://code2nguyen.github.io/web-components/components/cascader/api/); [gallery](https://code2nguyen.github.io/web-components/components/cascader/gallery/)) - [Checkbox](https://code2nguyen.github.io/web-components/components/checkbox/): `c2-checkbox` from `@c2n/checkbox`. Native checkbox behaviour in a quiet, themeable box with an opt-in hover layer. ([API](https://code2nguyen.github.io/web-components/components/checkbox/api/); [gallery](https://code2nguyen.github.io/web-components/components/checkbox/gallery/)) - [Code Editor](https://code2nguyen.github.io/web-components/components/code-editor/): `c2-code-editor` from `@c2n/code-editor`. Editable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables. ([API](https://code2nguyen.github.io/web-components/components/code-editor/api/); [gallery](https://code2nguyen.github.io/web-components/components/code-editor/gallery/)) - [Color Area](https://code2nguyen.github.io/web-components/components/color-area/): `c2-color-area` from `@c2n/color-area`. Two-dimensional area for picking saturation and value of a colour. ([API](https://code2nguyen.github.io/web-components/components/color-area/api/); [gallery](https://code2nguyen.github.io/web-components/components/color-area/gallery/)) - [Color Select](https://code2nguyen.github.io/web-components/components/color-select/): `c2-color-select` from `@c2n/color-select`. Colour swatch that opens a full picker built from area and slider. ([API](https://code2nguyen.github.io/web-components/components/color-select/api/); [gallery](https://code2nguyen.github.io/web-components/components/color-select/gallery/)) - [Color Slider](https://code2nguyen.github.io/web-components/components/color-slider/): `c2-color-slider` from `@c2n/color-slider`. Horizontal slider for choosing a hue from 0 to 360. ([API](https://code2nguyen.github.io/web-components/components/color-slider/api/); [gallery](https://code2nguyen.github.io/web-components/components/color-slider/gallery/)) - [Date Input](https://code2nguyen.github.io/web-components/components/date-input/): `c2-date-input` from `@c2n/date-input`. Form-associated single-date input with native picker, constraints, helper text and error states. ([API](https://code2nguyen.github.io/web-components/components/date-input/api/); [gallery](https://code2nguyen.github.io/web-components/components/date-input/gallery/)) - [Date Selector](https://code2nguyen.github.io/web-components/components/date-selector/): `c2-date-selector` from `@c2n/date-selector`. Accessible one- or two-month calendar for choosing a date range. ([API](https://code2nguyen.github.io/web-components/components/date-selector/api/); [gallery](https://code2nguyen.github.io/web-components/components/date-selector/gallery/)) - [Label](https://code2nguyen.github.io/web-components/components/label/): `c2-label` from `@c2n/label`. Caption that names and activates the control referenced by its for attribute, with a required marker. ([API](https://code2nguyen.github.io/web-components/components/label/api/); [gallery](https://code2nguyen.github.io/web-components/components/label/gallery/)) - [Number Input](https://code2nguyen.github.io/web-components/components/number-input/): `c2-number-input` from `@c2n/number-input`. Form-associated numeric input with native validation, step controls, adornments and helper states. ([API](https://code2nguyen.github.io/web-components/components/number-input/api/); [gallery](https://code2nguyen.github.io/web-components/components/number-input/gallery/)) - [Questionnaire](https://code2nguyen.github.io/web-components/components/questionnaire/): `c2-questionnaire` from `@c2n/questionnaire`. A multi-step single- and multiple-choice flow with validation, shortcuts and form submission. ([API](https://code2nguyen.github.io/web-components/components/questionnaire/api/); [gallery](https://code2nguyen.github.io/web-components/components/questionnaire/gallery/)) - [Radio](https://code2nguyen.github.io/web-components/components/radio/): `c2-radio` from `@c2n/radio`. Radio options built on native inputs, grouped into one value with keyboard navigation. ([API](https://code2nguyen.github.io/web-components/components/radio/api/); [gallery](https://code2nguyen.github.io/web-components/components/radio/gallery/)) - [Rate](https://code2nguyen.github.io/web-components/components/rate/): `c2-rate` from `@c2n/rate`. Accessible star rating input with hover preview, keyboard control and optional half values. ([API](https://code2nguyen.github.io/web-components/components/rate/api/); [gallery](https://code2nguyen.github.io/web-components/components/rate/gallery/)) - [Select](https://code2nguyen.github.io/web-components/components/select/): `c2-select` from `@c2n/select`. Dropdown that pairs a themeable trigger with an anchored list of c2-list-item options. ([API](https://code2nguyen.github.io/web-components/components/select/api/); [gallery](https://code2nguyen.github.io/web-components/components/select/gallery/)) - [Slider](https://code2nguyen.github.io/web-components/components/slider/): `c2-slider` from `@c2n/slider`. Range input with a themeable track, thumb, step ticks and value bubble. ([API](https://code2nguyen.github.io/web-components/components/slider/api/); [gallery](https://code2nguyen.github.io/web-components/components/slider/gallery/)) - [Switch](https://code2nguyen.github.io/web-components/components/switch/): `c2-switch` from `@c2n/switch`. On/off toggle on a native switch input, with label, description and thumb icons. ([API](https://code2nguyen.github.io/web-components/components/switch/api/); [gallery](https://code2nguyen.github.io/web-components/components/switch/gallery/)) - [Text Field](https://code2nguyen.github.io/web-components/components/text-field/): `c2-text-field` from `@c2n/text-field`. Single-line input with icon slots, clear button, helper and error text, and a character counter. ([API](https://code2nguyen.github.io/web-components/components/text-field/api/); [gallery](https://code2nguyen.github.io/web-components/components/text-field/gallery/)) - [Textarea](https://code2nguyen.github.io/web-components/components/textarea/): `c2-textarea` from `@c2n/textarea`. Multiline text input with resizing, helper and error text, and a character counter. ([API](https://code2nguyen.github.io/web-components/components/textarea/api/); [gallery](https://code2nguyen.github.io/web-components/components/textarea/gallery/)) - [Theme Select](https://code2nguyen.github.io/web-components/components/theme-select/): `c2-theme-select` from `@c2n/theme-select`. Colour-theme switcher: click to step to the next mode, hover for the full menu. ([API](https://code2nguyen.github.io/web-components/components/theme-select/api/); [gallery](https://code2nguyen.github.io/web-components/components/theme-select/gallery/)) - [Upload](https://code2nguyen.github.io/web-components/components/upload/): `c2-upload` from `@c2n/upload`. Drag-and-drop file selection with validation, upload progress, retry, cancellation, and attachment results. ([API](https://code2nguyen.github.io/web-components/components/upload/api/); [gallery](https://code2nguyen.github.io/web-components/components/upload/gallery/)) ### Layout - [Accordion](https://code2nguyen.github.io/web-components/components/accordion/): `c2-accordion` from `@c2n/accordion`. Connected, animated panels with shared borders and single or multiple expansion. ([API](https://code2nguyen.github.io/web-components/components/accordion/api/); [gallery](https://code2nguyen.github.io/web-components/components/accordion/gallery/)) - [Border Beam](https://code2nguyen.github.io/web-components/components/border-beam/): `c2-border-beam` from `@c2n/border-beam`. A decorative beam that travels around the border of any positioned container. ([API](https://code2nguyen.github.io/web-components/components/border-beam/api/); [gallery](https://code2nguyen.github.io/web-components/components/border-beam/gallery/)) - [Card](https://code2nguyen.github.io/web-components/components/card/): `c2-card` from `@c2n/card`. Groups related content and actions on a single bordered surface. ([API](https://code2nguyen.github.io/web-components/components/card/api/); [gallery](https://code2nguyen.github.io/web-components/components/card/gallery/)) - [Dashboard](https://code2nguyen.github.io/web-components/components/dashboard/): `c2-dashboard` from `@c2n/dashboard`. Grid of resizable panes, dragged by the edges they share. ([API](https://code2nguyen.github.io/web-components/components/dashboard/api/); [gallery](https://code2nguyen.github.io/web-components/components/dashboard/gallery/)) - [Details](https://code2nguyen.github.io/web-components/components/details/): `c2-details` from `@c2n/details`. Collapsible disclosure built on native details and summary. ([API](https://code2nguyen.github.io/web-components/components/details/api/); [gallery](https://code2nguyen.github.io/web-components/components/details/gallery/)) - [Header](https://code2nguyen.github.io/web-components/components/header/): `c2-header` from `@c2n/header`. Arranges brand, navigation, actions and a mobile trigger in a reusable site shell. ([API](https://code2nguyen.github.io/web-components/components/header/api/); [gallery](https://code2nguyen.github.io/web-components/components/header/gallery/)) - [Seperator](https://code2nguyen.github.io/web-components/components/seperator/): `c2-seperator` from `@c2n/seperator`. Horizontal or vertical rule with an optional label, for dividing content and toolbars. ([API](https://code2nguyen.github.io/web-components/components/seperator/api/); [gallery](https://code2nguyen.github.io/web-components/components/seperator/gallery/)) ### Navigation - [Breadcrumb](https://code2nguyen.github.io/web-components/components/breadcrumb/): `c2-breadcrumb` from `@c2n/breadcrumb`. Navigation trail of link buttons with separators, a current page and optional collapsing. ([API](https://code2nguyen.github.io/web-components/components/breadcrumb/api/); [gallery](https://code2nguyen.github.io/web-components/components/breadcrumb/gallery/)) - [Link Button](https://code2nguyen.github.io/web-components/components/link-button/): `c2-link-button` from `@c2n/link-button`. Text-styled control for link and navigation actions, rendered as a real anchor or a button. ([API](https://code2nguyen.github.io/web-components/components/link-button/api/); [gallery](https://code2nguyen.github.io/web-components/components/link-button/gallery/)) - [Menu](https://code2nguyen.github.io/web-components/components/menu/): `c2-menu` from `@c2n/menu`. Commands, links, checkboxes and submenus in a popover anchored to a trigger. ([API](https://code2nguyen.github.io/web-components/components/menu/api/); [gallery](https://code2nguyen.github.io/web-components/components/menu/gallery/)) - [Navigation Menu](https://code2nguyen.github.io/web-components/components/navigation-menu/): `c2-navigation-menu` from `@c2n/navigation-menu`. Site navigation bar whose triggers open panels of links below the header. ([API](https://code2nguyen.github.io/web-components/components/navigation-menu/api/); [gallery](https://code2nguyen.github.io/web-components/components/navigation-menu/gallery/)) - [Pagination](https://code2nguyen.github.io/web-components/components/pagination/): `c2-pagination` from `@c2n/pagination`. Page navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page. ([API](https://code2nguyen.github.io/web-components/components/pagination/api/); [gallery](https://code2nguyen.github.io/web-components/components/pagination/gallery/)) - [Side Nav](https://code2nguyen.github.io/web-components/components/side-nav/): `c2-side-nav` from `@c2n/side-nav`. Responsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones. ([API](https://code2nguyen.github.io/web-components/components/side-nav/api/); [gallery](https://code2nguyen.github.io/web-components/components/side-nav/gallery/)) - [Tabs](https://code2nguyen.github.io/web-components/components/tabs/): `c2-tabs` from `@c2n/tabs`. Tab strip that shows one content panel at a time. ([API](https://code2nguyen.github.io/web-components/components/tabs/api/); [gallery](https://code2nguyen.github.io/web-components/components/tabs/gallery/)) ## Icon packages - [Feather Icons](https://code2nguyen.github.io/web-components/icons/feather-icons/): 287 open-source Feather icons, one web component each. - [Mat Icon](https://code2nguyen.github.io/web-components/icons/mat-icon/): 2,234 Material Icons ligatures rendered through a single element. - [Phosphor Icons](https://code2nguyen.github.io/web-components/icons/phosphor-icons/): 1,512 flexible icons in six weights, one web component each. ## Complete examples - [Account Form (HTML)](https://code2nguyen.github.io/web-components/examples/basic-form-html/): A settings form built from c2-card, c2-text-field, c2-select, c2-checkbox, c2-switch and c2-button — no framework, one