c2n/web-componentsv0.0.6
GitHub repository

c2n web components

Small, themable UI components that work in any stack.

43 components published as individual npm packages. Built on Lit, styled through CSS custom properties, and usable from plain HTML, React, Vue, Astro or anything that speaks the DOM.

Browse componentsIcon sets
  • One package per component
  • Themed with CSS variables
  • Framework agnostic, SSR friendly

Components

Every preview below is the real component. Open one to see its examples, API and an interactive theming panel.

Inputs11

CheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.
Color AreaTwo-dimensional area for picking saturation and value of a colour.
Color SelectColour swatch that opens a full picker built from area and slider.
Color SliderHorizontal slider for choosing a hue from 0 to 360.
Email
LabelCaption that names and activates the control referenced by its for attribute, with a required marker.
RadioRadio options built on native inputs, grouped into one value with keyboard navigation.
United States Canada France Vietnam
SelectDropdown that pairs a themeable trigger with an anchored list of c2-list-item options.
SliderRange input with a themeable track, thumb, step ticks and value bubble.
Notifications
SwitchOn/off toggle on a native switch input, with label, description and thumb icons.
Text FieldSingle-line input with icon slots, clear button, helper and error text, and a character counter.
TextareaMultiline text input with resizing, helper and error text, and a character counter.

Buttons4

New item Saving…
ButtonThemeable button with slots for text, prefix, suffix and running icons.
DayWeekMonth SavePublish
Button GroupAttached buttons with shared borders, optionally a segmented control with single or multiple selection.
Copy
Copy ButtonButton that copies text to the clipboard — the element it sits in, another element by id, or a literal string.
Icon ButtonRound, hoverable button wrapping a slotted SVG icon.

Navigation7

Home Library Data
BreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.
Documentation Overview Learn more
Link ButtonText-styled control for link and navigation actions, rendered as a real anchor or a button.
Actions Edit Duplicate
Delete
MenuCommands, links, checkboxes and submenus in a popover anchored to a trigger.
Products
AnalyticsRealtime dashboards WarehouseColumnar storage
Docs Pricing
Navigation MenuSite navigation bar whose triggers open panels of links below the header.
PaginationPage navigation in three layouts: numbered pages, a simple page status, or a table-footer row with rows-per-page.
Inbox
Drafts
Sent
Main content
Side NavResponsive navigation drawer beside the page: pushes the content on large screens, slides over it with a backdrop on small ones.
Overview panel
Activity panel
TabsTab strip that shows one content panel at a time.

Layout4

Delivered in 3–5 business days. Return within 30 days.
AccordionConnected, animated panels with shared borders and single or multiple expansion.
Card title
Supporting text that describes what this card is about.
CardGroups related content and actions on a single bordered surface.
Delivered in 3–5 business days. Free over $50.
DetailsCollapsible disclosure built on native details and summary.
or
SeperatorHorizontal or vertical rule with an optional label, for dividing content and toolbars.

Data display7

AvatarImage, initials or icon for a person, with status dot and badge.
Active Pending
BadgeTinted pill for status text, counts and dots, optionally pinned to a corner of another element.
Code ViewerSyntax-highlighted code with line numbers, copy button and dark mode, powered by shiki.
⌘ K Ctrl + Shift + P Esc
KbdKeyboard key label for shortcuts and command hints, with the semantics of the native kbd element.
Folders
Inbox Design
Archive
ListVertical list container with single or multiple selection.
Selected item Default item Disabled item
List ItemSelectable row with icon slots, used on its own or as the option of list and select.
TableVirtualized data grid with declarative columns, sorting, selection, pinning and resizing.

Feedback8

Open modal Invite your team
Share the link with your teammates.
Done
ModalDialog built on the native dialog element: focus trap, backdrop, Escape, title, body and footer.
Anchored overlay content
OverlayAnchored popup built on the browser Popover API, positioned with floating-ui.
Uploading files
ProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.
Open sheet Filters
A panel pinned to the edge of the screen.
Apply
SheetDialog pinned to an edge of the screen, for content that complements the page rather than interrupting it.
SkeletonPlaceholder block standing in for content that has not arrived, in three shapes and three animations.
Loading…
SpinnerCircular progress indicator, indeterminate or showing a value, with optional text.
ToastNotification cards and a manager for stacked, queued notifications with independent lifetimes.
TooltipContextual hint shown when its target is hovered or focused, rendered in the top layer.

Chat2

Chat InputAuto-growing message box with a send button for chat interfaces.
Elisa
17:29
Bonjour 👋
Chat MessageOne chat bubble with avatar, title, timestamp and message body.

Icons

Icon sets ship as separate packages. Every icon is a web component that inherits currentColor.

  • Feather Icons287 open-source Feather icons, one web component each.
  • home favorite settings search
    Mat Icon2,234 Material Icons ligatures rendered through a single element.
  • Phosphor Icons1,512 flexible icons in six weights, one web component each.

Getting started

Three steps from an empty project to a themed component.

  1. 1

    Install the packages you need

    Each component ships as its own package under the @c2n scope, so you only pay for what you use. Lit is a peer dependency shared between them.

    npm install @c2n/text-field
  2. 2

    Import once, use anywhere

    Importing a package registers its c2-* custom element. After that it is plain HTML.

    import '@c2n/text-field'

// then anywhere in your markup
<c2-text-field placeholder="Your email"></c2-text-field>
  3. 3

    Theme with CSS custom properties

    Every visual detail is exposed as a variable named --c2-<component>__<part>--<property>. Set them on any ancestor to restyle a component, a section, or the whole app. Or load @c2n/theme and set a handful of design tokens once.

    .newsletter c2-text-field {
  --c2-text-field--border-radius: 12px;
  --c2-text-field--background: #f4f4f5;
  --c2-text-field__focus--border: 1px solid #2563eb;
}
  4. 4

    Extend with slots

    Named slots let you replace icons and inject content without forking the component.

    <c2-text-field placeholder="Search">
  <svg slot="prefix-icon" viewBox="0 0 24 24">…</svg>
</c2-text-field>
escAccordionConnected, animated panels with shared borders and single or multiple expansion.LayoutAvatarImage, 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 displayBreadcrumbNavigation trail of link buttons with separators, a current page and optional collapsing.NavigationButtonThemeable button with slots for text, prefix, suffix and running icons.ButtonsButton GroupAttached buttons with shared borders, optionally a segmented control with single or multiple selection.ButtonsCardGroups related content and actions on a single bordered surface.LayoutChat InputAuto-growing message box with a send button for chat interfaces.ChatChat MessageOne chat bubble with avatar, title, timestamp and message body.ChatCheckboxNative checkbox behaviour in a quiet, themeable box with an opt-in hover layer.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.ButtonsDetailsCollapsible disclosure built on native details and summary.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.InputsLink 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.NavigationOverlayAnchored 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.NavigationProgressLinear progress bar, indeterminate or filling to a value, with an optional label and count.FeedbackRadioRadio options built on native inputs, grouped into one value with keyboard navigation.InputsSelectDropdown 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.InputsSpinnerCircular progress indicator, indeterminate or showing a value, with optional text.FeedbackSwitchOn/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.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.FeedbackFeather 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.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.Guide