Skip to content

Adapter

Fast, fearless styling for Web Components.

Adapter isolates CSS automatically so your UI survives every embed, extension, and AI-generated page. No new syntax, no bundle weight, just custom elements that always look right.

Getting Started Core Concepts Framework Integration
~2 kB gzipped No build step required Works in Browser, Deno, Node

CSS that never collides

Per-class and per-instance constructable style sheets keep host CSS out and your rules in.

Drop into any stack

React, Vue, Svelte, Lit, Deno, Bun, or plain JS - Adapter is framework-agnostic and zero-dependency.

Design-system ready

Compose tokens and variants with normal CSS. Inherit styles the same way you inherit classes.

Built for embeds

Ship widgets, plugins, dashboards, and AI surfaces without worrying about hostile global CSS.

Code that feels familiar

TypeScript
import { Adapter } from "https://cdn.jsdelivr.net/npm/@devcapsule/adapter/+esm";

class Button extends Adapter {}

Button.css = `
  display: inline-flex;
  gap: 0.5rem;
  align-items: center;
  padding: 0.7rem 1.1rem;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--accent, #22d3ee) 60%, transparent);
  background: color-mix(in srgb, var(--accent, #22d3ee) 18%, #0b1224);
  color: #e6edff;

  &[kind="ghost"] {
    background: transparent;
  }
`;

Button.define("ui-button");

What you get

  • Encapsulated class-level CSS shared by every instance.
  • Per-instance overrides via the `css` property or attribute.
  • Composable helpers for tokens and variants - no new syntax.
  • Ready-to-embed components that ignore hostile host CSS.