Widgets
Widget gallery
The widgets that ship with the platform: form controls, layout, navigation, display and content. Each card opens the widget's page, with live examples, its spec and a playground.
All
Input
Visualisation
View
Layout
Display
Overlay
Application
Action
Other
app-color-mode
Dark/light/system color mode switcher with toggle or dropdown.
#application
app-design-library
Design-library picker: re-declares the page radius scale from the style preset.
#application
app-layout
Grid-based page layout with areas DSL.
#application
cnc-accordion
Collapsible accordion panels, exclusive or multi-open.
#visualisation
cnc-address-picker
Search-based address autocomplete with suggestions dropdown.
#input
cnc-alert
Status message box with kind variants and dismiss.
#layout
cnc-arrow
Draws arrows between DOM elements.
#layout
cnc-autolayout
Auto-positions children to fit available space.
#layout
cnc-avatar
User avatar with image, initials, or icon fallback.
#view
cnc-avatar-group
Group of user avatars with image, initials, or icon fallback.
#view
cnc-badge
Counter/label badge with placement variants.
#view
cnc-block
Flex container that can load remote content via href.
#layout
cnc-breadcrumbs
Breadcrumb trail with drag scrolling and separator variants.
#action
cnc-button
Button with kinds, sizes, shapes, outline, and icon support.
#action
cnc-button-group
Groups related buttons with active state tracking and selection.
#action
cnc-calendar
Monthly calendar with events and navigation.
#visualisation
cnc-calendar-availability
Availability calendar with working/non-working day selection.
#visualisation
cnc-calendar-compact
Compact calendar with single and range date selection.
#visualisation
cnc-calendar-event
Full event calendar with desktop and mobile views.
#visualisation
cnc-calendar-scroller
Horizontal scrolling date picker for the current month.
#visualisation
cnc-calendar-year
Full year view with 12-month grid and date highlighting.
#visualisation
cnc-cards
CSS grid card layout with auto-fit and configurable width.
#visualisation
cnc-carousel
Image carousel/slider with effects and gallery thumbs.
#visualisation
cnc-carousel2
Image carousel powered by Splide.js.
#visualisation
cnc-chart
ApexCharts integration for advanced visualization.
#visualisation
cnc-chart2
Canvas-based charts powered by Chart.js.
#visualisation
cnc-chat
Conversation view with a channel header, rich message parts and a message box.
#visualisation
cnc-checkbox
Checkbox with label, kind variants, and states.
#input
cnc-checkboxes
Multi-checkbox group from JSON options array.
#input
cnc-choice
Card-style selector for choosing from options.
#input
cnc-code
Code editor for C&C
#display
cnc-color-picker
HSL color picker with gradient area, hue slider, and swatches.
#input
cnc-confirm-button
Button with confirmation modal before action.
#action
cnc-context-menu
Right-click menu positioned at pointer coordinates.
#overlay
cnc-countdown
Countdown timer with flip animation.
#view
cnc-custom-form
Custom form wrapper with error display.
#other
cnc-demo-maker
Assembles a widget's markup from its spec and renders it live beside the source.
#visualisation
cnc-details
Collapsible section with icon rotation.
#layout
cnc-dialog
Popover/dropdown dialog with smart positioning.
#overlay
cnc-display
The read-only display family — every cnc-display-* typed value (string, int, ip, code, date, weight, …) on one page, reachable from the one element via type.
#display
cnc-dock
Page layout with dockable tabs with content, auto creation of tabs for related pages and panels messaging.
#layout
cnc-drag-block
Draggable block on a continuous axis with step-snapped resize handles, emitting {start,end,edge}.
#action
cnc-dragdrop
Drag-and-drop functionality powered by Dragula.
#action
cnc-drawer
Slide-in side panel with position variants and backdrop.
#overlay
cnc-drop
Dropdown wrapper with trigger slot and positioned popup.
#overlay
cnc-field
Labeled form field wrapper with label positioning and validation.
#input
cnc-fieldset
Collapsible fieldset with arrow/checkbox toggle and line decoration.
#layout
cnc-fieldset-spaced
Two-column fieldset with label/description left, content right.
#other
cnc-file-browser
One folder at a time as a list or grid, with breadcrumbs, details and uploads.
#view
cnc-file-tree
Folder tree with search, sorting, drag-to-move, rename and upload.
#view
cnc-filter
Every filter type — set `type` and it brings the control, the encoding and the pill.
#visualisation
cnc-filter-view
Filter view controller with removable tags.
#visualisation
cnc-floater
Floating dialog/popover with drag, resize, and collapse.
#overlay
cnc-form
Form wrapper with submit handling and error display.
#other
cnc-form-builder
Visual drag-and-drop form builder that outputs a JSON layout for cnc-form-renderer.
#other
cnc-form-renderer
Form wrapper that renders form fields from a JSON layout definition.
#other
cnc-gantt-chart
Interactive Gantt chart with timeline, dependencies, zoom, and export.
#visualisation
cnc-grid-stack
Draggable, resizable grid layout.
#visualisation
cnc-guard
Permission-based pass/fail indicator.
#view
cnc-html-editor
Rich block-based HTML editor with drag-drop.
#input
cnc-icon
Icon renderer with size variants and color inheritance.
#view
cnc-icon-picker
Searchable, paged icon browser over /@cnc/icons/search.
#other
cnc-image
Image container with zoom and parallax effects.
#other
cnc-input
Every input type — set `type` and it brings the control, formatting, units and validation.
#input
cnc-input-location
Address field bound to an address object.
#input
cnc-layout
Window/panel layout with tabs, splits, and drag-drop.
#layout
cnc-link
Styled anchor that inherits parent color and decoration.
#action
cnc-list
List display with columns, rows, and action buttons.
#visualisation
cnc-litegraph
Node-based graph editor using LiteGraph.js.
#other
cnc-map
Map with markers, opened around what it shows.
#visualisation
cnc-markdown
Markdown renderer with syntax highlighting.
#other
cnc-markdown-pagedown
Markdown editor using the Pagedown converter. Type markdown, click Convert to see the rendered HTML.
#other
cnc-markdown-tiptap
Rich text editor with markdown paste support, image resizing, text alignment, links, tables, and highlight. Accepts and emits markdown via the value attribute.
#other
cnc-modal
Modal dialog with backdrop, title, and close button.
#overlay
cnc-nav-horizontal
Horizontal navigation bar with hover dropdown submenus.
#action
cnc-nav-horizontal2
Horizontal nav with hover-reveal sub-nav panel below and persistent active node.
#action
cnc-nav-mobile
Mobile hamburger navigation with expandable items.
#action
cnc-nav-mobile-drop
Mobile hamburger navigation with slide drill-down submenus.
#action
cnc-nav-vertical
Vertical sidebar navigation tree with collapsible sections.
#action
cnc-nav-vertical2
Vertical sidebar navigation tree.
#action
cnc-overlay
Popover/modal base using native dialog element.
#overlay
cnc-pagination
Page navigation with prev/next, result counts, and page size selector.
#other
cnc-panel
Bordered container with header and footer slots.
#view
cnc-pdf-viewer
Full-featured PDF document viewer.
#view
cnc-plot
Canvas 2D-based chart for plotting time series, lines, areas, ohlc & bars.
#visualisation
cnc-popup
Positioned popup overlay near an anchor element.
#overlay
cnc-print
Print button that opens content in a print window.
#other
cnc-processing
Full-screen loading spinner overlay.
#overlay
cnc-progress-bar
Linear progress indicator with size variants.
#view
cnc-progress-circle
Circular SVG progress indicator.
#view
cnc-qr
QR code generator with customizable styling.
#input
cnc-radios
Radio button group with kind variants and layout options.
#input
cnc-range
Dual-thumb range slider for from/to value selection.
#input
cnc-rating
Star rating with hover preview and keyboard support.
#input
cnc-scrollx
Horizontal scroll container with drag and arrow navigation.
#other
cnc-search
Search input with icon, clear button, and suggestions dropdown.
#other
cnc-select
Searchable dropdown select with single/multi select.
#input
cnc-select-tree
Tree-based hierarchical select with expandable nodes.
#input
cnc-signature
E-signature pad with pen drawing and typed signature modes.
#other
cnc-skeleton
Loading placeholder with pulse and sheen animations.
#layout
cnc-slider
Range slider with drag, tick marks, and tooltip.
#input
cnc-slides
Animated slide container for wizard-like flows.
#layout
cnc-sort-view
Sort state display with dropdown to toggle sort direction.
#other
cnc-sparkbar
Mini bar chart for inline data visualization.
#visualisation
cnc-sparkline
Mini sparkline chart for inline data trends.
#visualisation
cnc-speach2text
Speech-to-text recording with browser audio API.
#input
cnc-steps
Horizontal/vertical step indicator with icons and badges.
#view
cnc-switch
Toggle switch for on/off states.
#input
cnc-tabbar
Mobile bottom tab bar with icons, labels, and badges.
#other
cnc-table
Advanced data table with sorting, resizing, and grid layout.
#visualisation
cnc-table5
Table drawn from rows, with a template per column.
#view
cnc-tabs
Tab panel in four looks (line, soft, filled, curved), horizontal or vertical.
#layout
cnc-tag
Tag/pill labels with kinds, shapes, sizes, and closable.
#view
cnc-textarea
Multi-line text input with resize modes.
#input
cnc-thumbnail
Image thumbnail preview with icon fallback.
#other
cnc-timeline
Vertical timeline with date tags and active step highlighting.
#view
cnc-timezone
Searchable time-zone picker.
#input
cnc-tiptap
Rich text editor built on Tiptap, with toolbars, extensions, and read-only mode.
#input
cnc-toast
Toast notification system with stacked messages.
#overlay
cnc-toggle
Two-option toggle switch for selecting between values.
#other
cnc-toolbar
Config-driven icon button bar with dividers, spacers, and one action event.
#action
cnc-tooltip
Tooltip overlay with hover/click trigger and placement options.
#overlay
cnc-tree
Advanced tree view with expand/collapse and selection.
#other
cnc-tree-directory
Directory-style tree with folder/file icons.
#other
cnc-treetable
Tree table with collapsible rows, indentation, and drag-and-drop.
#other
cnc-treetable2
Tree table with collapsible rows, indentation, and drag-and-drop.
#other
cnc-view
Grid-based detail view for displaying key-value data.
#other
cnc-virtual-list
A virtual list implementation. It only renders as much as is needed to cover the visible items.
#layout
cnc-wizard
Multi-step form flow with a step sidebar, validation-gated navigation, and per-step lock/validate hooks.
#other
cnc-workspace
IDE-style workspace: file explorer, dockable tabs, live preview, DOM inspector, and chat.
#visualisation