ask-ui-kit

Framework-agnostic Web Components for building AI chat interfaces. Built with Lit and standard Custom Elements, these components work in any framework — Rails, Svelte, React, Vue, or plain HTML.

Installation

npm install @ask-rb/ask-ui-kit

Rails (importmap)

bin/importmap pin @ask-rb/ask-ui-kit

If JSPM doesn’t support scoped packages:

# config/importmap.rb
pin "@ask-rb/ask-ui-kit", to: "https://unpkg.com/@ask-rb/ask-ui-kit@0.1.0/dist/index.js"

<%= javascript_import_module_tag "@ask-rb/ask-ui-kit" %>

Svelte

npm install @ask-rb/ask-ui-kit

<script>
  import "ask-ui-kit";
</script>

Components

`<ask-message>`

A chat bubble for user or assistant messages. This is the foundational component — every chat UI starts here.

Attribute	Type	Default	Description
`role`	`"user" \\| "assistant"`	`"user"`	Message role. User messages are right-aligned with a bubble background; assistant messages are left-aligned with no background.
`content`	`string`	`""`	Message text content. Rendered as plain text with `white-space: pre-wrap` for preserving line breaks.

Examples

User message:

<ask-message role="user" content="Extract all line items from these invoices."></ask-message>

Assistant message:

<ask-message role="assistant" content="I found 12 line items across 3 invoices."></ask-message>

Rails ERB (with escaping):

<ask-message role="user" content="<%= escape_javascript(message.content) %>"></ask-message>

Svelte:

<ask-message role={msg.role} content={msg.content} />

React:

<ask-message role={role} content={content} />

Dark Mode

The component detects dark mode automatically, no configuration needed:

Scenario	Applied by
System prefers dark	`@media (prefers-color-scheme: dark)`
Host app has `.dark` class on `<html>`	`:host-context(.dark)`
Host app has `.light` class on `<html>`	Overrides system preference

Theming

Override colors via CSS custom properties on ask-message or any parent:

/* Light mode overrides */
ask-message {
  --ask-user-bg: #e5e7eb;
  --ask-user-text: #111827;
  --ask-assistant-text: #111827;
}

/* Dark mode overrides — applied automatically when dark */
ask-message {
  --ask-user-bg-dark: #374151;
  --ask-user-text-dark: #f9fafb;
  --ask-assistant-text-dark: #f9fafb;
}

Architecture

ask-ui-kit uses Shadow DOM for style encapsulation. Each component is a self-contained custom element with no external CSS dependencies.

How it works

┌─────────────────────────────────────────────┐
│  <ask-message role="user">                   │
│  ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐  │
│  │  #shadow-root                           │  │
│  │  ┌─────────────────────────────────┐    │  │
│  │  │  Tailwind utilities (inlined)    │    │  │
│  │  │  + :host-context theme rules     │    │  │
│  │  └─────────────────────────────────┘    │  │
│  │  ┌─────────────────────────┐            │  │
│  │  │  <div class="flex ...">  │            │  │
│  │  │    Message content      │            │  │
│  │  └─────────────────────────┘            │  │
│  └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘  │
└─────────────────────────────────────────────┘

The Tailwind CSS utility classes are compiled at build time and bundled into the component’s Shadow DOM. The host app does not need Tailwind — the components work in any project, with any CSS framework or none.

Principle: Tailwind in the template, CSS only for host-context

Components use Tailwind utility classes in the HTML template for layout and spacing. Custom CSS is reserved for what Tailwind cannot express:

:host styling
:host-context(.dark) / :host-context(.light) for theme scoping
@media (prefers-color-scheme: dark) for system dark mode

Changelog

See CHANGELOG on GitHub.