Locara
Components

A component library tuned for local-AI apps.
Granola-feel listening. Cursor-feel chat. Linear-feel keyboard.

Every component below is a single hand-crafted React + TypeScript file with a paired CSS file. Copy them into your repo via locara add <name>, or import directly from @locara/components. They read from the same design tokens, so they look like one product from the moment you wire them in.

52 showcase entries · React 18 + TypeScript · Plain CSS · no Tailwind required · Inspired by Granola · Cursor · Claude · Linear · Perplexity · Raycast

Composites

2

Editors

7

MarkdownEditor

Bear/iA Writer-flavoured prose editor. Markdown shortcuts, Cmd+K inline-edit, slash trigger, optional focus mode.

Marijn Haverbeke (ProseMirror input rules), Bear, iA Writer, Notion (slash menu).

typescript

CodeEditor

Minimal code editor with line numbers gutter, language label, copy button, language-aware comment toggle.

VS Code / Monaco gutter, CodeMirror 6 minimalism.

apps/transcribe/src/main.tsx +3−1
@@ −12, +12 @@
1111 function setBoot(msg: string) {
12 document.getElementById('boot').textContent = msg
12+ const b = document.getElementById('boot')
13+ if (b) b.textContent = msg
14+}
1315

DiffView

Accept-per-hunk diff in three modes: unified (default), split (review-pane), prose (Granola gray-AI / black-user).

Cursor inline diff, Granola enhanced-notes diff, GitHub unified format.

// Selection in the editor:

return useMemo(() => data.filter(d => d.active), [data])

InlineEditPopover

Cursor's Cmd+K floating prompt. Anchored to selection, auto-grow textarea, optional model + context picker slots.

Cursor inline-edit (cursor.com/docs/inline-edit/overview).

The Locara runtime is responsible for honoring the manifest's capability declarations at every system call.

EditorToolbar

Medium-style floating selection toolbar (or fixed-top variant) with an accent-toned AI button slot.

Medium (2012), Notion / Linear inline toolbars, Konstantin Münster on Lexical.

const recordings = await db.query('SELECT * FROM recordings WHERE user_id = ? ORDER BY created_at DESC LIMIT 50', [userId])
tab accept · next word · esc dismiss

SuggestionGhostText

Cursor's Tab-to-accept inline ghost text. Tab accepts whole, Cmd+→ accepts next word, Esc dismisses.

Cursor tab-complete (cursor.com/docs/tab/overview), VS Code Copilot inline suggestions.

EditorOutline

Notion/Bear sidebar TOC. Walks markdown for ATX headings; deterministic slugs; active-heading highlight.

Notion outline sidebar, Bear table of contents.

Chat & messaging

4

AI affordances

16
Qwen 2.5 7B4.9 GB · Q4_K_M
Localfast
Llama 3 8B4.9 GB · Q4_K_M
Local
Llama 3 70B42.8 GB · Q4_K_M
Localheavy
Llama 3.1 405B248 GB · Q4_K_M
Needs 256 GB+ Mac Studio

ModelSelector

Cursor-style model picker with optional download flow per row, capability badges, provider tags, RAM-based disabling.

Cursor model picker, t3.chat multi-provider dropdown, OpenRouter.

Qwen 2.5 7B Instruct (Q4_K_M)7B · Q4_K_M · 4.9 GB
Downloading
sha256:6a1a2eb6d15622bf3c96857206351ba97e1af16c30d7a74ee38970e434e9407e
2.8 GB of 4.9 GB·14.2 MB/s·2m 30s left
Whisper Base.en74M · FP16 · 150 MB
Ready
Ready to use · 150 MB

ModelDownloader

Standalone model-fetch surface. Identity + hash + size + progress + throughput + ETA + Download/Cancel/Retry.

Ollama download UI, Hugging Face download dialogs, Mac App Store install pane.

Local-first AI products typically use shared-memory architectures rather than discrete-GPU systems, because the latency cost of PCIe transfers dominates inference at single-batch.

CitationChip

Perplexity-style baseline-aligned citation pill. Numeric or badge variants, hover-syncs with SourceCard.

Perplexity inline citations, Granola transcript footnote chips.

SourceCard

Favicon + numbered title + domain + snippet. Pairs with CitationChip via hover-sync.

Perplexity sources rail, Bing Chat citations.

Running
Pending
This tool will modify your system. Approve to run.
OK

ToolCallCard

Collapsible AI-tool invocation. Icon + summary + status badge + Approve/Reject for capability-gated tools.

Cursor tool cards, Claude tool use display, Anthropic Workbench.

The user is asking about LLM memory tradeoffs on M-series Macs. I should consider: (1) parameter count → bytes at the chosen quantization, (2) KV cache size which grows linearly with context, (3) overhead for activations + OS. Q4_K_M is roughly 4.9 bits per weight. So a 7B model is ~4.3 GB just for weights…

Reasoning

