Skip to main content

Svelte 5 components and the theme shared by OpenCount, LocalAssistant, Homerun, Sergio's, Nuvio Web and Penombre. Every page shows the component live and the code that renders it.

Blocks

29

App-level pieces the apps shared copies of.

Components

21

One import, data in: the everyday controls without assembling primitives.

Modules

9

Helpers for toasts, titles, appearance and haptics, and the server side: logs, traces and hooks.

Appearance

Install

Terminal 
bun add -d @orochibraru/ui

Import the theme right after Tailwind in the app's root stylesheet. It brings the tokens, the variants and an @source that makes Tailwind scan the package.

app.css 
@import "tailwindcss";
@import "@orochibraru/ui/theme.css";

Use with AI

The package ships an MCP server with every component's docs and code: your editor's assistant can list, search and read them. Every page also has a Copy page button for its Markdown.

Add to Cursor Add to VS Code
Claude Code 
claude mcp add orochibraru-ui -- npx -y @orochibraru/ui
mcp.json 
{
  "mcpServers": {
    "orochibraru-ui": {
      "command": "npx",
      "args": [
        "-y",
        "@orochibraru/ui"
      ]
    }
  }
}

Without installing anything: llms.txt, llms-full.txt and the hosted MCP endpoint at /mcp.

Primitives

The package also exports shadcn-svelte's components as the apps customised them, under @orochibraru/ui/<name>. They're documented on shadcn-svelte; the MCP server and llms.txt still carry their usage code.

Privacy and credits. The tabbed-section pattern runs live in a demo section.