JSPM

  • Created
  • Published
  • Downloads 516
  • Score
    100M100P100Q85832F
  • License MIT

Web components hosted on a CDN

Package Exports

  • @cal.macconnachie/web-components
  • @cal.macconnachie/web-components/components/auth-form.js
  • @cal.macconnachie/web-components/components/base-button.js
  • @cal.macconnachie/web-components/components/base-card.js
  • @cal.macconnachie/web-components/components/base-date-picker.js
  • @cal.macconnachie/web-components/components/base-datetime-picker.js
  • @cal.macconnachie/web-components/components/base-drawer.js
  • @cal.macconnachie/web-components/components/base-input.js
  • @cal.macconnachie/web-components/components/base-select.js
  • @cal.macconnachie/web-components/components/base-tab.js
  • @cal.macconnachie/web-components/components/base-tabs.js
  • @cal.macconnachie/web-components/components/base-textarea.js
  • @cal.macconnachie/web-components/components/base-time-picker.js
  • @cal.macconnachie/web-components/components/favicon.ico
  • @cal.macconnachie/web-components/components/index
  • @cal.macconnachie/web-components/components/index.d.ts
  • @cal.macconnachie/web-components/components/quantity-select.js
  • @cal.macconnachie/web-components/components/theme-toggle.js
  • @cal.macconnachie/web-components/stylesheets/main

Readme

@cal.macconnachie/web-components

A collection of lightweight, framework-agnostic web components built with Lit.

Components

  • auth-form - Authentication with OAuth and email/password
  • base-button - Customizable button component
  • base-card - Card container component
  • base-date-picker - Date selection input
  • base-datetime-picker - Combined date and time picker
  • base-drawer - Slide-out drawer panel
  • base-input - Text input field
  • base-select - Dropdown select menu
  • base-tabs & base-tab - Tabbed content interface
  • base-textarea - Multi-line text input
  • base-time-picker - Time selection input
  • quantity-select - Quantity increment/decrement control
  • theme-toggle - Light/dark mode switcher

Quick Start

Load from CDN:

<!-- Load all components -->
<script type="module" src="https://cdn.cals-api.com/index.js"></script>

<!-- Or load individual components -->
<script type="module" src="https://cdn.cals-api.com/components/auth-form.js"></script>

Use in your HTML:

<base-button>Click me</base-button>
<auth-form app-name="My App"></auth-form>

Playground

View live examples and documentation at https://cdn.cals-api.com/