Ui
@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 [email protected].
