Components
186 components, all in one npm package, @c2n/components: each card names the entry to import. Every component is themed through CSS custom properties and documented with live, editable examples.
Inputs
Autocomplete Searchable combobox for local or remote items with customizable list rows. @c2n/components/autocompleteCard Input Card number, expiry date and security code in one field, formatted as the brand prints them and checked as they are typed. @c2n/components/card-inputCascader Select a value from related, multi-level data in one floating panel. @c2n/components/cascaderCheckbox Native checkbox behaviour in a quiet, themeable box with an opt-in hover layer. @c2n/components/checkboxCheckbox group Checkboxes grouped into one form control with a value array, a group label and an at-least-one rule. @c2n/components/checkbox/checkbox-groupChip A compact pill for a filter, a choice or an entered value: selectable as a toggle, removable with a button or the keyboard. @c2n/components/chipChoice Matrix Rows × columns of checkboxes or radio buttons in one form control: permissions, notification settings, agreement scales. @c2n/components/choice-matrixColor Area Two-dimensional area for picking saturation and value of a colour. @c2n/components/color-areaColor Select Colour swatch that opens a full picker built from area and slider. @c2n/components/color-selectColor Slider Horizontal slider for choosing a hue from 0 to 360. @c2n/components/color-sliderDate Input Form-associated single-date input with native picker, constraints, helper text and error states. @c2n/components/date-inputDate Selector Accessible one- or two-month calendar for choosing a date range. @c2n/components/date-selectorDate Strip A row of days to pick one from, a week at a time, with dots on the days that have something on them. @c2n/components/date-stripDate Time Picker Form-associated date-and-time field with a calendar and time popup, min/max/step constraints and an IANA time zone. @c2n/components/date-time-pickerEmoji Picker A searchable grid of emoji in categories, with skin tones and the emoji used last. @c2n/components/emoji-pickerFacet List One facet of a filter sidebar: an attribute’s values with counts, to include or exclude from a search. @c2n/components/facet-listFieldset Groups related controls under a legend, with a description, a group-level error and a disabled state that reaches every control inside. @c2n/components/fieldsetFilter Builder A filter bar of sentence chips (Status is any of Active), an add-filter picker and an editor for each part; it reports a plain JSON filter tree. @c2n/components/filter-builderForm Form container with validation timing, an error summary, server errors, dirty tracking and async submit. @c2n/components/formForm Field Label, hint, error, warning and character counter around any form control, wired for assistive technology. @c2n/components/form-fieldInline Edit Text that turns into a field on click: Enter (Ctrl/⌘+Enter when multiline) commits, Escape cancels, and any control with a value that fires change can be the editor. @c2n/components/inline-editJSON Form A form generated from a JSON Schema, laid out by the schema, a UI schema or your own markup. @c2n/components/json-formKey Value Editor Editable KEY=value rows for environment variables and headers: paste a .env file to split it into rows, mask secret values, and flag duplicate or malformed keys. @c2n/components/key-value-editorLabel Caption that names and activates the control referenced by its for attribute, with a required marker. @c2n/components/labelMask Input A text input that fits what is typed to a pattern, for postcodes, IBANs, tax IDs, expiry dates and other fixed formats. @c2n/components/mask-inputMoney Input Currency amount field that groups digits as you type, follows the locale and stores an integer count of minor units. @c2n/components/money-inputMonth Picker Pick a month, or a year: billing periods, reports and card expiry. @c2n/components/month-pickerNumber Input Form-associated numeric input with native validation, step controls, adornments and helper states. @c2n/components/number-inputOTP Input Form-associated one-time-code field with one cell per character, paste and SMS autofill, grouping and masking. @c2n/components/otp-inputPassword Field A password input with a show/hide toggle, a strength meter, a requirements checklist and a Caps Lock warning. @c2n/components/password-fieldPhone Input A phone number field with a searchable country picker, as-you-type grouping and an E.164 value. @c2n/components/phone-inputQuery Input A key:value query field whose filters are chips you can switch off or remove, with syntax highlighting and field and value suggestions, as in Datadog, GitHub and Sentry. @c2n/components/query-inputQuestionnaire A multi-step single- and multiple-choice flow with validation, shortcuts and form submission. @c2n/components/questionnaireRadio Radio options built on native inputs, grouped into one value with keyboard navigation. @c2n/components/radioRate Accessible star rating input with hover preview, keyboard control and optional half values. @c2n/components/rateRich Text Editor A compact formatted-text field for comments, replies and email bodies: bold, links, lists, quotes and code, a one-tab-stop toolbar, and a Markdown value. @c2n/components/rich-text-editorSearch Field A search box with a debounced search event, a clear button, a keyboard shortcut hint and recent searches. @c2n/components/search-fieldSecret Field Shows an API key or other secret masked, with buttons to reveal it, copy it and ask for a new one. @c2n/components/secret-fieldSelect Dropdown that pairs a themeable trigger with an anchored list of c2-list-item options. @c2n/components/selectShortcut Keyboard shortcuts for a whole application from one element: each binding fires an action event, runs a handler or activates a target. @c2n/components/shortcutSlider Range input with a themeable track, thumb, step ticks and value bubble. @c2n/components/sliderSwitch On/off toggle on a native switch input, with label, description and thumb icons. @c2n/components/switchTag Input Turns typed or pasted text into removable tags — recipients, keywords, labels — with configurable delimiters, parsing and validation. @c2n/components/tag-inputText Field Single-line input with icon slots, clear button, helper and error text, and a character counter. @c2n/components/text-fieldTextarea Multiline text input with resizing, helper and error text, and a character counter. @c2n/components/textareaTheme Select Colour-theme switcher: click to step to the next mode, hover for the full menu. @c2n/components/theme-selectTime Input Form-associated time-of-day input with a scroll-wheel picker, step and range constraints, helper text and error states. @c2n/components/time-inputTime Range Picker Dashboard time range control: searchable quick ranges, an absolute range typed or picked on a calendar, time zone, shift and zoom, and auto-refresh. @c2n/components/time-range-pickerTime Slot Picker Pick a free time from someone's calendar: a row of days, then that day's times grouped into morning, afternoon and evening. @c2n/components/time-slot-pickerTree Select A dropdown for picking one or several rows from a hierarchy, with checkboxes, search and a form value. @c2n/components/tree-selectUpload Drag-and-drop file selection with validation, upload progress, retry, cancellation, and attachment results. @c2n/components/uploadView Options The Display popover of a collection: layout, grouping, ordering on several levels, Show switches and visible properties, reported as one plain value. @c2n/components/view-options
Buttons
Button Themeable button with slots for text, prefix, suffix and running icons. @c2n/components/buttonButton Group Joined actions and polished segmented controls with single or multiple selection. @c2n/components/button-groupCopy Button Button that copies text to the clipboard — the element it sits in, another element by id, or a literal string. @c2n/components/copy-buttonFloat Button A floating action button for the main action of a screen, which can expand into a speed dial of related actions. @c2n/components/float-buttonIcon Button Round, hoverable button wrapping a slotted SVG icon. @c2n/components/icon-buttonSplit Button A main action with a caret menu of alternatives, such as "Send ▾", or a remembered choice like a merge method. @c2n/components/split-button
Navigation
Bottom Nav The mobile tab bar: three to five destinations along the bottom of the screen, each an icon over a short label with a count or dot badge. @c2n/components/bottom-navBreadcrumb Navigation trail of link buttons with separators, a current page and optional collapsing. @c2n/components/breadcrumbCommand A searchable list of commands: type to filter, arrows to highlight, Enter to run. The core of a ⌘K palette. @c2n/components/commandContext Menu A menu opened by right-clicking or long-pressing an area, built from a slotted c2-menu or a render function per clicked spot. @c2n/components/context-menuLink Button Text-styled control for link and navigation actions, rendered as a real anchor or a button. @c2n/components/link-buttonMenu Commands, links, checkboxes and submenus in a popover anchored to a trigger. @c2n/components/menuMenubar Desktop-style File, Edit and View menus in one bar, with the arrow-key and hover movement of an application menu bar. @c2n/components/menubarNavigation Menu Site navigation bar whose triggers open panels of links below the header. @c2n/components/navigation-menuPagination Page navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page. @c2n/components/paginationSide Nav Responsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones. @c2n/components/side-navSkip Link A "Skip to main content" link that appears when a keyboard user tabs onto it and moves focus into the main content. @c2n/components/skip-linkTable Of Contents An "On this page" navigation that lists the headings of a document, nests them by level and highlights the section being read. @c2n/components/table-of-contentsTabs Tab strip that shows one content panel at a time. @c2n/components/tabs
Layout
Accordion Connected, animated panels with shared borders and single or multiple expansion. @c2n/components/accordionAction Bar A floating bar for the current selection: the count, the bulk actions and a button that clears it. @c2n/components/action-barApp Shell The frame of an application: header, navigation, main, an optional details panel, banner and footer, laid out from its own width. @c2n/components/app-shellBorder Beam A decorative beam that travels around the border of any positioned container. @c2n/components/border-beamCard Groups related content and actions on a single bordered surface. @c2n/components/cardCarousel A swipeable slideshow with previous/next controls, indicators, looping and optional autoplay. @c2n/components/carouselDashboard Grid of resizable panes, dragged by the edges they share. @c2n/components/dashboardDetails Collapsible disclosure built on native details and summary. @c2n/components/detailsHeader Arranges brand, navigation, actions and a mobile trigger in a reusable site shell. @c2n/components/headerMasonry Automatically pack differently sized dashboard tiles, then move or resize them in edit mode. @c2n/components/masonryMaster Detail A list beside the record it opens, one pane at a time with a Back step when the element is narrow. @c2n/components/master-detailOverflow List One row of actions or links that shows what fits and folds the rest into a "More" menu, refitting as its width changes. @c2n/components/overflow-listPage Header The top of a page: breadcrumb or parent link, your heading with status badges, description, metadata, page actions that fold into a menu, tabs and a toolbar. @c2n/components/page-headerSave Bar A floating bar that appears while a form has unsaved changes, with Discard and Save. @c2n/components/save-barSeparator Horizontal or vertical rule with an optional label, for dividing content and toolbars. @c2n/components/separatorSplit Panel Two panels separated by a divider the user drags, or moves with the keyboard, to resize them. @c2n/components/split-panelSticky Pins content to the top or bottom of its scroll container and tells you when it is stuck, optionally hiding it while the reader scrolls down. @c2n/components/stickySwipe Action A list row that slides sideways to reveal actions behind it, as in a mail or task list on a phone. @c2n/components/swipe-actionVisually Hidden Text for screen readers only: kept in the accessibility tree, drawn nowhere, optionally shown while it holds focus. @c2n/components/visually-hidden
Data display
Attachment File and image attachments with metadata, upload progress, failure states, and actions. @c2n/components/attachmentAvatar Image, initials or icon for a person, with status dot and badge. @c2n/components/avatarBadge Tinted pill for status text, counts and dots, optionally pinned to a corner of another element. @c2n/components/badgeBar List A ranked list whose rows carry their own bar: top pages, referrers, countries, or the changes between two periods. @c2n/components/bar-listChip Group A single row of chips or badges that collapses whatever does not fit into a +N indicator, recomputed as the row or its items change size. @c2n/components/chip-groupComparison Bar Segmented ratio bar comparing two or three quantities, such as the bid/ask balance of an order book. @c2n/components/comparison-barCountdown Time left until a date, or through a timer, drawn as segments, a clock or a phrase, and kept current to the second. @c2n/components/countdownDescription List Read-only label and value pairs for a detail page, in columns that wrap with the available width. @c2n/components/description-listDistribution Bar One 100% stacked bar of a breakdown, with a legend of shares and the hovered part brought forward. @c2n/components/distribution-barFormat Date A date and time formatted for the reader's language and, optionally, a fixed time zone. @c2n/components/format-dateFormat Number A number formatted for its locale: currency, percent, units, compact counts and byte sizes, from Intl.NumberFormat. @c2n/components/format-numberGoogle Map Google Maps with markers, a road route from A to B, and Street View, loaded once per page from a browser key. @c2n/components/google-mapHighlight Marks the parts of a text that match a search query. @c2n/components/highlightImage Image with lazy loading, a loading placeholder, an error fallback, click-to-load for untrusted URLs and a full-screen preview. @c2n/components/imageIndicator Solid dot or count pinned to an edge or corner of any element, with an accessible name for the count. @c2n/components/indicatorKbd Keyboard key label for shortcuts and command hints, with the semantics of the native kbd element. @c2n/components/kbdList Vertical list container with single or multiple selection. @c2n/components/listList Item Selectable row with icon slots, used on its own or as the option of list and select. @c2n/components/list-itemMarker An inline marker that highlights, underlines, strikes through, boxes or circles a run of text. @c2n/components/markerMath TeX formulas rendered as native MathML: no font CSS, readable by screen readers, safe for untrusted input. @c2n/components/mathMermaid Mermaid text diagrams drawn in your theme colours, loaded on demand and safe for untrusted sources. @c2n/components/mermaidMeter A measurement inside a known range — storage, quota, strength — with native meter thresholds and an optional segmented breakdown. @c2n/components/meterOrg Chart A hierarchy drawn as connected cards that collapse and expand: an organization chart, a reporting line or a team structure. @c2n/components/org-chartQR Code Generate accessible, themeable QR codes locally as crisp SVG graphics. @c2n/components/qr-codeRelative Time Time relative to now, such as "3 minutes ago" or "in 2 days", that keeps itself current and shows the full date on hover. @c2n/components/relative-timeReorder List Reorder a vertical queue with pointer or keyboard input while the application owns persistence. @c2n/components/reorder-listStat Displays a KPI with an optional icon, trend and supporting description. @c2n/components/statStatus Light Coloured dot plus a short label for the state of something, such as Live, Building or Failed. @c2n/components/status-lightSteps The trace of a task as it runs, or a stepper across the top of a view: statuses, durations, stages that open while they work, and steps the reader can select. @c2n/components/stepsTable Virtualized data grid with declarative columns, sorting, selection, pinning and resizing. @c2n/components/tableTimeline A vertical sequence of dated events on a connected rail: order history, activity feeds, changelogs. @c2n/components/timelineTrace Waterfall Show the spans of a distributed trace as a tree, each with a duration bar on one shared time axis. @c2n/components/trace-waterfallTree Hierarchical tree view with expansion, selection, checkboxes and lazy loading. @c2n/components/treeTruncate Clamps text to a number of lines, with an optional Show more button. @c2n/components/truncateVirtual List Windowed list with built-in search, sorting, selection and an async data source. @c2n/components/virtual-list
Editors & viewers
Code Editor Editable, syntax-highlighted source field on CodeMirror 6, themed entirely through CSS variables. @c2n/components/code-editorCode Viewer Syntax-highlighted code with line numbers, copy button and dark mode, powered by shiki. @c2n/components/code-viewerDiff Viewer Read-only line diff of two texts, unified or side by side, with folded unchanged lines and word highlights. @c2n/components/diff-viewerFlow A pipeline, dependency graph or database schema on a pannable canvas: steps with a status, smooth edges, rows joined row to row, auto layout, draggable nodes saved to localStorage, a hover card and a context menu. @c2n/components/flowImage Cropper Choose the part of an image to keep by moving and resizing a selection, then read it back as a canvas or a blob. @c2n/components/image-cropperJSON Viewer Browse a JSON value as a collapsible tree, search it, and copy any path or value. @c2n/components/json-viewerLog Viewer Explore large logs with variable-height virtual scrolling and sticky tabular attributes. @c2n/components/log-viewerPage Editor A Notion-style editor for long text: Markdown shortcuts while you type, a / menu for blocks, a toolbar over selected text, code blocks with syntax colours and eight named colours. @c2n/components/page-editorSpreadsheet A small editable grid with basic formulas, for budgets, quotes, price lists and score sheets. @c2n/components/spreadsheet
Chart
Chart overview Shared data, engines, legends, tooltips, realtime updates, events, states and theming. @c2n/components/chartArea chart A line chart with the region under each line filled — every line-chart attribute, plus a fill opacity. @c2n/components/chart/area-chartBar chart Bars over categories or time buckets, with several series drawn side by side within each band. @c2n/components/chart/bar-chartBubble chart An ECharts scatter plot with a third measure encoded as bubble area, for comparing how two measures relate while showing how much each point weighs. @c2n/components/chart/bubble-chartButterfly chart Two series back to back on a shared category axis, the categories named between them. The population pyramid is the classic case. @c2n/components/chart/butterfly-chartCandlestick chart An ECharts OHLC chart for market sessions and other open-close ranges, with semantic positive and negative colours. @c2n/components/chart/candlestick-chartChord chart Flows between groups around a circle, where one row is one flow from a source to a target. @c2n/components/chart/chord-chartDepth chart Cumulative bid and ask size around the mid price of an order book, as trading screens show market depth. @c2n/components/chart/depth-chartGauge chart A focused radial KPI gauge drawn by ECharts, with a configurable scale, progress arc and pointer. @c2n/components/chart/gauge-chartHeatmap chart Rows binned into cells by two keys, aggregated, and coloured by a sequential, diverging or stepped scale: a currency matrix, pair × tenor, hour × weekday, or a calendar of days. Drawn by ECharts, with a colour key that counts, marks and filters. @c2n/components/chart/heatmap-chartLine chart A line chart over a time or numeric x axis, drawn on canvas by uPlot, with series declared as children. @c2n/components/chart/line-chartMap chart A choropleth and point map on vector outlines, drawn by ECharts: regions shaded by a value, with layers of sized points and flow lines, on the bundled world and US maps or your own GeoJSON, TopoJSON or SVG. @c2n/components/chart/map-chartOverlap chart A Venn diagram of two or three sets, where each circle is a set and each shared area counts the members of exactly that combination. @c2n/components/chart/overlap-chartPie chart A pie or donut chart drawn by ECharts, where one row is one slice and label-field names it. @c2n/components/chart/pie-chartPyramid chart Ranked levels of a whole, stacked from a narrow apex to a wide base, where one row is one level. @c2n/components/chart/pyramid-chartRadar chart Compare several profiles across the same set of normalized indicators. @c2n/components/chart/radar-chartSankey chart Quantities moving through stages, where one row is one flow and each band is as wide as what it carries. @c2n/components/chart/sankey-chartScatter chart An ECharts scatter plot for finding relationships, clusters and outliers across two numeric measures. @c2n/components/chart/scatter-chartSparkline A chromeless trend line sized for a table cell, a list row or the trend slot of a c2-stat. @c2n/components/chart/sparklineState Timeline One band per series, coloured by the discrete state it was in over time: service health, CI runs, host power. @c2n/components/state-timelineTreemap chart A whole split into nested rectangles, each sized by its value: market maps, budgets and disk usage. @c2n/components/chart/treemap-chartWaterfall chart A running total bridged by the steps that move it, where one row is one step and totals mark where the bridge lands. @c2n/components/chart/waterfall-chart
Planning
Gantt A read-only project timeline: tasks, groups, milestones and dependencies on a day, week or month scale. @c2n/components/ganttKanban Board layout and card movement by pointer or keyboard, with cards drawn by your own renderItem. @c2n/components/kanbanMonth Planner Month calendar that draws events and trips as bars across the days they cover. @c2n/components/month-plannerNotepad A rich-text notepad that looks like paper: handwriting on ruled lines, a formatting toolbar over the selection, checklists and tear-off pages. @c2n/components/notepadTodo List A to-do list with the feel of paper: hand-drawn ticks, notes, highlighters, swipe and drag, and a remembered look. @c2n/components/todo-listWeek Planner Weekly schedule with time blocks: a typical week with optional odd and even weeks, or a dated week the user edits. @c2n/components/week-planner
Feedback
Banner A persistent, full-width message in the page flow for system notices, outages and account status. @c2n/components/bannerConfirm Dialog Asks the user to confirm an action: await show() or confirm() for a true/false answer, with a destructive variant and an async confirm action. @c2n/components/confirm-dialogHover Card Interactive preview card shown when a link or mention is hovered or focused, rendered in the top layer. @c2n/components/hover-cardLoading Overlay Covers a region while it loads: the content stays in place, dimmed and blocked, with a spinner and an announced label. @c2n/components/loading-overlayModal Dialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer. @c2n/components/modalNotification Center An inbox panel of notifications grouped by day, with read and unread states and mark all as read. @c2n/components/notification-centerOverlay Anchored popup built on the browser Popover API, positioned with floating-ui. @c2n/components/overlayPopconfirm A small "Are you sure?" popup anchored to the button that asked for it. @c2n/components/popconfirmProgress Progress bar or ring, indeterminate or filling to a value, with an optional label and count. @c2n/components/progressSheet Dialog pinned to an edge of the screen, for content that complements the page rather than interrupting it. @c2n/components/sheetSkeleton Placeholder block standing in for content that has not arrived, in three shapes and three animations. @c2n/components/skeletonSpinner Circular progress indicator, indeterminate or showing a value, with optional text. @c2n/components/spinnerStatus Panel Communicate empty states, operation outcomes and recoverable errors with clear next steps. @c2n/components/status-panelToast Notification cards and a manager for stacked, queued notifications with independent lifetimes. @c2n/components/toastToggletip A small ⓘ button that opens a help bubble on click or tap; the bubble can hold links and is announced to screen readers. @c2n/components/toggletipTooltip Contextual hint shown when its target is hovered or focused, rendered in the top layer. @c2n/components/tooltipTour A guided product tour that spotlights one element at a time and explains it in a panel beside it. @c2n/components/tourWorking Indicator A live "work in progress" line: animated mark, shimmering label, trailing dots and elapsed time. @c2n/components/working-indicator
Chat
Chat Input Auto-growing message composer with keyboard submission, toolbar actions and native form support. @c2n/components/chat-inputChat Message Flexible message row for conversations, assistant answers and activity updates. @c2n/components/chat-messageChat Message List Scrolling conversation log that follows new messages, counts unread ones and loads older history. @c2n/components/chat-message-listCitation A numbered inline marker that names its source, with a hover preview of the page it cites. @c2n/components/citationMarkdown Safe markdown renderer that streams: chat answers and READMEs, with code, math and diagrams. @c2n/components/markdownReaction Bar Emoji reactions with counts under a message or comment, toggled by the current user, with a picker to add more. @c2n/components/reaction-barStreaming Text Plain text that arrives in bursts, such as an LLM answer, revealed at a steady pace behind a caret. @c2n/components/streaming-text