Collapsible chain-of-thought block. Streams 'Thinking…' with bouncing dots, settles into 'Thought for Ns' with the full reasoning when expanded.

Claude reasoning blocks, o1/o3 thinking display, DeepSeek-R1.

Shimmer
Thinking…
Dots
Thinking…
Pulse
Thinking…

ThinkingIndicator

Pre-token "I'm working on it" cue. Three variants: shimmer (Anthropic), dots (iMessage), pulse (minimalist).

Claude's text shimmer, iMessage typing dots, Linear's pulse status.

The unified memory architecture in Apple Silicon means the CPU, GPU, and Neural Engine all share one pool of DRAM

StreamingText

Wraps any text/markdown to render with a blinking caret while streaming.

ChatGPT/Claude streaming cursor, Anthropic Workbench.

Context12,400 / 32,000 tokens
Context26,800 / 32,000 tokens
Context31,200 / 32,000 tokens
12.4K / 32K 26.8K / 32K

ContextMeter

Visualises context-window usage as a bar or pill, with warn/danger thresholds.

Cursor token meter, Anthropic Workbench, OpenRouter.

ModeSwitcher

Cursor-style Ask/Edit/Agent pill tabs. Compact horizontal tabs with optional icons + shortcuts.

Cursor mode switcher (Cmd+. tabs).

AttachmentChip

File/image/audio/code/video pill shown above the composer. Icon + name + size, remove button, optional progress bar.

Claude attachment chips, ChatGPT attachment pills.

Idle Streaming Ready Throttled Offline Live

StatusPill

Linear-style colored-dot + label pill. Tones (neutral/accent/success/warning/danger/live), optional pulse animation.

Linear status pills, Notion property pills.

New conversation

What would you like to do?

Pick one of the starter prompts, or just start typing below.

EmptyStateCards

Starter-prompt grid every great chat shows on first open. Eyebrow + title + 3-4 ghost cards with example prompts.

ChatGPT, Claude.ai, Perplexity blank-state cards.

Follow up

FollowupRow

Perplexity/Claude post-answer follow-up suggestion row. Horizontal scroll of arrow-prefixed ghost chips.

Perplexity follow-ups, Claude suggested next prompts.

Suggested rewrite — The unified memory architecture in Apple Silicon means the CPU, GPU, and Neural Engine all share one pool of DRAM, eliminating the PCIe bottleneck that dominates inference on discrete-GPU systems.

AcceptReject

Notion-AI / Granola accept-edit-discard ribbon. Sits below an AI block with Accept / Try again / Discard.

Notion AI inline block, Granola enhanced notes.

/sum
SummariseShort summary of the conversation so far ⌘S
SumeriaWikipedia → fetch URL
Sum a columnAggregate a CSV column · uses calc-tool

SlashMenu

Notion-style caret-anchored command list. Filters by query, keyboard nav with arrows + Enter, sticky group headers.

Notion slash menu, Linear Cmd+K but inline.

Voice & listening

3

System & power-user

3

Feedback & overlays

4

Form primitives

8
sm
md
off
lg

Switch

Immediate-effect on/off toggle. role=switch + aria-checked. Apple HIG: switches for immediate, checkboxes for deferred.

Apple HIG Toggles, Radix Switch, WAI-ARIA APG.

Checkbox

Tri-state (checked / unchecked / indeterminate) opt-in. aria-checked supports "mixed".

Apple HIG Toggles, Radix Checkbox, WAI-ARIA APG.

RadioGroup

Exclusive single-choice. Roving tabindex (one tab stop). Arrow keys move AND select per WAI-ARIA APG.

Radix RadioGroup, WAI-ARIA APG Radio Group, Apple HIG Radio buttons.

0.7
2048

Slider

Continuous or discrete numeric input. aria-valuetext for screen-reader-friendly values; PageUp/Down ±10×.

Apple HIG Sliders, Radix Slider, WAI-ARIA APG.

Qwen 2.5 7B4.9 GB
Llama 3 8B4.9 GB
Llama 3 70B42.8 GB
Llama 3.1 405Bneeds 256+ GB

Select

Listbox pop-up button (Apple HIG). Typeahead by first letter; arrow keys navigate; Esc closes.

Radix Select (listbox pattern), Apple HIG Pop-up buttons.

Transcribeaudio · stt
Translatestub

Combobox

Text input + filtered listbox. ARIA 1.2 combobox pattern with aria-activedescendant discipline.

WAI-ARIA 1.2 Combobox, cmdk (Paco Coursey), Apple Spotlight.

SegmentedControl

Apple HIG segmented control. Sliding indicator; 2–5 segments; for >5 use Tabs or Select.

Apple HIG Segmented Controls.

The bundle name shown in the Mac dock and in Locara's app list.

FormField

Label + control + hint + error wrapper. Auto-wires id, aria-describedby, aria-invalid.

Radix Form (Pedro Duarte), WAI-ARIA APG.

Layout & primitives

5