JSPM

  • Created
  • Published
  • Downloads 301
  • Score
    100M100P100Q72194F
  • License MIT

Rust/WASM Custom Elements — 50 production-grade UI components

Package Exports

  • @colletdev/core
  • @colletdev/core/brand
  • @colletdev/core/chat-builders
  • @colletdev/core/elements/accordion.d.ts
  • @colletdev/core/elements/accordion.js
  • @colletdev/core/elements/activity_group.d.ts
  • @colletdev/core/elements/activity_group.js
  • @colletdev/core/elements/alert.d.ts
  • @colletdev/core/elements/alert.js
  • @colletdev/core/elements/autocomplete.d.ts
  • @colletdev/core/elements/autocomplete.js
  • @colletdev/core/elements/avatar.d.ts
  • @colletdev/core/elements/avatar.js
  • @colletdev/core/elements/backdrop.d.ts
  • @colletdev/core/elements/backdrop.js
  • @colletdev/core/elements/badge.d.ts
  • @colletdev/core/elements/badge.js
  • @colletdev/core/elements/breadcrumb.d.ts
  • @colletdev/core/elements/breadcrumb.js
  • @colletdev/core/elements/button.d.ts
  • @colletdev/core/elements/button.js
  • @colletdev/core/elements/card.d.ts
  • @colletdev/core/elements/card.js
  • @colletdev/core/elements/carousel.d.ts
  • @colletdev/core/elements/carousel.js
  • @colletdev/core/elements/chat.d.ts
  • @colletdev/core/elements/chat.js
  • @colletdev/core/elements/chat_input.d.ts
  • @colletdev/core/elements/chat_input.js
  • @colletdev/core/elements/checkbox.d.ts
  • @colletdev/core/elements/checkbox.js
  • @colletdev/core/elements/code_block.d.ts
  • @colletdev/core/elements/code_block.js
  • @colletdev/core/elements/collapsible.d.ts
  • @colletdev/core/elements/collapsible.js
  • @colletdev/core/elements/date_picker.d.ts
  • @colletdev/core/elements/date_picker.js
  • @colletdev/core/elements/dialog.d.ts
  • @colletdev/core/elements/dialog.js
  • @colletdev/core/elements/drawer.d.ts
  • @colletdev/core/elements/drawer.js
  • @colletdev/core/elements/fab.d.ts
  • @colletdev/core/elements/fab.js
  • @colletdev/core/elements/file_upload.d.ts
  • @colletdev/core/elements/file_upload.js
  • @colletdev/core/elements/flavour.d.ts
  • @colletdev/core/elements/flavour.js
  • @colletdev/core/elements/icon.d.ts
  • @colletdev/core/elements/icon.js
  • @colletdev/core/elements/listbox.d.ts
  • @colletdev/core/elements/listbox.js
  • @colletdev/core/elements/menu.d.ts
  • @colletdev/core/elements/menu.js
  • @colletdev/core/elements/message_bubble.d.ts
  • @colletdev/core/elements/message_bubble.js
  • @colletdev/core/elements/message_group.d.ts
  • @colletdev/core/elements/message_group.js
  • @colletdev/core/elements/message_part.d.ts
  • @colletdev/core/elements/message_part.js
  • @colletdev/core/elements/message_timeline.d.ts
  • @colletdev/core/elements/message_timeline.js
  • @colletdev/core/elements/pagination.d.ts
  • @colletdev/core/elements/pagination.js
  • @colletdev/core/elements/popover.d.ts
  • @colletdev/core/elements/popover.js
  • @colletdev/core/elements/profile_menu.d.ts
  • @colletdev/core/elements/profile_menu.js
  • @colletdev/core/elements/progress.d.ts
  • @colletdev/core/elements/progress.js
  • @colletdev/core/elements/radio_group.d.ts
  • @colletdev/core/elements/radio_group.js
  • @colletdev/core/elements/scroll_area.d.ts
  • @colletdev/core/elements/scroll_area.js
  • @colletdev/core/elements/scrollbar.d.ts
  • @colletdev/core/elements/scrollbar.js
  • @colletdev/core/elements/search_bar.d.ts
  • @colletdev/core/elements/search_bar.js
  • @colletdev/core/elements/select.d.ts
  • @colletdev/core/elements/select.js
  • @colletdev/core/elements/sidebar.d.ts
  • @colletdev/core/elements/sidebar.js
  • @colletdev/core/elements/skeleton.d.ts
  • @colletdev/core/elements/skeleton.js
  • @colletdev/core/elements/slider.d.ts
  • @colletdev/core/elements/slider.js
  • @colletdev/core/elements/speed_dial.d.ts
  • @colletdev/core/elements/speed_dial.js
  • @colletdev/core/elements/spinner.d.ts
  • @colletdev/core/elements/spinner.js
  • @colletdev/core/elements/split_button.d.ts
  • @colletdev/core/elements/split_button.js
  • @colletdev/core/elements/stepper.d.ts
  • @colletdev/core/elements/stepper.js
  • @colletdev/core/elements/switch.d.ts
  • @colletdev/core/elements/switch.js
  • @colletdev/core/elements/table.d.ts
  • @colletdev/core/elements/table.js
  • @colletdev/core/elements/tabs.d.ts
  • @colletdev/core/elements/tabs.js
  • @colletdev/core/elements/text.d.ts
  • @colletdev/core/elements/text.js
  • @colletdev/core/elements/text_input.d.ts
  • @colletdev/core/elements/text_input.js
  • @colletdev/core/elements/theme.d.ts
  • @colletdev/core/elements/theme.js
  • @colletdev/core/elements/thinking.d.ts
  • @colletdev/core/elements/thinking.js
  • @colletdev/core/elements/toast.d.ts
  • @colletdev/core/elements/toast.js
  • @colletdev/core/elements/toggle_group.d.ts
  • @colletdev/core/elements/toggle_group.js
  • @colletdev/core/elements/tooltip.d.ts
  • @colletdev/core/elements/tooltip.js
  • @colletdev/core/elements/top_bar.d.ts
  • @colletdev/core/elements/top_bar.js
  • @colletdev/core/generated/styles.js
  • @colletdev/core/markdown
  • @colletdev/core/runtime
  • @colletdev/core/server
  • @colletdev/core/tailwind.css
  • @colletdev/core/vite-plugin
  • @colletdev/core/wasm/package.json
  • @colletdev/core/wasm/wasm_api.d.ts
  • @colletdev/core/wasm/wasm_api.js
  • @colletdev/core/wasm/wasm_api_bg.wasm
  • @colletdev/core/wasm/wasm_api_bg.wasm.d.ts

