@buildonai/ui

Svelte 5 components, design tokens, and patterns shared across build-on-ai.com and the BuildOnAI desktop apps — Document Processor, Notes, Vox, Inbox.

The same Button, the same CommandPalette, the same theme tokens, on the website and in every desktop app. Light and dark are first-class.

The live spec lives at build-on-ai.com/design-system — every token and every component on this page is what this package ships.

Install

npm install @buildonai/ui

Use

<script>
  import '@buildonai/ui/tokens.css';
  import '@buildonai/ui/reset.css';

  import {
    Button, Card, Pill, Callout,
    Input, Textarea,
    Tabs, Dropdown, Modal, CommandPalette,
    ThemeToggle, SectionLabel, LabelMono, Kbd,
    Icons,
  } from '@buildonai/ui';

  const { Search, Settings } = Icons;
</script>

<Button variant="primary">Quickstart →</Button>
<Pill tone="accent">v0.1.0</Pill>
<ThemeToggle />

Components

Component	Notes
Button	primary / secondary. Renders <a> if href is set.
Card	Plain card surface, optional href makes it a link card.
Pill	neutral / accent / warn tones.
Callout	info / warn / danger tones. For non-blocking notes.
Input	Single-line text input with optional label.
Textarea	Multi-line input with optional label.
SectionLabel	Uppercase mono label, optional underline.
LabelMono	Inline mono label.
Kbd	Keyboard-cap style for shortcuts.
ThemeToggle	Light/dark, persisted to localStorage.
Tabs	Reactive tab strip with snippet-rendered panels.
Dropdown	Native <details> based — works without JS.
Modal	Native <dialog> element — Esc closes; backdrop blurs.
CommandPalette	Cmd/Ctrl+K overlay. Fuzzy search, keyboard nav.

Icons

Icons re-exports the entire Lucide icon set:

<script>
  import { Icons } from '@buildonai/ui';
  const { Search, Settings, Send, Mic } = Icons;
</script>

<Search size={16} />

Design tokens

CSS custom properties live on :root (light) and [data-theme="dark"]. To override a single value in your app, redeclare it in your own stylesheet after importing @buildonai/ui/tokens.css:

@import '@buildonai/ui/tokens.css';

:root {
  --accent: #2563EB;
}

Tauri menu helpers

Each desktop app builds its native menu from a shared base:

import { buildBaseMenu, extendMenu } from '@buildonai/ui';

const base = buildBaseMenu({ appName: 'Notes' });

const menu = extendMenu(base, 'file', [
  { id: 'file.import-folder', text: 'Import folder…', shortcut: '$mod+I' },
]);

// Hand `menu` to your Tauri Menu.new() construction.

The helpers describe the menu shape — the consuming Tauri app maps that spec onto real @tauri-apps/api/menu objects. The base ships with File / Edit / View / Settings / Help and a sensible default item set.

Licence

AGPL-3.0-only. A commercial licence for closed-source distribution is available — contact buildonai.tm@gmail.com.