Component Library

Server-rendered building blocks. Each component is a pure function that returns an HTML string — no client-side JS, no build step, accessible and mobile-ready by default. The output is the same every time the same props are passed.

Setup

Components are imported directly into the spec file alongside the stylesheet reference in meta.styles. No build step, no registration.

import { button, card, input } from '@invisibleloop/pulse/ui'
import { escHtml }          from '@invisibleloop/pulse/html'

export default {
  route: '/example',
  meta: {
    title:  'Example',
    styles: ['/pulse-ui.css', '/app.css'],
  },
  view: () => `
    <main id="main-content">
      ${card({
        title:   'Welcome',
        content: button({ label: 'Get started', href: '/start' }),
      })}
    </main>
  `,
}

Theming

All visual values flow through CSS custom properties. Override any --ui-* token in :root in your app.css to retheme the entire library at once.

/* app.css */
:root {
  --ui-accent:       #6366f1;
  --ui-accent-hover: #818cf8;
  --ui-accent-dim:   rgba(99, 102, 241, .12);
  --ui-radius:       6px;
  --ui-bg:           #ffffff;
  --ui-surface:      #f9fafb;
  --ui-text:         #111827;
  --ui-muted:        #6b7280;
  --ui-border:       #e5e7eb;
}

New variants follow the ui-btn--{name} CSS modifier pattern. A brand-coloured button, for example, is just a new class in app.css — the component itself stays untouched.

.ui-btn--brand {
  background: var(--brand);
  color:      #fff;
  border:     none;
}
.ui-btn--brand:hover:not(.ui-btn--disabled) {
  background: var(--brand-hover);
}

Components

Each component has its own page with full demos, code examples, and a props reference.

UI

Landing page

Layout

Utility classes

pulse-ui.css ships a utility layer (prefix u-) for common spacing, typography, and layout needs. Reach for these before writing custom CSS — they use the same --ui-* tokens as components so theme overrides apply everywhere.

Spacing

Scale: 1=4px 2=8px 3=12px 4=16px 5=20px 6=24px 8=32px 10=40px 12=48px 16=64px

Typography

Layout

Visual

Utilities compose naturally with components and with each other:

<!-- centred hero block — no custom CSS needed -->
<"tok-fn">class="tok-kw">div "tok-fn">class="u-flex u-flex-col u-items-center u-text-center u-py-16 u-gap-4">
  <"tok-fn">class="tok-kw">h1 "tok-fn">class="u-text-4xl u-font-bold">Hello</"tok-fn">class="tok-kw">h1>
  <"tok-fn">class="tok-kw">p "tok-fn">class="u-text-lg u-text-muted u-max-w-prose">Subtitle goes here.</"tok-fn">class="tok-kw">p>
  ${button({ label: 'Get started', href: '/start' })}
</"tok-fn">class="tok-kw">div>

Composing components

Components compose naturally — pass the output of one as the content or footer of another. Here's a stat dashboard card:

import { card, stat, button } from '@invisibleloop/pulse/ui'

card({
  title:   'This week',
  content: `
    ${stat({ label: 'Page views', value: '48,291', change: '+12%', trend: 'up' })}
    ${stat({ label: 'New users',  value: '1,042',  change: '+4%',  trend: 'up' })}
    ${stat({ label: 'Bounced',    value: '22%',    change: '+1%',  trend: 'down' })}
  `,
  footer: button({ label: 'View full report', href: '/analytics', variant: 'ghost', size: 'sm' }),
})