@orochibraru/ui

Penombre, Homerun, OpenCount, Nuvio Web, LocalAssistant and Sergio's all had the same shadcn-svelte components, customised six slightly different ways. Now they have one package.

Source on GitHub npm MCP server

What it is

Svelte 5 components and the theme my apps share. The shadcn-svelte primitives as the apps customised them, components that take data and render the whole thing, app-level blocks, and an oklch theme driven by two variables. Built for SvelteKit, Svelte 5 runes and Tailwind CSS v4.

Use it

Install

bun add -d @orochibraru/ui

It goes in devDependencies. The app bundles it, nothing is needed at runtime.

app.css

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

That's the configuration. The theme brings the tokens, the state variants and an @source so Tailwind scans the package.

+page.svelte

<script lang="ts">
  import Form from "@orochibraru/ui/components/form";
</script>

<Form
  action="?/create"
  fields={[
    { name: "name", label: "Project name", required: true },
    { name: "role", type: "select", label: "Role", options: roles },
    { name: "notify", type: "switch", label: "Notify the team" },
  ]}
  messages={{ submit: "Create project", success: "Project created." }}
/>

A failed action that returns fail(400, { errors }) puts each message under its field. A toast narrates the submit.

What's in it

Primitives

The shadcn-svelte set, one subpath each: @orochibraru/ui/button, @orochibraru/ui/dialog. Moving an app over is a rewrite of its imports.

Components

data-table, form, select, date-field, file-dropzone, menu and friends. Data in, the whole thing out, phones included: tables become cards, menus become drawers.

Blocks

App-level pieces I kept rewriting: command-palette, auth-shell, bottom-nav, stepper, install-prompt, otp-field, a music player and a video player.

One theme, two variables

--hue and --primary-chroma set the palette. data-accent, data-font and data-corners on <html> re-theme the lot, AMOLED dark included.

Built for phones

Drawers under 768px, safe-area spacing, haptics, PWA install prompts, page transitions. Every app of mine gets installed on a phone, so the kit assumes it.

Server modules

A logger with JSON lines and trace ids, OpenTelemetry setup, request and crash hooks. The boring parts every SvelteKit app needs.

Translatable

Blocks with copy take a messages prop that overrides the English defaults key by key.

An MCP server in the box

The package ships an MCP server with the docs and every example bundled in, so the assistant in your editor can list, search and read the components instead of guessing them.

Claude Code

claude mcp add orochibraru-ui -- npx -y @orochibraru/ui

Cursor, VS Code and the rest take the same npx -y @orochibraru/ui command. Its tools are get_setup, list_components, search_components and get_component. The docs site serves the same thing over HTTP at /mcp, plus llms.txt.

The docs site

bun run dev is the docs site: a page per component with the component live and the code that renders it. That code is the example file itself, so the two can't drift. Phone-first components render inside an iPhone or Android frame at the real width. Every page copies as Markdown or opens in Claude or ChatGPT.

How it's built

Svelte 5 runes, SvelteKit, Tailwind CSS 4, bits-ui underneath
Theme in oklch, accent presets on a data attribute
Packaging checked with publint, caret ranges so apps dedupe bits-ui
Releases through releaser, stable and canary on npm

MIT licensed.