mozhi-ui

Reusable React UI components from the Mozhi UI design system.

Install

npm install mozhi-ui

Usage

Import the package stylesheet once near your app root:

import "mozhi-ui/styles.css";

Then import components:

import { Button, CodeBlock, GithubStarCounter, Tabs, TabsPanel } from "mozhi-ui";

CodeBlock can now highlight source code directly:

<CodeBlock code={`const greeting = "Hello";`} lang="ts" />

If you need pre-rendered HTML (for SSR pipelines), use the exported helper:

import { CodeBlock, highlightCode } from "mozhi-ui";

const html = await highlightCode('const greeting = "Hello";', { lang: "ts" });
<CodeBlock html={html} />;

Brand Colors

Brand utilities use the brand scale (for example: text-brand-9, bg-brand-3, ring-brand-7). If you manage your own Tailwind theme tokens, map them to --color-brand-1 through --color-brand-12:

@theme {
  --color-brand-1: var(--brand-1);
  --color-brand-2: var(--brand-2);
  --color-brand-3: var(--brand-3);
  --color-brand-4: var(--brand-4);
  --color-brand-5: var(--brand-5);
  --color-brand-6: var(--brand-6);
  --color-brand-7: var(--brand-7);
  --color-brand-8: var(--brand-8);
  --color-brand-9: var(--brand-9);
  --color-brand-10: var(--brand-10);
  --color-brand-11: var(--brand-11);
  --color-brand-12: var(--brand-12);
}

Peer Dependencies

• react ^19
• react-dom ^19