> @orochibraru/ui is a free, open-source Svelte 5 component library for SvelteKit and Tailwind CSS v4: shadcn-svelte primitives, data-in form components, app blocks, an oklch theme, and a bundled MCP server so your editor's assistant knows every component.
> Source: https://orochibraru.com/ui · Site index: https://orochibraru.com/llms.txt

# @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.

## 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

```bash
bun add -d @orochibraru/ui
```

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

### app.css

```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

```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

```bash
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](https://orochibraru.com/releaser), stable and canary on npm

MIT licensed.