Readme

@colletdev/core

48 accessible web components built in Rust, compiled to WASM, distributed as Custom Elements. Component-level WCAG 2.2 AA constraints are enforced at compile time -- page-level integration (focus order, layout, slotted content) remains the consumer's responsibility. WASM loads on interaction only.

Install

npm install @colletdev/core

Quick Start

import { init } from '@colletdev/core';

await init(); // registers all <cx-*> elements
<cx-button variant="filled" label="Save" intent="primary"></cx-button>
<cx-text-input label="Email" kind="email" placeholder="you@example.com"></cx-text-input>

Selective Loading

await init({ components: ['button', 'text-input', 'select'] }); // tree-shakes the rest
await init({ lazy: true });                                      // defer WASM until interaction

Theming

Collet uses CSS custom properties for all colors, spacing, typography, and motion. Override the defaults in your own stylesheet or generate a custom tokens.css with @colletdev/tokens.

:root {
  --color-primary: oklch(0.55 0.22 265);
  --color-surface: oklch(0.98 0 0);
  --radius-md: 0.5rem;
}

Vite Plugin

Handles WASM MIME types, asset copying, preload hints, and Declarative Shadow DOM pre-rendering.

import { colletPlugin } from '@colletdev/core/vite-plugin';
export default defineConfig({ plugins: [colletPlugin()] });

SSR

Server-side rendering helpers are available via the /server export:

import { renderToString } from '@colletdev/core/server';

Exports

Export Description
@colletdev/core init(), element registrations, TypeScript types
@colletdev/core/runtime Base classes (CxElement, CxFormElement)
@colletdev/core/vite-plugin Vite integration
@colletdev/core/server SSR utilities
@colletdev/core/markdown renderMarkdown() / renderMarkdownSync()
@colletdev/core/elements/* Individual Custom Element definitions

IDE Support

A custom-elements.json manifest is included. VS Code, WebStorm, and Lit-based tooling will pick it up for autocomplete and documentation on <cx-*> tags.

License

MIT -- github.com/Danrozen87/collet