| name | lit-ct-components |
| description | Use Conectate Components (ct-*) when building UIs with Lit, Vue, or React. Covers @conectate/components web components (ct-button, ct-input, ct-dialog, ct-select, etc.), CtLit base class, imports, slots, CSS variables, and events. Use when the user mentions ct-components, Conectate Components, or building interfaces with this library. |
Conectate Components (ct-components)
Conectate Components is a library of web components published as @conectate/components. Use this skill when building UIs with Lit, Vue, or React and the project uses or should use these components.
Installation
pnpm i @conectate/components
npm i @conectate/components
Base class CtLit
For Lit-based components, extend CtLit instead of LitElement to get utilities:
import { CtLit, customElement, html } from "@conectate/components/ct-lit.js";
@customElement("my-component")
class MyComponent extends CtLit {
render() {
return html`<div>My component</div>`;
}
}
$$(selector) — first match in shadow root. $$$(selector) — all matches.fire(name, detail) — dispatch custom event with detail.scrollToY(scrollTargetY, time?, easing?, target?) — animated scroll.deepClone(object) — deep clone (structuredClone or JSON fallback).
Full API: examples/ct-lit.md.
Imports
Always import the component script before use. One import per component:
import "@conectate/components/ct-button";
import "@conectate/components/ct-input";
import "@conectate/components/ct-dialog";
Path pattern: @conectate/components/<component-name>.
Components (overview)
Use each tag only after importing its script. For full props, slots, and CSS variables, see the linked docs.
| Category | Component | Doc | Typical use |
|---|
| Base | CtLit | ct-lit.md | Base class for Lit components |
| Buttons | ct-button | ct-button.md | raised, flat, shadow, light; slots prefix/suffix |
| ct-button-helpers | ct-button-helpers.md | Button helpers |
| ct-button-menu | ct-button-menu.md | Button with dropdown menu |
| ct-button-split | ct-button-split.md | Split button + menu |
| ct-icon-button | ct-icon-button.md | Icon-only button |
| Inputs | ct-input | ct-input.md | Text input with label, errorMessage, charCounter |
| ct-input-container, ct-input-wrapper | ct-input-container.md, ct-input-wrapper.md | Input layout / wrapper |
| ct-textarea | ct-textarea.md | Multiline input |
| ct-textarea-autogrow | ct-textarea-autogrow.md | Auto-growing textarea |
| ct-input-autocomplete, ct-autocomplete-suggestions | ct-input-autocomplete.md, ct-autocomplete-suggestions.md | Input with suggestions |
| ct-input-phone, ct-phone-input | ct-input-phone.md, ct-phone-input.md | Phone number input |
| ct-date | ct-date.md | Date picker |
| ct-checkbox | ct-checkbox.md | Checkbox |
| ct-radio | ct-radio.md | Radio group |
| Dialogs & overlay | ct-dialog | ct-dialog.md | Modal via showCtDialog(content); animations alert, slide-right, bottom-sheet |
| ct-dialog-builder | ct-dialog-builder.md | Dialog builder |
| ct-card-dialog | ct-card-dialog.md | Card-style dialog |
| ct-bottom-sheet | ct-bottom-sheet.md | Bottom sheet |
| ct-confirm | ct-confirm.md | Confirmation dialog |
| Selection | ct-select | ct-select.md | Single/multi select; items, value, searchable; event value with e.detail.value |
| ct-select-dialog, ct-select-item | ct-select-dialog.md, ct-select-item.md | Building blocks for select UIs |
| Feedback | ct-loading, ct-loading-bar, ct-loading-placeholder | ct-loading.md, ct-loading-bar.md, ct-loading-placeholder.md | Loading states |
| ct-spinner | ct-spinner.md | Spinner |
| ct-snackbar | ct-snackbar.md | Toast/snackbar |
| Layout & content | ct-card | ct-card.md | Card container |
| ct-menu | ct-menu.md | Menu / dropdown |
| ct-tabs, ct-tab | ct-tabs.md, ct-tab.md | Tabs |
| ct-collapse | ct-collapse.md | Collapsible section |
| ct-list-item | ct-list-item.md | List item |
| ct-icon | ct-icon.md | Icon |
| ct-img | ct-img.md | Image |
| ct-tooltip | ct-tooltip.md | Tooltip |
| Utilities | ct-helpers | ct-helpers.md | getClient, getGeoLocation, sleep, PushID |
| ct-scroll-threshold | ct-scroll-threshold.md | Infinite scroll trigger |
| ct-chartjs, ct-qr-tools, ct-promp | ct-chartjs.md, ct-qr-tools.md, ct-promp.md | Charts, QR, prompt |
More components and containers: reference.md.
Uso con Lit / Vue / React
- Lit: Import the component
.js, then use the tag. Bind with .property=${value}, events with @eventname=${handler}. For custom events, e.detail holds the payload.
- Vue: Import the component
.js. Use v-model where supported (e.g. ct-input, ct-select). Events: @value, @input, etc.
- React: Import the component
.js. Use onClick, onChange, onValue (for custom events, e.detail). Declare JSX types for ct-* if needed (see docs examples).
Minimal examples
Lit (ct-button):
import { LitElement, html } from "lit";
import "@conectate/components/ct-button.js";
class MyEl extends LitElement {
render() {
return html`<ct-button raised @click=${() => console.log("ok")}>Click</ct-button>`;
}
}
Vue (ct-input):
<template>
<ct-input label="Name" v-model="name" />
</template>
<script setup>
import "@conectate/components/ct-input.js";
import { ref } from "vue";
const name = ref("");
</script>
React (ct-select):
import "@conectate/components/ct-select.js";
<ct-select label="Choice" items={items} value={val} onValue={(e) => setVal(e.detail.value)} />
For full examples per component, see examples/ (e.g. ct-button.md, ct-input.md).
Slots
Many components use default, prefix, and suffix slots. Check each component’s doc for exact slot names and behavior.
<ct-button raised>
<span slot="prefix">↑</span>
Label
<span slot="suffix">↓</span>
</ct-button>
CSS variables
Components are themed via CSS custom properties (e.g. --color-primary, --border-radius, --ct-button-radius). Set them on the host, a wrapper, or :root. See each component’s doc for the full list.
ct-button {
--color-primary: #00aeff;
--ct-button-radius: 26px;
}
Eventos
- Native events:
click, input, change, blur, etc. Use as in standard HTML.
- Custom events carry data in
event.detail. Example: ct-select fires value with detail.value (and detail.old). In Lit: @value=${(e) => this.value = e.detail.value}.
For event names and payloads per component, see the corresponding doc in examples/ or reference.md.
Resources
Index of components and their documentation. All paths are relative to this skill (e.g. examples/ct-button.md).
For usage patterns, props, slots, CSS variables, and events, open the linked doc for each component.
